<template>
  <a-row :gutter="10" class="list-pubu">
    <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <!--<a-row :gutter="24">
              &lt;!&ndash;<a-col :md="8" :sm="8">
                <a-form-item
                  label="抓取日期"
                  :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                  :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
                >
                  <a-range-picker name="buildTime" style="width: 100%" v-model="time" />
                </a-form-item>
              </a-col>&ndash;&gt;
              <a-col :md="8" :sm="8">
                <a-form-item label="发布人">
                  <a-input placeholder="请输入发布人昵称" v-model="queryParam.userName"></a-input>
                </a-form-item>
              </a-col>
            </a-row>-->
            <a-row :gutter="24">
              <a-col :md="4" :sm="3">
                <a-form-item label="排序">
                  <a-radio-group v-model="queryParam.orderByColumn">
                    <a-radio-button value="create_time">按抓取时间</a-radio-button>
                    <!--<a-radio-button value="play">按播放数</a-radio-button>
                    <a-radio-button value="like_cnt">按喜欢数</a-radio-button>
                    <a-radio-button value="comment">按评论数</a-radio-button>-->
                  </a-radio-group>
                </a-form-item>
               
              </a-col>
              <a-col :md="8" :sm="8">
                
                <a-form-item label="标题">
                  <a-input placeholder="标题名称" style="width: 300px" allowClear v-model="queryParam.title" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="6">
                <a-form-item>
                  <a-radio-group v-model="queryParam.orderByType">
                    <a-radio-button value="asc">正序</a-radio-button>
                    <a-radio-button value="desc">倒序</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="4">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button
                  type="primary"
                  @click="searchReset"
                  icon="reload"
                  style="margin-left: 8px"
                >重置</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <hot-material-modal ref="modalForm"></hot-material-modal>
      </a-card>
    </a-col>
    <vue-waterfall-easy
      class="adcover_waterfall_container"
      ref="waterfall"
      :imgsArr="imgsArr"
      @click="handleDetail"
      @scrollReachBottom="getData"
      style="height: 800px;"
    >
      <div class="img-info" slot-scope="props">

        <div class="some-info">
          <ul>
            <li>
              <b>标题：</b>
              <span>{{props.value.title}}</span>
            </li>
            <li>
              <b>媒体类型：</b>
              <span>{{props.value.appName}}</span>
            </li>
            <li>
              <b>抓取时间：</b>
              <span>{{props.value.createTime}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div slot="waterfall-over">无更多数据</div>
    </vue-waterfall-easy>
    <div class="scroll_top">
      <a-icon type="to-top" />
    </div>
  </a-row>
</template>

<script>
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import vueWaterfallEasy from 'vue-waterfall-easy'
import HotMaterialModal from './modules/HotMaterialModal'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import moment from 'moment'
import $ from 'jquery'

let timeout
let currentValue

function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout)
    timeout = null
  }
  currentValue = value

  function fake() {}

  timeout = setTimeout(fake, 300)
}

$(function() {
  $('.scroll_top').click(function() {
    $('.vue-waterfall-easy-scroll').animate(
      {
        scrollTop: 0
      },
      500
    )
    return false
  })
  $('.vue-waterfall-easy-scroll').scroll(function() {
    var top = $('.vue-waterfall-easy-scroll').scrollTop()
    if (top >= 100) {
      $('.scroll_top').fadeIn()
    } else {
      $('.scroll_top').fadeOut()
    }
  })
})

export default {
  name: 'waterfall',
  // mixins:[JeecgListMixin],
  data() {
    return {
      queryParam: {
        orderByColumn: 'create_time',
        orderByType: 'desc',
        start: '',
        end: '',
        title:'',
      },
      time: [],
      companyData: [],
      productData: [],
      value: undefined,
      imgsArr: [],
      pageNo: 1, // request param
      url: {
        feedsUrl: '/ctop/hot/material/feeds',
        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
        list: '/ctop/hot/material/feeds'
      },
      validatorRules: {
        pid: {},
        name: {},
        code: {}
      },
      pidField: 'pid',
      isCoverStar: false // 收藏
    }
  },
  components: {
    AFormItem,
    ACol,
    ARow,
    vueWaterfallEasy,
    HotMaterialModal,
    JTreeSelect
  },
  mixins: [JeecgListMixin],
  methods: {
    searchQuery() {
      this.imgsArr = []
      this.ipagination.current = 1
      if (this.time != null && this.time.length > 0) {
        this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
        this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
      }

      this.getData()
    },
    searchReset() {
      this.queryParam = {
        orderByColumn: 'create_time',
        orderByType: 'desc'
      }
      this.imgsArr = []
      this.time = []
      this.ipagination.current = 1
      this.ipagination.pageSize = 20
      this.getData()
    },
    handleProductSearch(value) {
      getAction(this.url.productSugestUrl, { product: value }).then(res => {
        console.log(res)
        if (currentValue === value) {
          const result = res.result
          const data = []
          result.forEach(r => {
            data.push({
              value: r,
              text: r
            })
          })
          this.productData = data
        }
      })
      fetch(value)
    },
    handleProductChange(value) {
      this.value = value
      fetch(value, data => (this.productData = data))
    },
    handleCompanySearch(value) {
      getAction(this.url.companySugestUrl, { company: value }).then(res => {
        if (currentValue === value) {
          const result = res.result
          const data = []
          result.forEach(r => {
            data.push({
              value: r,
              text: r
            })
          })
          this.companyData = data
        }
      })
      fetch(value)
    },
    handleCompanyChange(value) {
      this.value = value
      fetch(value, data => (this.companyData = data))
    },
    handleDetail(event, { index, value }) {
      this.$refs.modalForm.show(value)
      this.$refs.modalForm.title = '详情'
    },
    flushData() {
      this.imgsArr = []
      this.pageNo = 1
      this.getData()
    },
    modalFormOk() {},
    getQueryParams() {
      //获取查询条件
      var param = Object.assign(this.queryParam, this.isorter, this.filters)
      param.pageNo = this.ipagination.current
      param.pageSize = 20
      return filterObj(param)
    },
    getData() {
      var params = this.getQueryParams() //查询条件
      console.log(params)
      getAction(this.url.feedsUrl, params).then(res => {
        console.log(res)
        this.ipagination.current = this.ipagination.current + 1
        if (res.success) {
          if (res.result.records.length == 0) {
            this.$refs.waterfall.waterfallOver()
            return
          }
          for (var i = 0; i < res.result.records.length; i++) {
            let arr = {};
            arr.id = res.result.records[i].material_id;
            arr.vid = res.result.records[i].vid;
            arr.videoUrl = res.result.records[i].videoUrl;
            arr.coverImage = res.result.records[i].url;
            arr.src = res.result.records[i].coverUrl;
            arr.title = res.result.records[i].title;
            arr.appCode = res.result.records[i].appCode;
            arr.appName = res.result.records[i].appName;
            arr.createTime = res.result.records[i].createTime;
            arr.updateTime = res.result.records[i].updateTime;
            this.imgsArr = this.imgsArr.concat(arr)
          }
        }
      })
    }
  },
  created() {
    this.getData()
  }
}
</script>


<style lang="scss">
.adcover_waterfall_container {
  .img-box {
    .img-inner-box {
      position: relative;
      cursor: pointer;

      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      .img-wraper {
        // height: 427px!important;
        img {
        }
      }
      .img-info {
        position: relative;
        // height: 146px!important;
        .some-info {
          color: rgba(0, 0, 0, 0.65);
          padding: 10px;
          ul {
            margin: 0;
            padding: 0;
            li {
              list-style: none;
              padding: 0;
              margin: 0;
            }
          }
        }
        .cover_star {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 10px;
          z-index: 1;
          color: rgba(0, 0, 0, 0.65);
          .coverStar {
            color: red;
          }
        }
      }
    }
  }
}
.scroll_top {
  position: fixed;
  z-index: 9;
  right: 80px;
  bottom: 40px;
  display: none;
  cursor: pointer;
  color: #1890ff;
  font-size: 40px;
}
</style>
<style>
.list-pubu .ball-beat {
  height: 100px;
}
.list-pubu .loading {
  position: fixed !important;
  z-index: 10 !important;
  left: 60% !important;
  bottom: 0 !important;
}
.sider.light {
  z-index: 11;
}
</style>