<template>
  <a-row :gutter="10">
    <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">
              <a-col :md="8" :sm="8">
                <a-form-item label="行业">
                  <j-tree-select
                    v-model="queryParam.industry"
                    ref="treeSelect"
                    placeholder="请选择行业"
                    v-decorator="['pid', validatorRules.pid]"
                    dict="sys_category,name,id"
                    pidField="pid"
                    pidValue="67d69117968be1eecb1e705b399b9d93">
                  </j-tree-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item label="广告主公司">
                  <a-select
                    showSearch
                    v-model="queryParam.company"
                    placeholder="请输入公司名称"
                    style="width: 300px"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :filterOption="false"
                    @search="handleCompanySearch"
                    @change="handleCompanyChange"
                    :notFoundContent="null"
                  >
                    <a-select-option v-for="d in companyData" :key="d.value">{{d.text}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item label="推广产品">
                  <a-select
                    showSearch
                    v-model="queryParam.product"
                    placeholder="请输入产品名称"
                    style="width: 300px"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :filterOption="false"
                    @search="handleProductSearch"
                    @change="handleProductChange"
                    :notFoundContent="null"
                  >
                    <a-select-option v-for="d in productData" :key="d.value">{{d.text}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <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>
              <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="10" :sm="10">
                <a-form-item label="排序">
                  <a-radio-group v-model="queryParam.orderByColumn">
                    <a-radio-button value="create_time">按抓取时间</a-radio-button>
                    <a-radio-button value="time">按发布时间</a-radio-button>
                    <a-radio-button value="view_count">按展示数</a-radio-button>
                    <a-radio-button value="like_count">按喜欢数</a-radio-button>
                    <a-radio-button value="comment_count">按评论数</a-radio-button>
                  </a-radio-group>
                </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="8" :sm="8">
                <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>

        <app-ad-modal ref="modalForm"></app-ad-modal>
      </a-card>
    </a-col>
    <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" @click="handleDetail" @scrollReachBottom="getData"
                        style="height: 800px;">
      <div class="img-info" slot-scope="props">
        <p class="some-info">发布人:{{props.value.userName}},质量分:{{props.value.score}}<br/>发布时间:{{props.value.time}}<br/>展示:{{props.value.viewCount}},喜欢:{{props.value.likeCount}},评论:{{props.value.commentCount}}
        </p>
      </div>
      <div slot="waterfall-over">无更多数据</div>
    </vue-waterfall-easy>
  </a-row>

</template>

<script>
  import {getAction} from '@/api/manage'
  import {filterObj} from '@/utils/util'
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import AppAdModal from './modules/AppAdModal'
  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"

  let timeout;
  let currentValue;

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

    function fake() {
    }

    timeout = setTimeout(fake, 300);
  }

  export default {
    name: 'waterfall',
    // mixins:[JeecgListMixin],
    data() {
      return {
        queryParam: {
          orderByColumn: 'create_time',
          orderByType: 'desc',
          start: '',
          end: ''
        },
        time: [],
        companyData: [],
        productData: [],
        value: undefined,
        imgsArr: [],
        pageNo: 1,// request param
        url: {
          feedsUrl: '/ctop/adcover/feeds',
          companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
          productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
          list: '/ctop/adcover/feeds',
        },
        validatorRules: {
          pid: {},
          name: {},
          code: {},
        },
        pidField: "pid"
      }
    },
    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 = {
          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.photoId, value.userId);
        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.length == 0) {
              this.$refs.waterfall.waterfallOver()
              return
            }
            for (var i = 0; i < res.result.length; i++) {
              let arr = {}
              arr.coverId = res.result[i].coverId
              arr.src = res.result[i].coverUrl
              arr.time = res.result[i].time
              arr.userName = res.result[i].userName
              arr.viewCount = res.result[i].viewCount
              arr.likeCount = res.result[i].likeCount
              arr.commentCount = res.result[i].commentCount
              arr.score = res.result[i].score
              arr.userId = res.result[i].userId
              arr.photoId = res.result[i].photoId
              //arr.href=res.result.records[i].mvUrl
              this.imgsArr = this.imgsArr.concat(arr)

            }
          }
        })
      },
    },
    created() {
      this.getData()
    }
  }
</script>

<style scoped>

</style>