<template>
  <a-row :gutter="10" class="list-pubu">
    <vue-waterfall-easy
      class="adcover_waterfall_container"
      ref="waterfall"
      :imgsArr="imgsArr"
      @click="handleDetail"
      @scrollReachBottom="getData"
      style="height: 800px;"
    >
      <!-- majorIndustryName -->

      <span slot-scope="props" class="tag">{{ props.value.firstIndustryName }}</span>
      <div slot="waterfall-over">无更多数据</div>
    </vue-waterfall-easy>
    <app-ad-modal ref="modalForm"></app-ad-modal>
    <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 AppAdModal from './modules/creativeModal'
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',
  data() {
    return {
      queryParam: {
        // sortType: 1
      },
      time: [],
      companyData: [],
      productData: [],
      value: undefined,
      imgsArr: [],
      pageNo: 1, // request param
      url: {
        feedsUrl: '/ctop/kuaishouInspiredAd/list',
        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
        list: '/ctop/kuaishouInspiredAd/list'
      },
      validatorRules: {
        pid: {},
        name: {},
        code: {}
      },
      pidField: 'pid',
      isCoverStar: false // 收藏
    }
  },
  components: {
    AFormItem,
    ACol,
    ARow,
    vueWaterfallEasy,
    AppAdModal,
    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 = {
      //     sortType: 1
      //   }
      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)
      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
          }
          var arr = res.result.records.map(item => {
            return {
              ...item,
              src: item.coverThumbnailUrl
            }
          })
          this.imgsArr = this.imgsArr.concat(arr)
          //   for (var i = 0; i < res.result.records.length; i++) {
          //     let arr = {}
          //     arr.id = res.result.records[i].id
          //     arr.mid = res.result.records[i].mid
          //     arr.title = res.result.records[i].title
          //     arr.play = res.result.records[i].play
          //     arr.share = res.result.records[i].share
          //     arr.comment = res.result.records[i].comment
          //     arr.coverImage = res.result.records[i].coverThumbnailUrl
          //     arr.src = res.result.records[i].coverThumbnailUrl
          //     arr.url = res.result.records[i].mainMvUrl
          //     arr.videoId = res.result.records[i].video_id
          //     arr.coreUserId = res.result.records[i].core_user_id
          //     arr.nickName = res.result.records[i].nickName
          //     arr.headImageUri = res.result.records[i].head_image_uri
          //     arr.likeCnt = res.result.records[i].like_cnt
          //     arr.createTime = res.result.records[i].createTime
          //     this.imgsArr = this.imgsArr.concat(arr)
          //   }
        }
      })
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px;
  border-radius: 2px;
  line-height: 16px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
<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>
