<template>
  <div class="effectPage">
    <div class="moduler">
      <a-tabs v-model="tabKey" @change="tabKeyChange">
        <a-tab-pane :key="1" tab="头条"></a-tab-pane>
        <a-tab-pane :key="2" tab="快手"> </a-tab-pane>
        <!--             
            <a-tab-pane :key="3" tab="广告计划"> </a-tab-pane>
            <a-tab-pane :key="4" tab="广告组"> </a-tab-pane>
            <a-tab-pane :key="5" tab="广告创意"> </a-tab-pane> -->
      </a-tabs>
      <div class="tableBody">
        <div class="moduler">
          <a-select mode="multiple" style="width: 460px;margin-right:30px" v-model="projectValue" placeholder="请选择具体项目"
            :filter-option="filterOption" option-filter-prop="children" :maxTagCount=4 @change="projectChange">
            <a-select-option v-for="item in projectData" :key="item.projectId">
              {{ item.projectName }}
            </a-select-option>
          </a-select>
          <a-range-picker v-model="dateRange" @change="dateChange" style="width:200px" />
          <div class="opt">
            <a-button type='primary' @click="search" style="margin-right:15px">查询</a-button>
            <a-button type='primary' @click="exportExcel" :loading='exportLoading'>导出报表</a-button>

          </div>
        </div>
        <a-spin :spinning="spinning">
          <a-table :columns="columns" :data-source="tableData" :scroll="{ x: 4000 }" bordered size="middle"
            :laoding='loading' :pagination='ipagination' @change="tableChange" :customRow="click">
            <a slot="projectName" slot-scope="text">{{text}}</a>
            <!-- <a slot="projectName" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
            <a slot="authName" slot-scope="text,records" @click="goCampaign(records)">{{text}}</a>
            <a slot="campaignName" slot-scope="text,records" @click="goUnit(records)">{{text}}</a>
            <a slot="unitName" slot-scope="text,records" @click="goCreative(records)">{{text}}</a>
            <a slot="creativeName" slot-scope="creativeName">{{creativeName}}</a>

            <a slot="coverUrl" slot-scope="text,records">
              <img :src="text" alt="" style="width:100px" @click="openVideo(records)">
            </a> -->

            <span slot="charge" slot-scope="charge"> {{charge|decimalsHandle}}</span>
            <span slot="activationCost" slot-scope="activationCost"> {{activationCost|decimalsHandle}}</span>
            <span slot="eventNextDayStayCost" slot-scope="eventNextDayStayCost">
              {{eventNextDayStayCost|decimalsHandle}}</span>
            <span slot="impression1kCost" slot-scope="impression1kCost"> {{impression1kCost|decimalsHandle}}</span>
            <span slot="photoClickCost" slot-scope="photoClickCost"> {{photoClickCost|decimalsHandle}}</span>
            <span slot="actionCost" slot-scope="actionCost"> {{actionCost|decimalsHandle}}</span>


            <span slot="photoClick" slot-scope="photoClick"> {{photoClick|formatCurrency}}</span>
            <span slot="photoShow" slot-scope="photoShow"> {{photoShow|formatCurrency}}</span>
            <span slot="aclick" slot-scope="aclick"> {{aclick|formatCurrency}}</span>
            <span slot="bclick" slot-scope="bclick"> {{bclick|formatCurrency}}</span>
            <span slot="activation" slot-scope="activation"> {{activation|formatCurrency}}</span>
            <span slot="submit" slot-scope="submit"> {{submit|formatCurrency}}</span>
            <span slot="eventRegister" slot-scope="eventRegister"> {{eventRegister|formatCurrency}}</span>
            <span slot="eventNextDayStay" slot-scope="eventNextDayStay"> {{eventNextDayStay|formatCurrency}}</span>
            <span slot="photoShare" slot-scope="photoShare"> {{photoShare|formatCurrency}}</span>
            <span slot="photoComment" slot-scope="photoComment"> {{photoComment|formatCurrency}}</span>
            <span slot="photoLike" slot-scope="photoLike"> {{photoLike|formatCurrency}}</span>
            <span slot="follow" slot-scope="follow"> {{follow|formatCurrency}}</span>
            <span slot="report" slot-scope="report"> {{report|formatCurrency}}</span>
            <span slot="cancelFollow" slot-scope="cancelFollow"> {{cancelFollow|formatCurrency}}</span>
            <span slot="block" slot-scope="block"> {{block|formatCurrency}}</span>
            <span slot="nagative" slot-scope="nagative"> {{nagative|formatCurrency}}</span>
            <span slot="downloadStarted" slot-scope="downloadStarted"> {{downloadStarted|formatCurrency}}</span>
            <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>
            <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>


            <span slot="photoClickRatio" slot-scope="photoClickRatio"> {{photoClickRatio|toPercentage}}</span>
            <span slot="actionRate" slot-scope="actionRate"> {{actionRate|toPercentage}}</span>






            <span slot="cost" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="nextDayOpenCost" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="cpc" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="cpm" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="activeCost" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="activeRegisterCost" slot-scope="text"> {{text|decimalsHandle}}</span>
            <span slot="convertCost" slot-scope="text"> {{text|decimalsHandle}}</span>


            <span slot="active" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="downloadFinish" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="downloadStart" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="installFinish" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="register" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="payCount" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="form" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="totalPlay" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="validPlay" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="wifiPlay" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="play25FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="play50FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="play75FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="play100FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="shareMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="follow" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="nextDayOpen" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="convertMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="likeMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="showMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="clickMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
            <span slot="clickInstall" slot-scope="text"> {{text|formatCurrency}}</span>

            <span slot="photoClickRatio" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="play25FeedBreakRate" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="nextDayOpenRate" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="ctr" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="activeRate" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="activeRegisterRate" slot-scope="text"> {{text|toPercentage}}</span>
            <span slot="convertRate" slot-scope="text"> {{text|toPercentage}}</span>

          </a-table>
        </a-spin>
      </div>
    </div>
    <div>
      <a-modal v-model="visible" title="账户详情" :footer="null" :width='1200'>
        <a-table :columns="columnsChildren" :data-source="tableDataChild" :scroll="{ x: 3500 }" bordered size="middle"
          :laoding='loadingChild' :pagination='ipaginationCount' :customRow="click" style="word-break: break-all;">

          <!-- <a slot="projectName" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
          <a slot="authName" slot-scope="text,records" @click="goCampaign(records)">{{text}}</a>
          <a slot="campaignName" slot-scope="text,records" @click="goUnit(records)">{{text}}</a>
          <a slot="unitName" slot-scope="text,records" @click="goCreative(records)">{{text}}</a>
          <a slot="creativeName" slot-scope="creativeName">{{creativeName}}</a> -->

          <!-- <a slot="coverUrl" slot-scope="text,records">
            <img :src="text" alt="" style="width:100px" @click="openVideo(records)">
          </a> -->

          <span slot="charge" slot-scope="charge"> {{charge|decimalsHandle}}</span>
          <span slot="activationCost" slot-scope="activationCost"> {{activationCost|decimalsHandle}}</span>
          <span slot="eventNextDayStayCost" slot-scope="eventNextDayStayCost">
            {{eventNextDayStayCost|decimalsHandle}}</span>
          <span slot="impression1kCost" slot-scope="impression1kCost"> {{impression1kCost|decimalsHandle}}</span>
          <span slot="photoClickCost" slot-scope="photoClickCost"> {{photoClickCost|decimalsHandle}}</span>
          <span slot="actionCost" slot-scope="actionCost"> {{actionCost|decimalsHandle}}</span>


          <span slot="photoClick" slot-scope="photoClick"> {{photoClick|formatCurrency}}</span>
          <span slot="photoShow" slot-scope="photoShow"> {{photoShow|formatCurrency}}</span>
          <span slot="aclick" slot-scope="aclick"> {{aclick|formatCurrency}}</span>
          <span slot="bclick" slot-scope="bclick"> {{bclick|formatCurrency}}</span>
          <span slot="activation" slot-scope="activation"> {{activation|formatCurrency}}</span>
          <span slot="submit" slot-scope="submit"> {{submit|formatCurrency}}</span>
          <span slot="eventRegister" slot-scope="eventRegister"> {{eventRegister|formatCurrency}}</span>
          <span slot="eventNextDayStay" slot-scope="eventNextDayStay"> {{eventNextDayStay|formatCurrency}}</span>
          <span slot="photoShare" slot-scope="photoShare"> {{photoShare|formatCurrency}}</span>
          <span slot="photoComment" slot-scope="photoComment"> {{photoComment|formatCurrency}}</span>
          <span slot="photoLike" slot-scope="photoLike"> {{photoLike|formatCurrency}}</span>
          <span slot="follow" slot-scope="follow"> {{follow|formatCurrency}}</span>
          <span slot="report" slot-scope="report"> {{report|formatCurrency}}</span>
          <span slot="cancelFollow" slot-scope="cancelFollow"> {{cancelFollow|formatCurrency}}</span>
          <span slot="block" slot-scope="block"> {{block|formatCurrency}}</span>
          <span slot="nagative" slot-scope="nagative"> {{nagative|formatCurrency}}</span>
          <span slot="downloadStarted" slot-scope="downloadStarted"> {{downloadStarted|formatCurrency}}</span>
          <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>
          <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>


          <span slot="photoClickRatio" slot-scope="photoClickRatio"> {{photoClickRatio|toPercentage}}</span>
          <span slot="actionRate" slot-scope="actionRate"> {{actionRate|toPercentage}}</span>






          <span slot="cost" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="nextDayOpenCost" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="cpc" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="cpm" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="activeCost" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="activeRegisterCost" slot-scope="text"> {{text|decimalsHandle}}</span>
          <span slot="convertCost" slot-scope="text"> {{text|decimalsHandle}}</span>


          <span slot="active" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="downloadFinish" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="downloadStart" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="installFinish" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="register" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="payCount" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="form" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="totalPlay" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="validPlay" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="wifiPlay" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="play25FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="play50FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="play75FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="play100FeedBreak" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="shareMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="follow" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="nextDayOpen" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="convertMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="likeMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="showMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="clickMaterial" slot-scope="text"> {{text|formatCurrency}}</span>
          <span slot="clickInstall" slot-scope="text"> {{text|formatCurrency}}</span>

          <span slot="photoClickRatio" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="play25FeedBreakRate" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="nextDayOpenRate" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="ctr" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="activeRate" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="activeRegisterRate" slot-scope="text"> {{text|toPercentage}}</span>
          <span slot="convertRate" slot-scope="text"> {{text|toPercentage}}</span>


        </a-table>

      </a-modal>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    getAction,
    postAction,
    downFile,
    downFilePost
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/ipagination'
  const publicColumns = [{
      title: '消耗',
      dataIndex: 'charge',
      scopedSlots: {
        customRender: 'charge'
      },
      align: 'center',

    },
    {
      title: '封面曝光数',
      dataIndex: 'photoShow',
      scopedSlots: {
        customRender: 'photoShow'
      },
      align: 'center',
    },
    {
      title: '封面点击数',
      dataIndex: 'photoClick',
      scopedSlots: {
        customRender: 'photoClick'
      },
      align: 'center',
    },
    {
      title: '素材曝光数',
      dataIndex: 'aclick',
      scopedSlots: {
        customRender: 'aclick'
      },
      align: 'center',
    },
    {
      title: '行为数',
      dataIndex: 'bclick',
      scopedSlots: {
        customRender: 'bclick'
      },
      align: 'center',
    },
    {
      title: '激活数',
      dataIndex: 'activation',
      scopedSlots: {
        customRender: 'activation'
      },
      align: 'center',
    },
    {
      title: '注册数',
      dataIndex: 'eventRegister',
      scopedSlots: {
        customRender: 'eventRegister'
      },
      align: 'center',
    },
    {
      title: '提交按钮点击数',
      dataIndex: 'submit',
      scopedSlots: {
        customRender: 'submit'
      },
      align: 'center',
    },
    {
      title: '次日留存数',
      dataIndex: 'eventNextDayStay',
      scopedSlots: {
        customRender: 'eventNextDayStay'
      },
      align: 'center',
    },
    {
      title: '次日留存成本',
      dataIndex: 'eventNextDayStayCost',
      scopedSlots: {
        customRender: 'eventNextDayStayCost'
      },
      align: 'center',
    },
    {
      title: '激活成本',
      dataIndex: 'activationCost',
      scopedSlots: {
        customRender: 'activationCost'
      },
      align: 'center',
    },
    {
      title: '封面点击率',
      dataIndex: 'photoClickRatio',
      scopedSlots: {
        customRender: 'photoClickRatio'
      },
      align: 'center',
    },
    {
      title: '行为率 ',
      dataIndex: 'actionRate',
      scopedSlots: {
        customRender: 'actionRate'
      },
      align: 'center',
    },
    {
      title: '均千次封面曝光花费',
      dataIndex: 'impression1kCost',
      scopedSlots: {
        customRender: 'impression1kCost'
      },
      align: 'center',
    },
    {
      title: '平均封面点击单价',
      dataIndex: 'photoClickCost',
      scopedSlots: {
        customRender: 'photoClickCost'
      },
      align: 'center',
    },
    {
      title: '平均行为单价',
      dataIndex: 'actionCost',
      scopedSlots: {
        customRender: 'actionCost'
      },
      align: 'center',
    },
    {
      title: '分享数',
      dataIndex: 'photoShare',
      scopedSlots: {
        customRender: 'photoShare'
      },
      align: 'center',
    },
    {
      title: '评论数',
      dataIndex: 'photoComment',
      scopedSlots: {
        customRender: 'photoComment'
      },
      align: 'center',
    },
    {
      title: '点赞数',
      dataIndex: 'photoLike',
      scopedSlots: {
        customRender: 'photoLike'
      },
      align: 'center',
    },
    {
      title: '新增关注数',
      dataIndex: 'follow',
      scopedSlots: {
        customRender: 'follow'
      },
      align: 'center',
    },
    {
      title: '举报数',
      dataIndex: 'report',
      scopedSlots: {
        customRender: 'report'
      },
      align: 'center',
    },
    {
      title: '取消关注数',
      dataIndex: 'cancelFollow',
      scopedSlots: {
        customRender: 'cancelFollow'
      },
      align: 'center',
    },
    {
      title: '拉黑数',
      dataIndex: 'block',
      scopedSlots: {
        customRender: 'block'
      },
      align: 'center',
    },
    {
      title: '减少此类作品数',
      dataIndex: 'nagative',
      scopedSlots: {
        customRender: 'nagative'
      },
      align: 'center',
    },
    {
      title: '安卓下载开始数',
      dataIndex: 'downloadStarted',
      scopedSlots: {
        customRender: 'downloadStarted'
      },
      align: 'center',
    },
    {
      title: '安卓下载完成数',
      dataIndex: 'downloadCompleted',
      scopedSlots: {
        customRender: 'downloadCompleted'
      },
      align: 'center',
    },
  ]

  const projectColumns = [{
      title: '项目名称',
      dataIndex: 'projectName',
      width: 150,
      align: 'center',
      scopedSlots: {
        customRender: 'projectName'
      },
      fixed: 'left'
    },
    {
      title: '广告主',
      dataIndex: 'advertiserName',
      width: 200,
      align: 'center',
      fixed: 'left'
    },
    {
      title: '运营负责人',
      dataIndex: 'responsibleName',
      scopedSlots: {
        customRender: 'responsibleName'
      },
      align: 'center',
    },
    {
      title: '设计负责人',
      dataIndex: 'designResponsibleName',
      scopedSlots: {
        customRender: 'designResponsibleName'
      },
      align: 'center',
    },
    {
      title: '销售',
      dataIndex: 'saleName',
      scopedSlots: {
        customRender: 'saleName'
      },
      align: 'center',
    },
    
    {
      title: '时间',
      dataIndex: 'statDate',
      // width:200,
      scopedSlots: {
        customRender: 'statDate'
      },
      align: 'center',
      width: 200
    },
  ]
  const accountColumns = [{
      title: '账户名称',
      dataIndex: 'authName',
      width: 130,
      align: 'center',
      scopedSlots: {
        customRender: 'authName'
      },
      fixed: 'left'
    },
    {
      title: '账户id',
      dataIndex: 'accountId',
      align: 'center',
      width: 90,
      scopedSlots: {
        customRender: 'accountId'
      },
      fixed: 'left'
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      width: 130,
      align: 'center',
      scopedSlots: {
        customRender: 'projectName'
      },
      fixed: 'left'
    },

    {
      title: '时间',
      dataIndex: 'statDate',
      width: 200,
      scopedSlots: {
        customRender: 'statDate'
      },
      align: 'center',
    },

  ]

  const bytedanceColumns = [{
    title: '消耗',
    dataIndex: 'cost',
    width: 150,
    align: 'center',
    scopedSlots: {
      customRender: 'cost'
    }
  }, {
    title: '激活',
    dataIndex: 'active',
    align: 'center',
    scopedSlots: {
      customRender: 'active'
    }
  }, {
    title: '安卓下载完成',
    dataIndex: 'downloadFinish',
    align: 'center',
    scopedSlots: {
      customRender: 'downloadFinish'
    }
  }, {
    title: '安卓下载开始',
    dataIndex: 'downloadStart',
    align: 'center',
    scopedSlots: {
      customRender: 'downloadStart'
    }
  }, {
    title: '安卓安装完成',
    dataIndex: 'installFinish',
    align: 'center',
    scopedSlots: {
      customRender: 'installFinish'
    }
  }, {
    title: '注册',
    dataIndex: 'register',
    align: 'center',
    scopedSlots: {
      customRender: 'register'
    }
  }, {
    title: '付费数',
    dataIndex: 'payCount',
    align: 'center',
    scopedSlots: {
      customRender: 'payCount'
    }
  }, {
    title: '表单提交数',
    dataIndex: 'form',
    align: 'center',
    scopedSlots: {
      customRender: 'form'
    }
  }, {
    title: '总播放',
    dataIndex: 'totalPlay',
    align: 'center',
    scopedSlots: {
      customRender: 'totalPlay'
    }
  }, {
    title: '有效播放',
    dataIndex: 'validPlay',
    align: 'center',
    scopedSlots: {
      customRender: 'validPlay'
    }
  }, {
    title: 'wifi播放',
    dataIndex: 'wifiPlay',
    align: 'center',
    scopedSlots: {
      customRender: 'wifiPlay'
    }
  }, {
    title: '25%进度播放率',
    dataIndex: 'play25FeedBreakRate',
    align: 'center',
    scopedSlots: {
      customRender: 'play25FeedBreakRate'
    }
  }, {
    title: '播放25%进度总数',
    dataIndex: 'play25FeedBreak',
    align: 'center',
    scopedSlots: {
      customRender: 'play25FeedBreak'
    }
  }, {
    title: '播放50%进度总数',
    dataIndex: 'play50FeedBreak',
    align: 'center',
    scopedSlots: {
      customRender: 'play50FeedBreak'
    }
  }, {
    title: '播放75%进度总数',
    dataIndex: 'play75FeedBreak',
    align: 'center',
    scopedSlots: {
      customRender: 'play75FeedBreak'
    }
  }, {
    title: '播放100%进度总数',
    dataIndex: 'play100FeedBreak',
    align: 'center',
    scopedSlots: {
      customRender: 'play100FeedBreak'
    }
  }, {
    title: '分享数',
    dataIndex: 'shareMaterial',
    align: 'center',
    scopedSlots: {
      customRender: 'shareMaterial'
    }
  }, {
    title: '新增关注数',
    dataIndex: 'follow',
    align: 'center',
    scopedSlots: {
      customRender: 'follow'
    }
  }, {
    title: '次留数',
    dataIndex: 'nextDayOpen',
    align: 'center',
    scopedSlots: {
      customRender: 'nextDayOpen'
    }
  }, {
    title: '次留率',
    dataIndex: 'nextDayOpenRate',
    align: 'center',
    scopedSlots: {
      customRender: 'nextDayOpenRate'
    }
  }, {
    title: '次留成本',
    dataIndex: 'nextDayOpenCost',
    align: 'center',
    scopedSlots: {
      customRender: 'nextDayOpenCost'
    }
  }, {
    title: '转化数',
    dataIndex: 'convertMaterial',
    align: 'center',
    scopedSlots: {
      customRender: 'convertMaterial'
    }
  }, {
    title: '平均点击单价',
    dataIndex: 'cpc',
    align: 'center',
    scopedSlots: {
      customRender: 'cpc'
    }
  }, {
    title: '展现数据',
    dataIndex: 'ctr',
    align: 'center',
    scopedSlots: {
      customRender: 'ctr'
    }
  }, {
    title: '平均千次展现费用',
    dataIndex: 'cpm',
    align: 'center',
    scopedSlots: {
      customRender: 'cpm'
    }
  }, {
    title: '点赞数',
    dataIndex: 'likeMaterial',
    align: 'center',
    scopedSlots: {
      customRender: 'likeMaterial'
    }
  }, {
    title: '激活成本',
    dataIndex: 'activeCost',
    align: 'center',
    scopedSlots: {
      customRender: 'activeCost'
    }
  }, {
    title: '激活率',
    dataIndex: 'activeRate',
    align: 'center',
    scopedSlots: {
      customRender: 'activeRate'
    }
  }, {
    title: '注册率',
    dataIndex: 'activeRegisterRate',
    align: 'center',
    scopedSlots: {
      customRender: 'activeRegisterRate'
    }
  }, {
    title: '注册成本',
    dataIndex: 'activeRegisterCost',
    align: 'center',
    scopedSlots: {
      customRender: 'activeRegisterCost'
    }
  }, {
    title: '展示数',
    dataIndex: 'showMaterial',
    align: 'center',
    scopedSlots: {
      customRender: 'showMaterial'
    }
  }, {
    title: '转化率',
    dataIndex: 'convertRate',
    align: 'center',
    scopedSlots: {
      customRender: 'convertRate'
    }
  }, {
    title: '转化成本',
    dataIndex: 'convertCost',
    align: 'center',
    scopedSlots: {
      customRender: 'convertCost'
    }
  }, {
    title: '点击数',
    dataIndex: 'clickMaterial',
    align: 'center',
    scopedSlots: {
      customRender: 'clickMaterial'
    }
  }, {
    title: '点击安装数',
    dataIndex: 'clickInstall',
    align: 'center',
    scopedSlots: {
      customRender: 'clickInstall'
    }
  }]



  export default {
    mixins: [JeecgListMixin],
    data() {
      return {
        exportLoading:false,
        projectValue: [],
        dateRange: [moment().subtract(1, 'days'), moment()],
        projectData: [],
        tableData: [],
        tableDataChild: [],
        columns: [...projectColumns, ...publicColumns],
        columnsChildren:  [],
        ipaginationCount: {
          current: 1,
          pageSize: 10,
          //   pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          //   showSizeChanger: true,
          total: 0,
          onChange: current => {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipaginationCount.current = current
          }
        },
        loading: false,
        loadingChild: false,
        tabKey: 1,
        currentid: undefined,
        accountId: undefined,
        projectId: undefined,
        campaignId: undefined,
        unitId: undefined,
        spinning: false,
        visible: false,
        imgSrc: undefined,
        currentRecords: {},
      }
    },
    methods: {
      //导出报表
      exportExcel() {
        this.exportLoading=true;
        let url=''
        if (this.tabKey == 1) {
          url='/ctop/report/exportBytedanceSaleProjectInfo'
         
        } else if (this.tabKey == 2) {
          url='/kuaishou/exportKuaishouSaleProjectInfo'
        }
        downFilePost(url, {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'), 
          projectList: this.projectValue,
          
        }).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.dateRange[0].format('YYYY-MM-DD')}~${this.dateRange[1].format('YYYY-MM-DD')}销售报表.xlsx`   //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
      },
      showClick(record) {
        this.visible = true
        this.loadingChild = true
        if (this.tabKey == 1) {

          this.columnsChildren = [...accountColumns, ...bytedanceColumns]
          var params = {
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectId: record.projectId,
            pageNum: '1',
            pageSize: '10'
          }
          postAction('/ctop/report/getBytedanceAccountInfoByProjectId', params).then(res => {

            if (res.success) {
              this.loadingChild = false
              this.tableDataChild = res.result.list
              this.ipaginationCount.total = res.result.total
            } else {
              this.loadingChild = false
            }
          })


        } else if (this.tabKey == 2) {
          this.columnsChildren = [...accountColumns, ...publicColumns]
          var params = {
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectId: record.projectId,
            pageNum: '1',
            pageSize: '10'
          }
          postAction('/kuaishou/getKuaishouAccountInfoByProjectId', params).then(res => {

            if (res.success) {
              this.loadingChild = false
              this.tableDataChild = res.result.list
              this.ipaginationCount.total = res.result.total
            } else {
              this.loadingChild = false
            }
          })
        }
      },
      click(record, index) {
        return {
          on: {
            click: () => {
              this.visible = true
              this.loadingChild = true
              if (this.tabKey == 1) {

                this.columnsChildren = [...accountColumns, ...bytedanceColumns]
                var params = {
                  startDate: this.dateRange[0].format('YYYY-MM-DD'),
                  endDate: this.dateRange[1].format('YYYY-MM-DD'),
                  projectId: record.projectId,
                  pageNum: '1',
                  pageSize: '10'
                }
                postAction('/ctop/report/getBytedanceAccountInfoByProjectId', params).then(res => {

                  if (res.success) {
                    this.loadingChild = false
                    this.tableDataChild = res.result.list
                    this.ipaginationCount.total = res.result.total
                  } else {
                    this.loadingChild = false
                  }
                })


              } else if (this.tabKey == 2) {
                this.columnsChildren = [...accountColumns, ...publicColumns]
                var params = {
                  startDate: this.dateRange[0].format('YYYY-MM-DD'),
                  endDate: this.dateRange[1].format('YYYY-MM-DD'),
                  projectId: record.projectId,
                  pageNum: '1',
                  pageSize: '10'
                }
                postAction('/kuaishou/getKuaishouSaleAccountInfoByProjectId', params).then(res => {

                  if (res.success) {
                    this.loadingChild = false
                    this.tableDataChild = res.result.list
                    this.ipaginationCount.total = res.result.total
                  } else {
                    this.loadingChild = false
                  }
                })
              }

            }
          }
        }
      },
      handleOk(e) {
        // console.log(e);
        this.visible = false;
      },
      openVideo(records) {
        this.visible = true;
        this.imgSrc = records.url;
        this.currentRecords = records
      },
      // 过滤事件
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      //table的改变（页码改变请求数据，也可以写排序）
      tableChange(pagination, filters, sorter, {
        currentDataSource
      }) {
        // this.searchHandle();
        this.search();
      },
      projectChange(val) {
        console.log(val)
      },
      dateChange(date, dateString) {
        console.log(date, dateString)
      },
      // tab切换事件
      tabKeyChange(key) {
        this.projectValue = []
        // console.log(key)
        if (key == 1) {
          this.columnsChildren = [...accountColumns, ...bytedanceColumns]
          postAction('/ctop/projectMember/getSaleOwnProjects', {
            mediaIds: [1, 3], //头条

          }).then(res => {
            console.log(res);
            this.projectData = res.result
          });
        } else if (key == 2) {
          this.columnsChildren = [...accountColumns, ...publicColumns]
          postAction('/ctop/projectMember/getSaleOwnProjects', {
            mediaIds: [2, 4], //头条

          }).then(res => {
            console.log(res);
            this.projectData = res.result
          });
        }
        this.search();
      },
      // x项目的table值
      getTableProjectList(paramse) {
        this.loading = true;
        this.spinning = true;
        // this.ipagination.current=0;
        this.columns = [...projectColumns, ...bytedanceColumns]
        postAction('/ctop/report/getBytedanceSaleProjectInfo', paramse).then(res => {
          console.log(res);
          this.tabKey = 1;
          this.loading = false;
          this.spinning = false;
          if (res.success) {
            res.result.list.forEach((item, index) => {
              item.key = index
            })
            this.tableData = res.result.list;
            this.ipagination.total = res.result.total
          }

        })
      },
      // 从项目跳转到账户,并获取账户的table值
      goAccount(records) {
        console.log(records);
        this.projectId = records.projectId
        this.getTableAccountList()

      },
      // 从账户到计划
      goCampaign(records) {
        this.accountId = records.accountId;
        this.getTableCampaignList()
      },
      // 从计划到组
      goUnit(records) {
        this.campaignId = records.campaignId;
        this.getTableUnitList()
      },
      // 从组到创意
      goCreative(records) {
        this.unitId = records.unitId;
        this.getTableCreativeList()
      },
      getTableAccountList(params) {
        this.loading = true;
        this.spinning = true;
        // this.ipagination.current=0;           
        postAction('/kuaishou/getKuaishouSaleProjectInfo', params).then(res => {
          console.log(res)
          this.columns = [...projectColumns, ...publicColumns]
          this.tabKey = 2;
          this.loading = false;
          this.spinning = false;

          if (res.success) {

            this.tableData = res.result.list
            this.ipagination.total = res.result.total
          }
        })
      },
      getTableCampaignList() {
        this.loading = true;
        // this.ipagination.current=0; 
        this.spinning = true;
        postAction('/kuaishou/getKuaishouCampaignInfoByAccountId', {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          accountId: this.accountId,
          pageNum: this.ipagination.current,
          pageSize: '10'
        }).then(res => {
          console.log(res)
          this.tabKey = 3;
          this.loading = false;
          this.spinning = false;
          //   this.columns = [...campaignColumns, ...publicColumns]
          if (res.success) {
            this.tableData = res.result.list
            this.ipagination.total = res.result.total
          }
        })
      },
      getTableUnitList() {
        this.loading = true;
        // this.ipagination.current=0;   
        this.spinning = true;
        postAction('/kuaishou/getKuaishouUnitInfoByCampaignId', {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          campaignId: this.campaignId,
          pageNum: this.ipagination.current,
          pageSize: '10'
        }).then(res => {
          console.log(res)
          this.tabKey = 4;
          this.loading = false;
          this.spinning = false;
          //   this.columns = [...unitColumns, ...publicColumns]
          if (res.success) {

            this.tableData = res.result.list
            this.ipagination.total = res.result.total
          }
        })
      },
      getTableCreativeList() {
        this.loading = true;
        // this.ipagination.current=0;      
        this.spinning = true;
        postAction('/kuaishou/getKuaishouCreativeInfoByUnitId', {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          unitId: this.unitId,
          pageNum: this.ipagination.current,
          pageSize: '10'
        }).then(res => {
          console.log(res)
          this.tabKey = 5;
          this.loading = false;
          this.spinning = false;
          //   this.columns = [...ideaColumns, ...publicColumns]
          if (res.success) {
            this.tableData = res.result.list
            this.ipagination.total = res.result.total
          }
        })
      },

      search() {
        if (this.tabKey == 1) {
          this.getTableProjectList({
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectList: this.projectValue,
            pageNum: this.ipagination.current,
            pageSize: '10'
          })
        } else if (this.tabKey == 2) {
          this.getTableAccountList({
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectList: this.projectValue,
            pageNum: '0',
            pageSize: '10'
          });
        }

      },
    },
    watch: {
      'ipagination.current': function (n, o) {
        if (this.tabKey == 1) {
          this.getTableProjectList({
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectList: this.projectValue,
            pageNum: this.ipagination.current,
            pageSize: '10'
          })
        } else if (this.tabKey == 2) {
          this.getTableAccountList({
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectList: [],
            pageNum: this.ipagination.current,
            pageSize: '10'
          });
        }
      },
      'ipaginationCount.current': function (n, o) {
        if (this.tabKey == 1) {
          var params = {
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectId: record.projectId,
            pageNum: this.ipaginationCount.current,
            pageSize: '10'
          }
          postAction('/ctop/report/getBytedanceAccountInfoByProjectId', params).then(res => {
            // this.columnsChildren = [...accountColumns, ...bytedanceColumns]
            if (res.success) {
              this.loadingChild = false
              this.tableDataChild = res.result.list
              this.ipaginationCount.total = res.result.total
            } else {
              this.loadingChild = false
            }
          })
        } else if (this.tabKey == 2) {
          var params = {
            startDate: this.dateRange[0].format('YYYY-MM-DD'),
            endDate: this.dateRange[1].format('YYYY-MM-DD'),
            projectId: record.projectId,
            pageNum: this.ipaginationCount.current,
            pageSize: '10'
          }
          postAction('/kuaishou/getKuaishouAccountInfoByProjectId', params).then(res => {
            // this.columnsChildren = [...accountColumns, ...publicColumns]
            if (res.success) {
              this.loadingChild = false
              this.tableDataChild = res.result.list
              this.ipaginationCount.total = res.result.total
            } else {
              this.loadingChild = false
            }
          })
        }
      }
    },
    mounted() {
      // /ctop/projectMember/participateList
      //  var arr = this.request.split(',')
      //         var dataTwo = []
      //         var data = res.result.filter(item => {
      //           return item.mediaId == arr[0]
      //         })
      //         if (arr.length > 1) {
      //           dataTwo = res.result.filter(item => {
      //             return item.mediaId == arr[1]
      //           })
      //         }
      postAction('/ctop/projectMember/getSaleOwnProjects', {
        mediaIds: [1, 3], //头条

      }).then(res => {
        console.log(res);
        this.projectData = res.result
      });
      console.log(this.dateRange)
      this.getTableProjectList({
        startDate: this.dateRange[0].format('YYYY-MM-DD'),
        endDate: this.dateRange[1].format('YYYY-MM-DD'),
        projectList: [],
        pageNum: '0',
        pageSize: '10'
      });
    },
    filters: {
      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 '-'
        }

      }
    }
  }
</script>
<style lang="less">
  .resize-table-th {
    position: relative;

    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      left: auto !important;
      right: -5px;
      cursor: col-resize;
      touch-action: none;
    }
  }
</style>
<style lang="scss" scoped>
  .effectPage {
    .moduler {
      background: #fff;
      margin-bottom: 16px;
      position: relative;
      padding: 32px 24px 48px 32px;
      border-radius: 4px;
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);

      .opt {
        position: absolute;
        top: 32px;
        right: 24px;
      }

      .moduler-title {
        display: flex;
        align-items: 'center';
        font-size: 22px;
        margin-bottom: 20px;
      }

      .row-item {
        display: flex;
        justify-content: flex-start;
        align-items: 'center';
        margin-bottom: 32px;
      }

      .row-item:last-of-type {
        margin-bottom: 0;
      }

      .row-item .hint-item {
        width: 24px;
        min-width: 24px;
        align-self: flex-start;
        line-height: 20px;
        height: 20px;
        margin-top: 5px;
      }

      .row-item .label-item {
        position: relative;
        align-items: flex-start;
        align-self: flex-start;
        line-height: 20px;
        height: 20px;
        margin-top: 7px;
        width: 80px;
        min-width: 80px;

        .text-item {
          font-size: 14px;
          width: 60px;
        }
      }

      .row-item .required-item {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background: #f45858;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }

      .row-item .input-item {
        min-width: 480px;
        position: relative;

        // height: 35px;
        .tip {
          font-size: 12px;
          color: tomato;
        }
      }

      .tableBody {
        margin-top: 10px;
      }
    }

    .spin-content {
      border: 1px solid #91d5ff;
      background-color: #e6f7ff;
      padding: 30px;
    }
  }
</style>