<template>
  <div class="materialRank">
    <div class="optionLine">
      <span class="timedate">日期选择：</span>
      <a-range-picker :disabled-date="disabledDate" format="YYYY-MM-DD" style="width: 250px;" @change="dateChange"
        v-model="dateRange" />
      <span class="caozuoxitong">指标选择：</span>
      <a-select default-value="cost" style="width: 150px" @change="indexSelect">
        <a-select-option value="cost">消耗</a-select-option>
        <a-select-option value="click">点击数</a-select-option>
        <a-select-option value="showNum">展示数</a-select-option>
        <a-select-option value="convertRate">转化率</a-select-option>
        <a-select-option value="play3s">3s播放数</a-select-option>
        <a-select-option value="play10s">10s播放数</a-select-option>
        <a-select-option value="active">行为数</a-select-option>
        <a-select-option value="pay">支付数</a-select-option>
        <a-select-option value="residue">次留数</a-select-option>
        <a-select-option value="register">注册数</a-select-option>
      </a-select>
      <span class="caozuoxitong">排序规则：</span>
      <a-radio-group name="radioGroup" default-value="desc" @change="radioChange">
        <a-radio key="asc" value="asc">升序</a-radio>
        <a-radio key="desc" value="desc">降序</a-radio>
      </a-radio-group>
      <div class="btn">
        <a-button type='primary' @click="getData">查询</a-button>
        <a-button type='primary' @click="exportExcel" style="margin-left:20px">导出报表</a-button>

      </div>
    </div>
    <div class="tableBody">
      <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false' :loading='loading'>
      <div slot="videoU" slot-scope="test,records">
        <img :src="records.coverUrl" alt="" style="width:140px"
          @click="openVideo(records.url)">
      </div>
      <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
        <span slot="operation" slot-scope="text,record">
            <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a>
        </span>
    </a-table>
    <div class="fenye" :v-show="pageShow">
      <a-pagination showQuickJumper :default-current="pageNo" :total="total" size="small" style="float:right"
        @change="getDataSource" v-if="dataSource.length > 0" />
      <!-- <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
        showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
        @change="getDataSource" /> -->
    </div>
    </div>
    
    <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width='50%'>
      <video @click.stop class="video" :src="videoUrl" controls="controls" style="height:600px;width:100%">您的浏览器不支持
        video 标签。</video>
    </a-modal>
   
    <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
      <p>编导：{{relevantPeopleData.planName || '暂无数据'}}</p>
      <p>剪辑：{{relevantPeopleData.clipName || '暂无数据'}}</p>
      <p>拍摄：{{relevantPeopleData.shotName || '暂无数据'}}</p>
    </a-modal>
  
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    getAction,
    
    postAction,
    downFile,
    downFilePost
  } from '@/api/manage'
  let columns = [
    {
      title: '视频',
      dataIndex: 'videoU',
      align: 'center',
      width: 150,
      fixed: 'left',
      key: 'videoU',
      scopedSlots: {
        customRender: 'videoU'
      }
    },
    {
      title: '素材名',
      dataIndex: 'name',
      key: 'name',
      scopedSlots: {
        customRender: 'name'
      },
      align: 'center',
    },
    {
      title: '消耗',
      dataIndex: 'cost',
      key: 'cost',
      scopedSlots: {
        customRender: 'cost'
      },
      align: 'center',
    },
    {
      title: '点击数',
      dataIndex: 'click',
      key: 'click',
      scopedSlots: {
        customRender: 'click'
      },
      align: 'center',
    },
    {
      title: '展示数',
      dataIndex: 'showNum',
      key: 'showNum',
      scopedSlots: {
        customRender: 'showNum'
      },
      align: 'center',
    },
    {
      title: '3s播放数',
      dataIndex: 'play3s',
      key: 'play3s',
      scopedSlots: {
        customRender: 'play3s'
      },
      align: 'center',
    },
    {
      title: '10s播放数',
      dataIndex: 'play10s',
      key: 'play10s',
      scopedSlots: {
        customRender: 'play10s'
      },
      align: 'center',
    },
    {
      title: '行为数',
      dataIndex: 'active',
      key: 'active',
      scopedSlots: {
        customRender: 'active'
      },
      align: 'center',
    },
    {
      title: '支付数',
      dataIndex: 'pay',
      key: 'pay',
      scopedSlots: {
        customRender: 'pay'
      },
      align: 'center',
    },
    {
      title: '次留数',
      dataIndex: 'residue',
      key: 'residue',
      scopedSlots: {
        customRender: 'residue'
      },
      align: 'center',
    },
    {
      title: '注册数',
      dataIndex: 'register',
      key: 'register',
      scopedSlots: {
        customRender: 'register'
      },
      align: 'center',
    },
    {
      title:'相关人员',
      dataIndex:'operation',
      key:'operation',
      scopedSlots: { customRender: 'operation' },
      align: 'center',         
    }
  ]
  export default {
    data() {
      return {
        columns,
        relevantPeopleVisible:false,
        relevantPeopleData:{},
        dataSource: [],
        ipagination: {
          current: 1,
          pageSize: 4,
          //   pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          //   showSizeChanger: true,
          total: 0,
          onChange: current => {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
          }
        },
        pageNo: 1,
        pageSize: 10,
        target: 'cost',
        order: 'desc',
        dateStr: [],
        dateRange: [],
        optionArr: [],

        total: 0,
        pageShow: false,


            loading:false,
            //是否打开视频
            Videovisible:false,
            videoUrl:'',
        }
    },
    methods: {
      moment,
        //导出报表
        exportExcel() {
           
            var name =`${this.dateStr[0]}~${this.dateStr[1]}素材排行榜`;
            
          downFilePost(`/ctop/material/top//excel?target=${this.target}&order=${this.order}`, {
            startDate: this.dateStr[0],
            endDate: this.dateStr[1],

          }).then(res => {
                // console.log(res)
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                // console.log(blob)
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = name+'.xlsx'    //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },

      // 查看相关人员
      showRelevantPeople(record){
        this.relevantPeopleVisible=true;
        console.log(record)
        getAction('/ctop/materialAscription/getDetail',{
          code:record.code
        }).then(res=>{
          console.log(res);
          this.relevantPeopleData=[];
          if(res.result&&res.success){
            this.relevantPeopleData=res.result
          }
        })
      },
      getDataSource(page, pageSize) {

        this.pageNo = page
        this.HttpPost()

      },
      openVideo(val) {
        this.Videovisible = true;
        this.videoUrl = val
      },
      videoOk() {
        this.Videovisible = false
      },
      disabledDate(current) {
        // console.log(current)
        return current && current > moment().subtract(1, 'day')
      },
      radioChange(e) {

        this.order = e.target.value
      },
      indexSelect(key) {
        console.log(key)
        this.target = key
      },
      //日期改变事件
      dateChange(data, dataString) {
        this.dateStr = dataString
      },
      //确定按钮的事件
      getData() {
        this.HttpPost()
      },


      //请求事件
      HttpPost() {
        this.loading = true;
        this.dataSource = [];
        this.pageShow = false
        postAction(
          `/ctop/material/top/cost?pageSize=${this.pageSize}&pageNo=${this.pageNo}&target=${this.target}&order=${this.order}`, {
            startDate: this.dateStr[0],
            endDate: this.dateStr[1],

          }).then(res => {
          this.loading = false;

          console.log(res)
          if (res.success) {


            if (res.result.records.length > 0) {
              this.pageShow = true
            }
            res.result.records.map((item, index) => {
              item.key = index

            })
            this.total = res.result.total
            this.dataSource = res.result.records;

          }
        })
      }
    },
    mounted() {
      this.dateStr = [moment().subtract(1, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format(
        'YYYY-MM-DD')]
      this.dateRange = [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
      this.HttpPost();

    },
    filters: {
      toPercentage(val) {
        return (val * 100).toFixed(2) + '%'
        // return val
      },
      tofixed(val) {
        return Number(val).toFixed(2)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .materialRank {
    width: 100%;
    height: 100%;
    
    // padding: 10px 15px;
  }

  .optionLine {
    padding: 30px 5px;
    position: relative;
    margin-top: 20px;
    background: #fff;
    margin-bottom: 15px;
    // border: 1px solid #ccc;

    span {
      display: inline-block;
      padding: 0 3px;
    }

    .timedate,
    .caozuoxitong {
      margin-left: 30px;
      ;
    }

    .btn {
      position: absolute;
      right: 10px;
      top: 30px;
    }
  }
  .tableBody{
    background: #fff;
    padding: 20px 15px;
  }
  .fenye {
    margin: 30px 15px 10px;
    overflow: hidden;
  }
</style>