<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="12" :sm="12">-->
              <!--                <a-form-item label="搜索" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">-->
              <!--&lt;!&ndash;                  <a-input placeholder=""></a-input>&ndash;&gt;-->
              <!--                </a-form-item>-->
              <!--              </a-col>-->
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="12" :sm="24">
               <a-button type="primary" icon="plus" @click="handleAdd" style="margin-left: 21px">添加爬取目标</a-button>
              <a-button type="primary" @click="flushData" icon="reload" style="margin-left: 8px">刷新数据</a-button>
            </a-col>
          </span>
            </a-row>
          </a-form>
        </div>
        <kuaishou-user-modal ref="modalForm" @ok="modalFormOk"></kuaishou-user-modal>

      </a-card>
    </a-col>
    <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="getData" style="height: 800px;">
      <div class="img-info" slot-scope="props">
        <p class="some-info">发布时间:{{props.value.timesTamp}}<br/>展示:{{props.value.viewCnt}},喜欢:{{props.value.likeCnt}},评论:{{props.value.commentCnt}}
        </p>
      </div>
      <div slot="waterfall-over">无更多数据</div>
    </vue-waterfall-easy>
  </a-row>

</template>

<script>
  import {getAction} from '@/api/manage'
  import vueWaterfallEasy from 'vue-waterfall-easy'
  // import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import KuaishouUserModal from './modules/KuaishouUserModal'
  import axios from 'axios'
  import {VueWaterfallEasy} from '@/mixins/VueWaterfallEasy'
  //let group = 1;
  export default {
    name: 'waterfall',
    // mixins:[JeecgListMixin],
    data() {
      return {
        imgsArr: [],
        group: 99999999,// request param
        url: {
          waterfallurl: '/graphql/publicfeeds',
          // list:'/graphql/publicfeeds',
        }
      }
    },
    components: {
      vueWaterfallEasy,
      KuaishouUserModal
    },
    methods: {
      flushData() {
        this.imgsArr = []
        this.group = 99999999
        this.getData()
      },
      handleAdd: function () {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
      },
      modalFormOk() {

      },
      getData() {
        let params = {}
        params.num = this.group
        console.log(params)
        getAction(this.url.waterfallurl, params).then((res) => {
          console.log(res)
          if (res.success) {
            for (var i = 0; i < res.result.records.length; i++) {
              let arr = {}
              arr.src = res.result.records[i].thumbnailUrl
              arr.timesTamp = res.result.records[i].times;
              arr.viewCnt = res.result.records[i].viewCount
              arr.likeCnt = res.result.records[i].likeCount
              arr.commentCnt = res.result.records[i].commentCount
              arr.href = "https://live.kuaishou.com/u/" + res.result.records[i].userId + "/" + res.result.records[i].photoId
              this.imgsArr = this.imgsArr.concat(arr)
              this.group = res.result.records[i].num
              if (this.group == 1) {
                this.$refs.waterfall.waterfallOver()
                return
              }
            }
          }
        })
      },
    },
    created() {
      this.getData()
    }
  }
</script>

<style scoped>

</style>