<template>
  <div class="vsummary">
    <div class="xiangmuxuanze" >
        <span >项目选择：</span>
        <Treeselect  :appId.sync="appId" request="2,4"   style="display: inline-block;position: relative;margin-left: 0px;"/>
    </div>
    <div class="timeDiv">
      <div style='display:flex;align-items: center;'>
        <span>时间范围：</span>
        <span  @click="opendate">
          <DatePicker :openOptions='openOptions'  :parentDate='dateValue' left='-100px'></DatePicker>
        </span> 
        <span style="margin-left:15px">设计负责人：</span> 
        <span  >
            <!-- <a-input placeholder="请输入剪辑的名字" v-model="clip" style="width:140px"  /> -->
            <a-select v-model="leaderId" style="width: 140px" allowClear  show-search :filter-option="filterOption">
              <a-select-option v-for="item in designList" :key="item.userId" :value='item.userId'>
                {{item.companyName +'_'+item.userName  }}
              </a-select-option>
            </a-select>
        </span>         
        <span style="margin-left:15px">剪辑：</span> 
        <span  >
            <!-- <a-input placeholder="请输入剪辑的名字" v-model="clip" style="width:140px"  /> -->
            <a-select v-model="clip" style="width: 140px" allowClear  show-search :filter-option="filterOption">
              <a-select-option v-for="item in designList" :key="item.userId" :value='item.userId'>
                {{item.companyName +'_'+item.userName  }}
              </a-select-option>
            </a-select>
        </span>         
        <span style="margin-left:15px">拍摄：</span> 
        <span  >
            <!-- <a-input placeholder="请输入拍摄的名字" v-model="shot" style="width:140px" /> -->
            <a-select v-model="shot" style="width: 140px" allowClear  show-search :filter-option="filterOption">
              <a-select-option v-for="item in designList" :key="item.userId" :value='item.userId'>
                {{item.companyName +'_'+item.userName  }}
              </a-select-option>
            </a-select>
        </span>         
        <span style="margin-left:15px">编导：</span> 
        <span  >
            <!-- <a-input placeholder="请输入编导的名字" v-model="plan" style="width:140px"  /> -->
            <a-select v-model="plan" style="width: 140px" allowClear  show-search :filter-option="filterOption">
              <a-select-option v-for="item in designList" :key="item.userId" :value='item.userId'>
                 {{item.companyName +'_'+item.userName  }}
              </a-select-option>
            </a-select>
        </span>         
      </div>
      <a-button type="primary" @click="searchRes" :loading='searchLoading'>查询</a-button>
    </div>

    <!-- <div style="margin:15px 0" class="btndiv">
      <a-button type="primary" @click="customColumns">自定义列</a-button>
      <a-button type="default" style="float:right" @click="exportExcel" id="mybtn" v-show="exportExcelIsOk">导出报表</a-button>
    </div> -->

    <!-- <a-modal v-model="visible" title="自定义列" on-ok="handleOk" width="65%">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
      </template>
      <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" />
      <div class="zhuti">
        <div class="addlist">
          <p>可添加的列</p>
          <div class="selectionList">
            <selectComponent
              :showCol="listNum"
              @getshowlist="getshowlist"
              :fixedCol="columnsFixd"
            />
          </div>
        </div>
        <div class="listNum">
          <p>已选{{listNum.length}}列</p>
          <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
          <ul class="selectlist">
            <li v-for="(item,index) in listNum" :key="index">
              <span v-if=" index <4">
                <a-icon type="lock" />
                <span class="listText">{{item.title}}</span>
              </span>
              <span v-else-if=" index >=4">
                <a-icon type="menu" style="color:#ccc" />
                <span class="listText">{{item.title}}</span>
                <a-icon
                  type="close"
                  @click="deleteCol(item,index)"
                  id="closeStyle"
                  style="fontSize:12px;"
                />
              </span>
            </li>
          </ul>
        </div>
      </div>
    </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>
    <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>



     <!-- 报表区域 -->
     <div class="tableBox">
          <div class="tableTop">
              
               <a-button type="primary" @click="customColumns">自定义列</a-button>
                <a-button type="default" style="float:right" @click="exportExcel('exportTable')" id="mybtn" :loading='exportLoading'>导出报表</a-button>
             
          </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="ipagination"
                :scroll="{ x: scrollX }"
                :loading="loading"
                ref="accountTable"
                :width="tableWidth"
                @change="sort"                
                style="word-break: break-all;font-size:16px;font-weight:600"
                 @customHeaderCell="customHeaderCell(columns)"
              >
             
                <div slot="coverUrl" slot-scope="test,records">
                  <!-- {{test}} -->
                    <img
                    :src="test"
                    alt
                    style="width:80px"
                    @click="openVideo(records.url)"
                   
                    />
                </div>
                <span slot="operation" slot-scope="text, record">
                  <a href="javascript:;" @click="opendetail(text, record)" style="margin-right:5px">查看明细</a>
                </span>


                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
                <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
                <span
                  slot="play25FeedBreakRate"
                  slot-scope="play25FeedBreakRate"
                >{{ play25FeedBreakRate | toPercentage }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
                
                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="installFinishRate"
                  slot-scope="installFinishRate"
                >{{ installFinishRate | toPercentage }}</span>
                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
                <span
                  slot="gameAddictionCost"
                  slot-scope="gameAddictionCost"
                >{{ gameAddictionCost | decimalsHandle }}</span>
                <span
                  slot="downloadFinishCost"
                  slot-scope="downloadFinishCost"
                >{{ downloadFinishCost | decimalsHandle }}</span>
                <span
                  slot="downloadStartCost"
                  slot-scope="downloadStartCost"
                >{{ downloadStartCost | decimalsHandle }}</span>
                <span
                  slot="installFinishCost"
                  slot-scope="installFinishCost"
                >{{ installFinishCost | decimalsHandle }}</span>
                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
                <span
                  slot="activeRegisterCost"
                  slot-scope="activeRegisterCost"
                >{{ activeRegisterCost | decimalsHandle }}</span>
                

               
                <span
                  slot="downloadStartRate"
                  slot-scope="downloadStartRate"
                >{{ downloadStartRate | toPercentage }}</span>
                <!-- <span
                  slot="downloadFinishRate"
                  slot-scope="downloadFinishRate"
                >{{ downloadFinishRate | toPercentage }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="activeRegisterRate"
                  slot-scope="activeRegisterRate"
                >{{ activeRegisterRate | toPercentage }}</span> -->
                <span
                  slot="gameAddictionRate"
                  slot-scope="gameAddictionRate"
                >{{ gameAddictionRate | toPercentage }}</span>
                <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
                <span slot="relativePeople" slot-scope="text,record">
                    <!-- <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a> -->
                    <p>负责人：{{record.designLeader || '无'}}</p>
                    <p>剪辑：{{record.clip || '无'}}</p>
                    <p>拍摄：{{record.shot || '无'}}</p>
                    <p>编导：{{record.plan || '无'}}</p>
                </span>

                
            </a-table>



        </div>
      <customColumn :visible='visible'  :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='2'  @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />

      <!-- 明细表 -->

      <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null" >
        <a-button type="default" @click="exportExcel('exportDetail')" id="mybtn" >导出报表</a-button>
        <a-table
          :columns="detailColumn"
          :data-source="detailData"
          bordered
          tableLayout="auto"
          :pagination="false"
          :loading='detailLoading'
          style="word-break: break-all;"
        >
          <!-- <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span> -->

           <span slot="advertiserName" slot-scope="text">{{ text || '暂未填写该数据' }}</span>
          <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
        </a-table>
      </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import selectComponent from './selectComponent'
import Treeselect from '../components/Treeselect'
import DatePicker from '@/components/DatePicker'
import customColumn from '../components/customColumn.vue'
const columnsFixd = [
  {
    title: '视频',
    dataIndex: 'coverUrl',
    align: 'center',
    width: 100,
    fixed: 'left',
    key: 'coverUrl',
    scopedSlots: { customRender: 'coverUrl' }
  },
  {
    title: '视频名称',
    dataIndex: 'materialName',
    align: 'center',
    width: 130,
    fixed: 'left'
  },
   {
    title: '视频ID',
    dataIndex: 'signature',
    align: 'center',
    width: 150,
    fixed: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 150,
    fixed: 'left'
  },
  {
    title: '渠道',
    dataIndex: 'channel',
    align: 'center',
    width: 150,
    fixed: 'left'
  },
    {
    title:'相关人员',
    dataIndex:'relativePeople',
    key:'relativePeople',
    scopedSlots: { customRender: 'relativePeople' },
    align: 'center',
    width:150,
    fixed: 'left'
  },
  // {
  //   title:'操作',
  //   dataIndex:'operation',
  //   key:'operation',
  //   scopedSlots: { customRender: 'operation' },
  //   align: 'center',
  //   width:90,
  //   fixed: 'left'
  // },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' },
    align: 'center',
    sorter: () => {}
  },
 
]
let show = 0

const initVariableColimns=[
   {
        title: '消耗(元)',
        dataIndex: 'cost',
        
        tip: '广告在投放期间的花费总额',
        align: 'center',
        scopedSlots: { customRender: 'cost' },
        sorter: () => {}
    },
      // {
      //     title: '折后消耗(元)',
      //     dataIndex: 'discountCost',
      //     width:150,
      //     tip: '广告在投放期间的花费总额',
      //     align: 'center',
      //     scopedSlots: { customRender: 'discountCost' },
      //     sorter: () => {}
      // },
    {
        title: '封面曝光数',
        dataIndex: 'photoShow',
        tip: '广告在瀑布流被观看次数',
        align: 'center',       
        scopedSlots: { customRender: 'photoShow' },
        sorter:() => {}
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
        align: 'center',
    
        scopedSlots: { customRender: 'photoClick' },
        sorter: () => {}
    },
    {
        title: '封面点击率',
        dataIndex: 'clickRate',
        tip: '封面点击数占封面展示数百分比',
        align: 'center',    
        scopedSlots: { customRender: 'clickRate' },
        sorter:() => {}
    },
    {
        title: '素材曝光数',
        dataIndex: 'aClick',
        tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
        align: 'center',
    
        scopedSlots: { customRender: 'aClick' },
        sorter:() => {}
    },
    {
        title: '行为数',
        dataIndex: 'bClick',
        tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
        align: 'center',
    
        scopedSlots: { customRender: 'bClick' },
        sorter:() => {}
    },
    
    {
        title: '行为率',
        dataIndex: 'bClickRate',
        tip: '行为数占素材曝光数百分比',
        align: 'center',    
        scopedSlots: { customRender: 'bClickRate' },
        sorter:() => {}
    },
    {
        title: '平均千次封面曝光花费（元）',
        dataIndex: 'cpm',
        tip: '花费/封面曝光数*1000',
        align: 'center',    
        scopedSlots: { customRender: 'cpm' },
        sorter:() => {}
    },
    {
        title: '平均封面点击单价（元）',
        dataIndex: 'cpc',
        tip: '花费／封面点击数',
        align: 'center',    
        scopedSlots: { customRender: 'cpc' },
        sorter:() => {}
    },
    {
        title: '平均行为单价（元）',
        dataIndex: 'cpb',
        tip: '总花费/行为数',
        align: 'center',    
        scopedSlots: { customRender: 'cpb' },
        sorter:() => {}
    },
    {
        title: '3s播放数',
        dataIndex: 'play3sCount',
        tip: '总花费/行为数',
        align: 'center',    
        scopedSlots: { customRender: 'play3sCount' },
        sorter:() => {}
    },
    {
        title: '3s播放率',
        dataIndex: 'play3sRate',
        tip: '总花费/行为数',
        align: 'center',    
        scopedSlots: { customRender: 'play3sRate' },
        sorter:() => {}
    },
]

let detailColumn=[
   {
    title: '客户',
    dataIndex: 'advertiserName',
    align: 'center',
     scopedSlots: { customRender: 'advertiserName' },
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 150,
  },
   {
    title: '时间',
    dataIndex: 'statDate',
    align: 'center',
    width: 120
  },
  {
    title: '消耗',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center',
    
  },
]

export default {
  data() {
    return {
      searchLoading:false,

      designList:[],
       detailLoading:false,
      clip:undefined,
      shot:undefined,
      plan:undefined,
      leaderId:undefined,
      //明细数据
      visibleDetail:false,
      detailColumn,
      detailData: [],

      exportLoading:false,
       target:'cost',
        order:'desc',
        type:0,
        dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')],
        openOptions:false,
        relevantPeopleVisible:false,
      relevantPeopleData:{},
      roleCode: localStorage.getItem('roleCode'),
       //下拉选择框的数据
      projectArr:[],
      selectValue:'',
      appId:[],
      //设置表格的列宽
      tableWidth: '',

      //gudinglie
      columnsFixd: columnsFixd,

      //是否打开视频
      Videovisible: false,
      videoUrl: '',

      //是否显示导出按钮
      exportExcelIsOk: true,
      consumeValue: 0,

      columns:[...columnsFixd,...initVariableColimns] ,//table的表头
      addColumns: [],
      data: [],
      totalSelect: 0,
      daysFlag: false,
      dateRange: [],
      dataElse: [],
      loading: false,
      visible: false,
      //自定义列的搜索框
      searchInput: '',
      //弹出框中现实的选中列数
      scrollX: 0,
      listNum: [],
      //
      form: [],
      videoID: '',
      timedata: [],
      ipagination: {
          current: 1,
          pageSize: 10,
          
          showTotal: (total, range) => {
              return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger:true,
          pageSizeOptions: ['10', '30', '50'],
          total: 0,
          onChange: (current, pageSize) => {
              // 切换分页时的回调，
              // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
              this.ipagination.current = current;
              this.ipagination.pageSize= pageSize;
          }
      },
    }
  },
  mixins: [JeecgListMixin],
  components: {
    selectComponent,
    Treeselect,
    DatePicker,
    customColumn,
  },
  watch:{
      
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    //点击查看明细按钮的事件
    opendetail(text, record) {
      console.log(text, record)
      this.visibleDetail = true
      this.detailData = []
      this.detailLoading=true;
      this.signature=record.signature
      // console.log(this.signature)
      postAction('/ctop/kuaishou/videoReport/detail', {
        startDate: this.dateValue[0].format('YYYY-MM-DD'),
        endDate: this.dateValue[1].format('YYYY-MM-DD'),
        signature: record.signature,
        accountIds:this.appId
      }).then(res => {
        console.log(res)
        this.detailLoading=false;
        if (res.success) {
          let result = res.result
          // this.detailData.push({ ...result, key: 1 })
          result.map((item, index) => {
            item.key = index
          })
          this.detailData = result
        }
      })
    },
    closeCustomColumn(){
      this.visible=false;
    },
      //自定义之后修改父元素表头
    changeColumn(val){
      console.log(val)
        this.columns=[...val];
        if(this.columns.length> this.columnsFixd.length&&this.columns.length<9){
          this.scrollX=0;
          this.columns.forEach((element,index) => {
            if(index<this.columnsFixd.length){
              element.width='auto'
              element.fixed=false
            }             
          });

          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
        }else if(this.columns.length>=9){
          this.columns.forEach((element,index) => {
            if(index<this.columnsFixd.length-1){
              element.width=120
              element.fixed='left'
            }             
          });

           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
        } else{
          this.scrollX=0;
          this.columns.forEach(element => {
              element.width='auto'
              element.fixed=false
          });
        }
    },
    // 日期的开关
      //打开日期框
    opendate(){
        this.openOptions=!this.openOptions;
        //  console.log(this.openOptions)
    },
    opendateClose(){
          this.openOptions=false;
          //  console.log(this.openOptions)
    },

    // 查看相关人员
    showRelevantPeople(record){
      this.relevantPeopleVisible=true;
      console.log(record)
      getAction('/ctop/materialAscription/getDetail',{
        code:record.signature
      }).then(res=>{
        console.log(res);
        this.relevantPeopleData=[];
        if(res.result&&res.success){
          this.relevantPeopleData=res.result
        }
        
      })
    },
      sort(pagination, filters, sorter, { currentDataSource }){
          console.log(pagination, filters, sorter)
          this.ipagination.current=pagination.current;
          this.ipagination.pageSize=pagination.pageSize
          if(sorter.order == 'ascend'){            
              this.order='asc'
              this.target=sorter.columnKey;
          }else if(sorter.order == 'descend'){
              this.order='desc'    
              this.target=sorter.columnKey;
          }else{            
                this.target='cost',
                this.order='desc'           
          }          
          this.HttpPost();
    },
    moment,
    //select切换---项目
    selectChange(key){
        this.selectValue=key;
    },
    //打开视频
    openVideo(val) {
      this.Videovisible = true
      this.videoUrl = val
    },
    videoOk() {
      this.Videovisible = false
    },

    disabledDate(current) {
      // console.log(current)
      return current && current > moment().subtract(1, 'day')
    },

    consumeOnChange() {},
    //查询按钮
    searchRes() {
      this.date = []
      this.ipagination.current=1

      this.HttpPost()
      
    },
    //网络请求table数据函数
    HttpPost(){
      this.loading=true;
      this.searchLoading=true
      show = 0
      postAction('/ctop/kuaishou/videoReport/list', {
        startDate: this.dateValue[0].format('YYYY-MM-DD'),
        endDate: this.dateValue[1].format('YYYY-MM-DD'),
        pageNo:this.ipagination.current,
        pageSize:this.ipagination.pageSize,
        accountIds:this.appId,
        target:this.target,
        order:this.order,
        clipId:this.clip?this.clip:'',
        shotId:this.shot?this.shot:'',
        planId:this.plan?this.plan:'',
        leaderId:this.leaderId?this.leaderId:''
      }).then(res => {
        let resArr = []
        this.data=[];
        this.loading = false;
        this.searchLoading=false;
        if (res.success) {
          // let result = res.result
          // this.data.push({ ...result, key: 1 })
          // result.map((item, index) => {
          //   item.key = index
          // })
          this.data = res.result.list.map((item,index)=>{
              return {
                  ...item,
                  key:index
              }
          })
          this.ipagination.total = res.result.total
          this.loading = false
          
        }else{
            this.loading = false
        }
      })
    },
    //导出报表
    exportExcel(exportType) {
      this.exportLoading=true;
      let columns=[]
      if(exportType=='exportTable'){
        let column = this.columns.map((item, index) => {
          return item.dataIndex
        })      
        columns=column.splice(this.columnsFixd.length)
      }
      downFilePost('/ctop/kuaishou/videoReport/excelV2', {
        columns,
        target:this.target,
        order:this.order,
        startDate: this.dateValue[0].format('YYYY-MM-DD'),
        endDate: this.dateValue[1].format('YYYY-MM-DD'),
        accountIds:this.appId,
        exportType,
        signature: this.signature,
        clipId:this.clip?this.clip:'',
        shotId:this.shot?this.shot:'',
        planId:this.plan?this.plan:'',
        leaderId:this.leaderId?this.leaderId:''
      }).then(res => {
        this.exportLoading=false;
        let blob = new Blob([res], {
          type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        downloadElement.download = `${this.dateValue[0].format('YYYY-MM-DD')}~${this.dateValue[1].format('YYYY-MM-DD')}视频汇总.xlsx`   //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
      })
    },

    //日期选择回调
    dateChange(data, dataString) {
      if (data.length) {
        this.timedata = dataString
        this.dateRange[0] = data[0]
        this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
        this.daysFlag = true
        if (this.totalSelect > 92) {
          this.$message.error('时间跨度太长啦，选小一点好嘛？')
          this.daysFlag = false
          this.dateRange = []
        }
      } else {
        this.daysFlag = false
        this.dateRange = []
      }
    },

    //弹出框打开，自定义列
    customColumns() {
      this.visible = true
      this.listNum = [...this.columns]
    },
    

    tableHandle() {
      // this.listNum = [...this.columns]
      //   console.log(this.listNum.length, this.columns)

        // if (this.listNum.length >= 9 || this.columns.length >= 9) {
        //   this.tableWidth = 160
        //   this.scrollX = this.columns.length * 160
        //   // console.log(this.scrollX)
        // } else {
        //   this.scrollX = 2000
        // }
    },

    //弹出框确定
    handleOk(e) {
      this.loading = false

      this.visible = false

      if (this.listNum.length >= 10) {
        let newlist = this.listNum.slice(columnsFixd.length)
        console.log(newlist)
        this.columns = [...columnsFixd, ...newlist]
      } else {
        this.columns = [...this.listNum]
      }

      if (this.listNum.length == 4) {
        // console.log(this.listNum.length)
        this.scrollX = 0
        this.columns.map((item, index) => {
          item.width = 500
        })
        // console.log(1)
      } else {
        this.columns.map((item, index) => {
          if (index == 2 || index == 0) {
            item.width = 150
          } else if (index == 1 || index == 2) {
            item.width = 100
          }
        })
        // console.log(2)
      }

      this.tableHandle()
    },
    //弹出框取消按钮
    handleCancel(e) {
      this.visible = false
    },
    loadShow(){
        show++
        if(this.data.length>0){
            if(show == (this.data.length*2)){
                this.data = [...this.data]
            }
        }
    },
    

    // 获取设计人员
    getDesignList(){
      postAction('/ctop/kuaishou/videoReport/getDesignList').then(res=>{
        console.log(res);
        if(res.success){
            this.designList=res.result
        }
      })
    }
    
   },
  
  activated() {
    console.log('activated')
    // this.getParticipateList()
    this.statDate = moment().subtract(1, 'day')

    moment().format('YYYY-MM-DD_HH:mm')

    postAction('/toutiao/videoReportDaily/getColumnJson', {
      columnType: 4
    }).then(res => {
      // console.log(res)
      if (res.success) {
        // console.log(JSON.parse(res.result))
        if(res.result){
            let columns = JSON.parse(res.result)
            if (columns.length) {
            if (columns.length >= columnsFixd.length) {
                columns.map((item, index) => {
                if (index > columnsFixd.length - 1) {
                    item.sorter = function(a, b) {
                      
                    }
                }
                })
                columns = columns.slice(columnsFixd.length)
                this.columns = [...columnsFixd, ...columns]
                
                // this.tableHandle()
            }

            // console.log(this.columns)
            }
        }
        this.changeColumn(this.columns)
        
      }
    })
    
  },
  // deactivated() {
  //   let arr = JSON.stringify(this.columns)
  //   console.log(arr)
  //   postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  //     json: arr,
  //     columnType: 4
  //   }).then(res => {
  //     // console.log(res)
  //   })
  // },
  beforeDestroy() {
    let arr = JSON.stringify(this.columns)
    console.log(arr)
    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
      json: arr,
      columnType: 4
    }).then(res => {
      // console.log(res)
    })
  },
filters: {
    
    toshowTime(val) {
      // console.log(val, this.timedata)
      // return this.timedata[0] + '~' + this.timedata[1]
      return val
    },
    toPercentage(val) {
      if(val){
          if(typeof val != 'string'){
            return (val * 100).toFixed(2) + '%'
          }else{
            return val
          }
      }else if(typeof val =='string'){
            return val
        }
      else{
        return 0
      }    
    },
    //保留两位小数并且变成货币格式
      decimalsHandle(val){
          // console.log(val)
          if(val && typeof val !='string'){
              if(val>=0){
                  val=parseFloat(val).toFixed(2);
                  let numberStr = val.toString()
                  let str = numberStr.split('.')
                  
                  let str0=str[0].split('').reverse();
                  for (let i = 0; i < str0.length; i++) {
                      if ((i + 1) % 4 === 0) {
                          str0.splice(i, 0, ',')
                      }
                  }
                  str0.reverse()
                  let handleResult = ''
                  for (let j = 0; j < str0.length; j++) {
                      handleResult += str0[j]
                  }
                  
                  return handleResult+'.'+str[1]
              }else{
                  val=parseFloat(val).toFixed(2);
                  let numberStr = val.toString()
                  let str = numberStr.split('.')
                  
                  let str0=str[0].substr(1).split('').reverse();
                  for (let i = 0; i < str0.length; i++) {
                      if ((i + 1) % 4 === 0) {
                          str0.splice(i, 0, ',')
                      }
                  }
                  str0.reverse()
                  let handleResult = ''
                  for (let j = 0; j < str0.length; j++) {
                      handleResult += str0[j]
                  }
                  
                  return '-'+handleResult+'.'+str[1]
              }
              
          }else if(typeof val =='string'){
              return val
          }
          else{
              return 0
          }           
      },
      //变成货币格式
      formatCurrency(val){
        if((val||val==0)&& typeof val !='string'){
            let numberStr = val.toString()
          let str = numberStr.split('').reverse()
          for (let i = 0; i < str.length; i++) {
              if ((i + 1) % 4 === 0) {
              str.splice(i, 0, ',')
              }
          }
          str.reverse()
          let handleResult = ''
          for (let j = 0; j < str.length; j++) {
              handleResult += str[j]
          }
          return handleResult
        }else if(typeof val =='string'){
              return val
        }
        else{
          return '-'
        }
          
      }


      
  },

  mounted() {
      this.getDesignList()
    //请求自定义列的数据
    postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
      console.log(res)
      if (res.success) {
        if (res.result) {
          this.exportExcelIsOk = true
        } else {
          this.exportExcelIsOk = false
        }
      }
    })

    //进入页面默认展示昨天到今天的数据
    this.dateRange=[moment().subtract(7,'days'),moment()]
    this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
    // this.loading=true;
   
    this.HttpPost()
    postAction('/toutiao/videoReportDaily/getColumnJson', {
      columnType: 4
    }).then(res => {
      // console.log(res)
      if (res.success) {
        // console.log(JSON.parse(res.result))
        if(res.result){
            let columns = JSON.parse(res.result)
            if (columns.length) {
            if (columns.length >= columnsFixd.length) {
                columns.map((item, index) => {
                if (index > columnsFixd.length - 1) {
                    item.sorter = function(a, b) {
                      
                    }
                }
                })
                columns = columns.slice(columnsFixd.length)
                this.columns = [...columnsFixd, ...columns]
                
                // this.tableHandle()
            }

            // console.log(this.columns)
            }
        }
        this.changeColumn(this.columns)
        
      }
    })
  }
}
</script>
<style lang="less">
// .ant-table .ant-table-fixed-left .ant-table-thead {
//   height: 108px !important ;
// }
.vsummary{
  .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
    // display:block;
    white-space: normal;
    word-break: break-all;
  }
}

</style>

<style lang="scss" scoped>
.vsummary {
  width: 100%;
  height: 100%;
  background: white;
  padding: 15px 30px;
  .tableBox{
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 0px;
    .tableTop{
      position: relative;
      padding-bottom: 15px;
      border-bottom: 1px solid #e0e0e0;
      .selectTime{
        margin-right: 20px;
      }
      .add{
          position: absolute;
          top: 0;
          right: 0;
      }
    }
  }
}
.xiangmuxuanze{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.timeDiv {
  display: flex;
  justify-content: space-between;
}
span {
  margin-left: 5px;
}
.myinput {
  width: 40%;
}

.addlist {
  float: left;
  width: 70%;
  border: 1px solid #eee;
  .selectionList {
    padding: 10px 15px;
    height: 450px;
    overflow: auto;
    .leibie {
      .leiName {
        font-size: 26px;
        text-align: left;
      }
    }
    .jutixiang {
      display: inline-block;
      width: 32%;
      box-sizing: border-box;
      padding: 10px 3px;
    }
  }
}
.listNum {
  float: right;
  width: 28%;
  border: 1px solid #eee;
  position: relative;
}
.zhuti {
  margin-top: 15px;
  overflow: hidden;

  p {
    height: 40px;
    line-height: 20px;
    padding: 10px 15px;

    background: rgb(249, 250, 253);
    border-bottom: 1px solid #eee;
  }
  #btn {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .selectlist {
    width: 100%;
    list-style: none;
    margin: 0;
    height: 450px;
    padding: 0 15px 10px;
    overflow: auto;

    li {
      width: 100%;
      padding: 5px 8px;
      margin: 6px 0;
      border-radius: 10px;
      background: rgb(248, 248, 248);
      height: 32px;
      position: relative;
      span {
        width: 80%;
        height: 100%;
        display: inline-block;
        margin: 0 10px;
        // overflow:hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
      }
      .listText {
        position: absolute;
        top: 2;
        left: 10;
        width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      #closeStyle {
        position: absolute;
        top: 9px;
        right: 7px;
      }
    }
  }
  
}
#mybtn {
  margin: 0 10px 15px 0;
}
</style>