<template>
  <div class="imageCostReport">
      <div class="tabspane">
        <a-tabs v-model="tabKeys" @change="tabChange">
            <a-tab-pane :key="1" tab="头条">           
            </a-tab-pane>
            <a-tab-pane :key="2" tab="快手" >               
            </a-tab-pane>
        </a-tabs>
      </div>
    <div class="xiangmuxuanze" style="display:flex;margin-top:20px" >
      <span>项目选择：</span>
       
        <!-- <a-tree-select
            v-model="accountIds"
            show-search
            style="width: 600px;height:30px"
            :dropdownMatchSelectWidth='true'
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"              
            tree-checkable
            searchPlaceholder='请输入账户关键字搜索'
            :show-checked-strategy="SHOW_PARENT"
            placeholder="请选择项目和账户或搜索账户关键字"
            treeNodeFilterProp="title"
            :allowClear="true"
            @change="treeChange"                               
            :maxTagCount='1'    
            :tree-data="treeData"
            :filterOption='filterOption'
        >
        
        </a-tree-select> -->
        <Treeselect v-if="forceUpdate" :appId.sync="accountIds" :request.sync="medioId" ref="treeSelect" style="width: 600px;height:30px;position: relative;top: -10px;"/>
        
    </div>
    <div class="timeDiv">
      <div style="margin-right:30px;display:flex;align-items: center;">
        <span>时间范围：</span>

        <!-- <a-range-picker
          :disabled-date="disabledDate"
          format="YYYY-MM-DD"
          style="width: 250px;"
          @change="dateChange"
          v-model="dateRange"
        /> -->
        <span  @click="opendate">
          <DatePicker :openOptions='openOptions'  :parentDate='dateValue' left='-100px'></DatePicker>
        </span> 
      </div>
      <div>
        <span>图片ID：</span>
        <a-input class="myinput" v-model="videoID" style="width:250px" :allowClear='true' />
      </div>

      <a-button type="primary" style="position:absolute;right:0" @click="searchRes">查询</a-button>
    </div>

    <div style="display:flex;margin:15px 0" class="btndiv">
      <a-button type="primary" @click="exportExcel" id="mybtn" :loading="exportExcelIsOk">导出报表</a-button>
    </div>

   
    <div class="tableBody">

        <a-table
        size="middle"
        :columns="columns"
        :dataSource="data"
        bordered
        id="outTable"
        :pagination="ipagination"
        :scroll="{ x: scrollX }"
        :loading="loading"
        @change="sort"
        style="word-break: break-all;"
        >
        <div slot="imageUrl" slot-scope="text,records">
          <span v-if="text=='总计'">{{text}}</span>
            <img
            v-else
            :src="text"
            alt
            style="width:80px"
            @click="openVideo(records.imageUrl)"
            @load="loadShow"
            />
        </div>
        <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
        <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
        <span slot="convertCost" slot-scope="text">{{ text | decimalsHandle }}</span>
        <span slot="photoShowCost" slot-scope="text">{{ text | decimalsHandle }}</span>
        <span slot="aclickCost" slot-scope="text">{{ text | decimalsHandle }}</span>
  
        <span slot="activation" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="eventRegister" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="eventPay" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="formCount" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="eventJinJianApp" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="eventCreditGrantApp" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="photoClick" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="photoShow" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="click" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="showNum" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="convert" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="bclick" slot-scope="text">{{ text | formatCurrency }}</span>
        <span slot="aclick" slot-scope="text">{{ text | formatCurrency }}</span>

        <span slot="clickRate" slot-scope="text">{{ text +'%'}}</span>
        <span slot="convertRate" slot-scope="text">{{ text +'%'}}</span>
        <span slot="bclickRate" slot-scope="text">{{ text +'%'}}</span>
        <span slot="photoClickRate" slot-scope="text">{{ text +'%'}}</span>
        


        <span slot="operation" slot-scope="text">
         {{ text || '未绑定' }}
        </span>
        

        </a-table>
    
    </div>
    <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="800px" style="text-align:center">
      <img
        @click.stop
        class="video"
        :src="videoUrl"
        controls="controls"
        style="height:400px;width:auto"
      />
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
// import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'

// import { TreeSelect } from 'ant-design-vue';
// const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import DatePicker from '@/components/DatePicker'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
// import selectComponent from './selectComponent'
// import Treeselect from '../components/Treeselect'
const TTcolumns = [
  {
    title: '图片',
    dataIndex: 'imageUrl',
    align: 'center',
    width: 100,
    fixed: 'left',
    key: 'imageUrl',
    scopedSlots: { customRender: 'imageUrl' }
  },
  {
    title: '图片ID',
    dataIndex: 'signature',
    align: 'center',
    width: 180,
    fixed: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 200,
    fixed: 'left'
  },
  //   {
  //   title:'相关平面',
  //   dataIndex:'operation',
  //   key:'operation',
  //   scopedSlots: { customRender: 'operation' },
  //   align: 'center',
  //   width:150,
  //   fixed: 'left'
  // },
  
  {
    title: '消耗(元)',
    dataIndex: 'cost',

    scopedSlots: { customRender: 'cost' },
    align: 'center',
    sorter: () => {}
  },
  {
    title: '点击数',
    dataIndex: 'click',
    align: 'center',

    scopedSlots: { customRender: 'click' },
    sorter: () => {}
    // (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '点击率',
    dataIndex: 'clickRate',
    align: 'center',

    scopedSlots: { customRender: 'clickRate' },
    sorter: () => {}
    // (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '展示数',
    dataIndex: 'showNum',
    align: 'center',

    scopedSlots: { customRender: 'showNum' },
    sorter: () => {}
  },   
  {
    title: '转化数',
    dataIndex: 'convert',
    align: 'center',

    scopedSlots: { customRender: 'convert' },
    sorter: () => {}
  },
  {
    title: '转化成本',
    dataIndex: 'convertCost',
    align: 'center',

    scopedSlots: { customRender: 'convertCost' },
    sorter: () => {}
  },
  {
    title: '转化率',
    dataIndex: 'convertRate',
    align: 'center',

    scopedSlots: { customRender: 'convertRate' },
    sorter: () => {}
  },
  // {
  //   title: '上传时间',
  //   dataIndex: 'statDate',
  //   scopedSlots: { customRender: 'statDate' },
  //   align: 'center',
  //   sorter: () => {}
  // },
]
const KScolumns = [
  {
    title: '图片',
    dataIndex: 'imageUrl',
    align: 'center',
    width: 100,
    fixed: 'left',
    key: 'imageUrl',
    scopedSlots: { customRender: 'imageUrl' }
  },
  {
    title: '图片ID',
    dataIndex: 'signature',
    align: 'center',
    width: 150,
    fixed: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 200,
    fixed: 'left'
  },
  //   {
  //   title:'相关平面',
  //   dataIndex:'operation',
  //   key:'operation',
  //   scopedSlots: { customRender: 'operation' },
  //   align: 'center',
  //   width:150,
  //   fixed: 'left'
  // },
  
  {
    title: '消耗',
    dataIndex: 'cost',

    scopedSlots: { customRender: 'cost' },
    align: 'center',
    sorter: () => {}
  },
  {
    title: '封面点击数',
    dataIndex: 'photoClick',
    align: 'center',

    scopedSlots: { customRender: 'photoClick' },
    sorter: () => {}
    // (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '封面点击率',
    dataIndex: 'photoClickRate',
    align: 'center',

    scopedSlots: { customRender: 'photoClickRate' },
    sorter: () => {}
    // (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '封面曝光数',
    dataIndex: 'photoShow',
    align: 'center',

    scopedSlots: { customRender: 'photoShow' },
    sorter: () => {}
  }, 
  {
    title: '素材曝光数',
    dataIndex: 'aclick',
    align: 'center',

    scopedSlots: { customRender: 'aclick' },
    sorter: () => {}
  }, 
  {
    title: '行为数',
    dataIndex: 'bclick',
    align: 'center',

    scopedSlots: { customRender: 'bclick' },
    sorter: () => {}
  }, 
  {
    title: '行为率',
    dataIndex: 'bclickRate',
    align: 'center',

    scopedSlots: { customRender: 'bclickRate' },
    sorter: () => {}
  }, 
  {
    title: '平均千次封面曝光花费',
    dataIndex: 'photoShowCost',
    align: 'center',

    scopedSlots: { customRender: 'photoShowCost' },
    sorter: () => {}
  }, 
  {
    title: '平均千次素材曝光花费',
    dataIndex: 'aclickCost',
    align: 'center',

    scopedSlots: { customRender: 'aclickCost' },
    sorter: () => {}
  }, 
  {
    title: '激活数',
    dataIndex: 'activation',
    align: 'center',

    scopedSlots: { customRender: 'activation' },
    sorter: () => {}
  },
  {
    title: '注册数',
    dataIndex: 'eventRegister',
    align: 'center',

    scopedSlots: { customRender: 'eventRegister' },
    sorter: () => {}
  },
  {
    title: '付费数',
    dataIndex: 'eventPay',
    align: 'center',

    scopedSlots: { customRender: 'eventPay' },
    sorter: () => {}
  },
  {
    title: '表单提交数',
    dataIndex: 'formCount',
    align: 'center',

    scopedSlots: { customRender: 'formCount' },
    sorter: () => {}
  },
  {
    title: '完件数',
    dataIndex: 'eventJinJianApp',
    align: 'center',

    scopedSlots: { customRender: 'eventJinJianApp' },
    sorter: () => {}
  },
  {
    title: '授信数',
    dataIndex: 'eventCreditGrantApp',
    align: 'center',

    scopedSlots: { customRender: 'eventCreditGrantApp' },
    sorter: () => {}
  },
  // {
  //   title: '上传时间',
  //   dataIndex: 'materialUploadTime',
  //   scopedSlots: { customRender: 'materialUploadTime' },
  //   align: 'center',
  //   sorter: () => {}
  // },
]


let show = 0

export default {
  data() {
    return {
        medioId: '1,3',
        forceUpdate:true,
        type:0,
        dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')],
        openOptions:false,
        order:'desc',
        target:'cost',

        tabKeys:1,
        
        accountIds:[],
        treeData:[],
        // SHOW_PARENT,
        KSaccountList:[],
        TTaccountList:[],
        accountID:undefined,
        ipagination: {
            current: 1,
            pageSize: 11,
            //   pageSizeOptions: ['10', '20', '30'],
            showTotal: (total, range) => {
              console.log(total,range)
              if(range[0]>1){
                return (range[0]-this.ipagination.current+1) + "-" + (range[1]-this.ipagination.current) + " 共" + (total-Math.ceil(this.pageTotal/10)) + "条"
              }else{
                return range[0] + "-" + (range[1]-1) + " 共" + (total-Math.ceil(this.pageTotal/10)) + "条"
              }
                
            },
            showQuickJumper: true,
            // showSizeChanger:true,
            // pageSizeOptions: ['10', '30', '50'],
            total: 0,
            // onChange: (current, pageSize) => {
            //     // 切换分页时的回调，
            //     // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            //     this.ipagination.current = current;
            //     this.ipagination.pageSize= pageSize;
            // }
        },

        pageTotal:0,

        relevantPeopleVisible:false,
      relevantPeopleData:{},
      roleCode: localStorage.getItem('roleCode'),
       //下拉选择框的数据
      projectArr:[],
      selectValue:'',
      appId:[],
      //设置表格的列宽
      tableWidth: '',

      //gudinglie
  

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

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

      columns: [...TTcolumns],
      TTcolumns,
      KScolumns,
      data: [],
      totalSelect: 0,
      daysFlag: false,
      dateRange: [],
      dataElse: [],
      loading: false,
      visible: false,
      //自定义列的搜索框
      searchInput: '',
      //弹出框中现实的选中列数
      scrollX: 0,
      listNum: [],
      //
      form: [],
      videoID: '',
      timedata: [],
      bytedanceUrl:{
        cost:'/image/bytedance/cost',
        totalCost:'image/bytedance/costTotal'
      },
      kuaishouUrl:{
        cost:'/image/kuaishou/cost',
        totalCost:'image/kuaishou/costTotal',
      },

      totalCost:{},
    }
  },
  // mixins: [JeecgListMixin],
  components: {
    // selectComponent,
    Treeselect,
    DatePicker,
  },
    methods: {
        tabChange(val){
          this.accountIds=[];
          this.data=[]
          this.ipagination.current=1;
          this.totalCost={}
          this.forceUpdate = false
          if(this.tabKeys==1){
                
                this.treeData=this.TTaccountList;
                this.columns=this.TTcolumns;
                this.target='cost';
                this.scrollX=0;
                this.getTableData(this.bytedanceUrl)
                setTimeout(()=>{
                  this.forceUpdate = true
                  this.medioId = '1,3'
                  this.$refs.treeSelect.getParticipateList()
                },100)
               
            }else if (this.tabKeys==2){
              
                this.treeData=this.KSaccountList;
                this.columns=this.KScolumns
                this.target='cost'
                this.scrollX=2500
                this.getTableData(this.kuaishouUrl)
                 setTimeout(()=>{
                  this.forceUpdate = true
                  this.medioId = '2,4'
                  this.$refs.treeSelect.getParticipateList()
                },100)
            } 
        },
        treeChange(val) {
        // console.log(this.treeData)
            console.log(val)
            this.accountIds = [];
            
            if(val){
                val.forEach((ele,index)=>{
                if(ele*1){
                    this.accountIds.push(ele)
                }else{              
                    let projectArr=this.treeData.filter((item)=>{
                        return item.value==ele
                    });
                    // console.log(projectArr)
                    projectArr[0].children.forEach((element)=>{
                        this.accountIds.push(element.value)
                    })
                }


                })       
            }
            
            console.log(this.accountIds);
            

        
        },
        
        
        filterOption(input, option){
            console.log(input, option)
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
        },

        // 查看相关人员
        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)
          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=this.tabKeys==1?'cost':'cost',
                this.order='desc'           
          }   
            this.ipagination.current=pagination.current
            this.ipagination.pageSize= pagination.pageSize;
            
            if(this.tabKeys==1){               
                this.getTableData(this.bytedanceUrl)
            }else if (this.tabKeys==2){
                this.getTableData(this.kuaishouUrl)
            } 
        },
        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()
        },

        consumeOnChange() {},
        //查询按钮
        searchRes() {
            this.data=[];
            this.ipagination.current=1
            this.totalCost={};
            if(this.tabKeys==1){               
                this.getTableData(this.bytedanceUrl)
            }else if (this.tabKeys==2){
                this.getTableData(this.kuaishouUrl)
            } 
        },

        getTableData(type){
            this.loading=true
            // this.data=[];
            let HttpPost = new Promise((resolve, reject) => {
              postAction(type.cost, {
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),        
                code: this.videoID,
                pageNumber:this.ipagination.current,
                pageSize:this.ipagination.pageSize-1,
                accountList:this.accountIds,
                order:this.order,
                target:this.target,
              }).then(res => {
                  let resArr = []
                  
                  if (res.success) {
                    resArr = res.data.list.map((item,index)=>{
                        return {
                            ...item,
                            key:item.signature
                        }
                    })
                    this.pageTotal=res.data.total;
                    this.ipagination.total = res.data.total+Math.ceil(res.data.total/10)
                    
                    resolve(resArr)
                  }else{
                      
                      reject('失败')
                  }
              })
              
            })

            let totalCostHttp = new Promise((resolve, reject) => {
              if(this.totalCost.key){
                  resolve(this.totalCost)
              }else{
                postAction(type.totalCost, {
                  startDate: this.dateValue[0].format('YYYY-MM-DD'),
                  endDate: this.dateValue[1].format('YYYY-MM-DD'),        
                  code: this.videoID,
                  pageNumber:this.ipagination.current,
                  pageSize:this.ipagination.pageSize,
                  accountList:this.accountIds,
                }).then(res => {
                    console.log(res)
                    let resArr = []
                    
                    if (res.success) {
                      resArr = res.data;
                      resArr.imageUrl='总计';
                      resArr.projectName='-';
                      resArr.signature='-';
                      resArr.key='total';
                      this.totalCost=resArr;
                      resolve(resArr)
                    }else{
                        
                        reject('失败')
                    }
                })
              }
              
            })


            Promise.all([HttpPost, totalCostHttp]).then((result) => {
              console.log(result);             //['成功了', 'success']
              this.data=[];
              
              
              if(result[0].length){
                this.data=[
                  result[1],
                  ...result[0]
                ]
              }
              
              console.log(this.data,'---------------------------------------------')
              this.$forceUpdate()
              this.loading=false;
            }).catch((error) => {
              console.log(error)
            })
        },

        loadShow(){
            show++
            if(this.data.length>0){
                if(show == (this.data.length*2)){
                    this.data = [...this.data]
                }
            }
        },
        //网络请求table数据函数
        // HttpPost(url){
        //   this.loading=true;
        //   this.data=[]
        //   show = 0
        //   postAction(url, {
        //       startDate: this.dateValue[0].format('YYYY-MM-DD'),
        //       endDate: this.dateValue[1].format('YYYY-MM-DD'),        
        //       code: this.videoID,
        //       pageNumber:this.ipagination.current,
        //       pageSize:this.ipagination.pageSize,
        //       accountList:this.accountIds,
        //       order:this.order,
        //       target:this.target,
        //   }).then(res => {
        //       let resArr = []
        //       this.loading=false;
        //       if (res.success) {
        //       this.data = res.data.list.map((item,index)=>{
        //           return {
        //               ...item,
        //               key:index
        //           }
        //       })
        //       this.ipagination.total = res.data.total
        //       this.loading = false
              
        //       }else{
        //           this.loading = false
        //       }
        //   })
        // },
        //导出报表
        exportExcel() {
          this.exportExcelIsOk=true;
        
          // let column = this.columns.map((item, index) => {
          //     return item.dataIndex
          // })
          //     let columns=['url',...column]
          let url=''
          if(this.tabKeys==1){
            url='/image/bytedance/cost/export'
          }else{
            url='/image/kuaishou/cost/export'
          }
            
          downFilePost(url, {              
              startDate: this.dateValue[0].format('YYYY-MM-DD'),
              endDate: this.dateValue[1].format('YYYY-MM-DD'),        
              code: this.videoID,
              accountList:this.accountIds,
              order:this.order,
              target:this.target,
            }).then(res => {        
                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 =  '图片消耗.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
                this.exportExcelIsOk=false;
          })
        },

        //日期选择回调
        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 = []
        }
        },

        //请求项目和账户内容
        accountHttp(type){
            this.accountID=undefined;
            getAction(`/ctop/projectMember/getAllProjectAccount?mediaType=${type}`, {}).then(res => {
                if(res.success){                   
                    if(res.result){
                        res.result.forEach((element,index) => {
                        if(element){
                            if(type==1){
                                this.TTaccountList.push({});
                                this.TTaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
                                this.TTaccountList[index].value='project'+element.project.projectId;
                                this.TTaccountList[index].key=element.project.projectId;
                                this.TTaccountList[index].mediaId=element.project.mediaId;
                                this.TTaccountList[index].children=[];

                                if(element.account.length){
                                    element.account.forEach((ele,i)=>{
                                        this.TTaccountList[index].children.push({});
                                        this.TTaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                        this.TTaccountList[index].children[i].value=ele.accountId;
                                        this.TTaccountList[index].children[i].key=ele.accountId;
                                    })

                                }
                                this.treeData=this.TTaccountList
                            }else if(type==2){
                                this.KSaccountList.push({});
                                this.KSaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
                                this.KSaccountList[index].value='project'+element.project.projectId;
                                this.KSaccountList[index].key=element.project.projectId;
                                this.KSaccountList[index].mediaId=element.project.mediaId;
                                this.KSaccountList[index].children=[];

                                if(element.account.length){
                                    element.account.forEach((ele,i)=>{
                                        this.KSaccountList[index].children.push({});
                                        this.KSaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                        this.KSaccountList[index].children[i].value=ele.accountId;
                                        this.KSaccountList[index].children[i].key=ele.accountId;
                                    })

                                }
                                this.treeData=this.KSaccountList
                            }
                            
                        }


                        });
                        // console.log(this.treeData)


                      if(this.tabKeys==1){
                        this.treeData=this.TTaccountList
                      }else if(this.tabKeys==1){
                        this.treeData=this.KSaccountList
                      }else{
                        console.log('数据出错')
                      }
                    }
                }
            })
        },

        opendate(){
          this.openOptions=!this.openOptions;
            //  console.log(this.openOptions)
        },
        opendateClose(){
              this.openOptions=false;
              //  console.log(this.openOptions)
        },


  },
  watch:{
      // 'ipagination.current':function(n,o){
      //     console.log(n,o)
          
      //       if(this.tabKeys==1){               
      //           this.getTableData(this.bytedanceUrl)
      //       }else if (this.tabKeys==2){
      //           this.getTableData(this.kuaishouUrl)
      //       } 
      // }
  },
 
  filters: {
    
    toshowTime(val) {
     
      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){
          
          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 '-'
        }
          
      }
  },
  watch:{
    dateValue:{
        deep:true,
        handler(){
          this.totalCost={};
            if(this.tabKeys==1){               
                this.getTableData(this.bytedanceUrl)
            }else if (this.tabKeys==2){
                this.getTableData(this.kuaishouUrl)
            } 
        }
      }
  },

  mounted() {
    
   
   
    // this.HttpPost('/image/bytedance/cost')
    this.getTableData(this.bytedanceUrl)
    this.accountHttp(1);
    this.accountHttp(2);
    
    
  }
}
</script>
<style lang="less">
// .ant-table .ant-table-fixed-left .ant-table-thead {
//   height: 108px !important ;
// }
.imageCostReport{
  .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
    // display:block;
    white-space: normal;
    word-break: break-all;
  }
  
  .ant-table-tbody .ant-table-row-level-0:first-child{
    background: #e8e9ea;
  }
}

</style>

<style lang="scss" scoped>
.imageCostReport {
  width: 100%;
  height: 100%;
  background:  #fff;
  padding: 20px;
  box-sizing: border-box;
}
.tableBody{
   margin-top: 20px;
}
.xiangmuxuanze{
  margin-bottom: 20px;;
}
.timeDiv {
  display: flex;
  justify-content: flex-start;
  position: relative;
}
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;
      }
    }
  }
}
</style>