<template>
    <div class="autoLaunchReport">
        <div class="tabBody">
            <a-tabs v-model='tabKey' @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="topOptions">
            <span class="OptinItem ">
                <!-- reqUrl='/ctop/userAllocation/getAccountIdListByUserId' -->
                <!-- <Treeselect :appId.sync="accountIds" :multiple="true" request="2,4" reqUrl='/ctop/userAllocation/getAccountIdsByUserId'  ref="treeSelect" style="margin-bottom:8px " /> -->
                <a-select 
                    v-model="accountIds"
                    style="width: 400px"
                    placeholder="请选择账户"
                    :maxTagCount='1'
                    allowClear
                    @change="accountChange"
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    >
                    <a-select-option v-for="item in accountList" :key="item.account_id" :value='item.account_id'>
                    {{ item.auth_name+'_('+(item.project_name||"无所属项目")+')' }}
                    </a-select-option>
                </a-select>
            </span>
            <span class="OptinItem">
                
                <a-tree-select
                    v-if="tabKey==1"
                    v-model="directionalId"
                    show-search
                    style="width: 350px;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>
                <a-tree-select
                    v-if="tabKey==2"
                    v-model="materialId"
                    show-search
                    style="width: 350px;height:30px"
                    :dropdownMatchSelectWidth='true'
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"              
                    tree-checkable
                    searchPlaceholder='选择策略以及素材'
                    :show-checked-strategy="SHOW_PARENT"
                    placeholder="选择策略以及素材"
                    treeNodeFilterProp="title"
                    :allowClear="true"
                    @change="materialTreeChange"                                      
                    :maxTagCount='1'    
                    :tree-data="materialTreeData"
                    :filterOption='filterOption'
                >
                </a-tree-select>
            </span>

            <span class="OptinItem">
               <a-range-picker
                    @change="dateChange"
                    v-model="dateRange"
                    :disabled-date="disabledDate" 
                    style="width:200px"                    
                />
            </span>
            <span class="optionBtn">
                <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
                <!-- <a-button type='default' @click="reset">重置</a-button> -->
            </span>
        </div>
        <div class="chartBox">
            <div class="chartTop">
                <span>数据维度：</span>
                <a-radio-group v-model="value" @change="chartDataTypeChange">
                    <a-radio :value="1">
                        消耗
                    </a-radio>
                    <a-radio :value="2">
                        封面曝光数
                    </a-radio>
                    <a-radio :value="3">
                        封面点击数
                    </a-radio>
                    <a-radio :value="4">
                        素材曝光数
                    </a-radio>
                    <!-- <a-radio :value="5">
                        转化数@
                    </a-radio> -->
                </a-radio-group>
            </div>
            <a-spin :spinning="spinning">
            <div class="chartBody">
                
                <div id="mapEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="mapEchart"></div>
                <div id="sexEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="sexEchart"></div>
                <div id="ageEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="ageEchart"></div>
               
            </div>
            </a-spin>
            <div class="tableBox">
                <!-- <div class="tableTop">
                    关联定向
                </div> -->
                <div class="tableOpt">
                    <span>表格类型：</span>
                    <a-radio-group v-model="tableValue" @change="tableTypeChange">
                        <a-radio :value="1">
                            地域
                        </a-radio>
                        <a-radio :value="2">
                            性别
                        </a-radio>
                        <a-radio :value="3">
                            年龄
                        </a-radio>
                        
                    </a-radio-group>
                </div>
                <div class="tableBody">
                    <a-table
                    size="middle"
                    :columns="columns"
                    :dataSource="tableData"
                    :pagination='true'
                    bordered
                    id="outTable"       
                    :loading="loading"
                    style="word-break: break-all;font-size:16px;font-weight:600"
                    :scroll="{'x':scrollX}"
                     
                    >
                        <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="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | 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="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | 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="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="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
                    </a-table>
                </div>
            </div>
            <div class="tableBox">
                <div class="tableTop">
                    {{tabKey==1?'关联素材':'关联定向'}}
                </div>
                <div class="tableOpt">
                    <!-- <span>表格类型：</span>
                    <a-radio-group v-model="tableValue" @change="tableTypeChange">
                        <a-radio :value="1">
                            地域
                        </a-radio>
                        <a-radio :value="2">
                            性别
                        </a-radio>
                        <a-radio :value="3">
                            年龄
                        </a-radio>
                        
                    </a-radio-group> -->
                </div>
                <div class="tableBody">
                    <a-table
                    size="middle"
                    :columns="materialColumns"
                    :dataSource="materialtableData"
                    :pagination='materialipagination'
                    bordered
                    id="outTable"       
                    :loading="materialloading"
                    style="word-break: break-all;font-size:16px;font-weight:600"
                    :scroll="{'x':materialscrollX}"
                     @change="materialTableChange"
                    >
                        <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="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | 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="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | 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="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="coverUrl" slot-scope="text,record">
                            <a-popover placement="right">
                                <template slot="content">
                                
                                    <video :src="record.videoId_dictText" style="width:250px" controls  ></video>
                                </template>
                                <template slot="title">
                                
                                </template>
                                
                                <img :src="record.imageId_dictText" alt="" style="width:100px">
                            </a-popover>
                        </span>

                    </a-table>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { TreeSelect } from 'ant-design-vue';
import qs from 'qs'
// 引入基本模板
var echarts = require('echarts')
import 'echarts/map/js/china'
// 引入柱状图组件
require('echarts/lib/chart/bar')
// require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/chart/map')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/graphic')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')


let option = {
  color: ['#1890ff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '12%',
    containLabel: false,
    
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      show: true,
      
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false
    }
  ],
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: '40%',
      smooth: true,
      areaStyle:{},
      itemStyle: {
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#1890ff'},                 
                  {offset: 1, color: '#FFF'}
              ]
          )
      },
      data: []
    }
  ]
}

const regionColumns = [
  {
    title: '地域',
    dataIndex: 'region',
    key: 'region',
    align: 'center',
    scopedSlots: { customRender: 'region' },
    width:120,
    fixed: 'left' ,
  },
];
const sexColumns = [
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    scopedSlots: { customRender: 'sex' },
    width:120,
    fixed: 'left' ,
  },
];
const ageColumns = [
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    align: 'center',
    scopedSlots: { customRender: 'age' },
    width:120,
    fixed: 'left' ,
  },
];
const material = [
  {
    title: '素材',
    dataIndex: 'coverUrl',
    key: 'coverUrl',
    align: 'center',
    scopedSlots: { customRender: 'coverUrl' },
    width:120,
    fixed: 'left' ,
  },
  {
    title: '关联创意数',
    dataIndex: 'creativeCount',
    key: 'creativeCount',
    align: 'center',
    scopedSlots: { customRender: 'creativeCount' },
   
  },
//   {
//     title: '关联广告组数',
//     dataIndex: 'relativeGroup',
//     key: 'relativeGroup',
//     align: 'center',
//     scopedSlots: { customRender: 'relativeGroup' },
    
//   },
  {
    title: '广告场景',
    dataIndex: 'scenes',
    key: 'scenes',
    align: 'center',
    scopedSlots: { customRender: 'scenes' },
    
  },
//   {
//     title: '3s播放数',
//     dataIndex: '3',
//     key: '3',
//     align: 'center',
//     scopedSlots: { customRender: '3' },
    
//   },
//   {
//     title: '10s播放数',
//     dataIndex: '10',
//     key: '10',
//     align: 'center',
//     scopedSlots: { customRender: '10' },
    
//   },
//   {
//     title: '3s完播率',
//     dataIndex: 'playOver',
//     key: 'playOver',
//     align: 'center',
//     scopedSlots: { customRender: 'playOver' },
   
//   },
//   {
//     title: '10s完播率',
//     dataIndex: '10playOver',
//     key: '10playOver',
//     align: 'center',
//     scopedSlots: { customRender: '10playOver' },
   
//   },
//   {
//     title: '完播率',
//     dataIndex: 'playOverRate',
//     key: 'playOverRate',
//     align: 'center',
//     scopedSlots: { customRender: 'playOverRate' },
   
//   },
];
const directional = [
    {
        title: '定向包名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        scopedSlots: { customRender: 'name' },
        width:200,
        flex:'left'
    },
    {
        title: '关联广告组数',
        dataIndex: 'group',
        key: 'group',
        align: 'center',
        scopedSlots: { customRender: 'group' },
       
    },
    {
        title: '覆盖人群',
        dataIndex: 'coverPoepele',
        key: 'coverPoepele',
        align: 'center',
        scopedSlots: { customRender: 'coverPoepele' },
        
    },
    {
        title: '地域分布',
        dataIndex: 'region',
        key: 'region',
        align: 'center',
        scopedSlots: { customRender: 'region' },
       
    },
    {
        title: '年龄分布',
        dataIndex: 'age',
        key: 'age',
        align: 'center',
        scopedSlots: { customRender: 'age' },
       
    },
    {
        title: '商业兴趣分布',
        dataIndex: 'url',
        key: 'url',
        align: 'center',
        scopedSlots: { customRender: 'url' },
      
    },
    {
        title: '性别分布',
        dataIndex: 'sex',
        key: 'sex',
        align: 'center',
        scopedSlots: { customRender: 'sex' },
        
    },
]

const publicColumns = [
    {
          title: '消耗(元)',
          dataIndex: 'cost',
          width:150,
          tip: '广告在投放期间的花费总额',
          align: 'center',
          scopedSlots: { customRender: 'cost' },
        //   sorter: () => {}
        },
        {
          title: '封面曝光数',
          dataIndex: 'photoShow',
          tip: '广告在瀑布流被观看次数',
          align: 'center',       
          scopedSlots: { customRender: 'photoShow' },
        //   sorter:() => {}
        },
        {
          title: '封面点击数',
          dataIndex: 'photoClick',
          tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
          align: 'center',
        
          scopedSlots: { customRender: 'photoClick' },
        //   sorter: () => {}
        },
        {
          title: '素材曝光数',
          dataIndex: 'aclick',
          tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
          align: 'center',
       
          scopedSlots: { customRender: 'aClick' },
        //   sorter:() => {}
        },
        {
          title: '行为数',
          dataIndex: 'bclick',
          tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
          align: 'center',
        
          scopedSlots: { customRender: 'bClick' },
        //   sorter:() => {}
        },
        {
          title: '封面点击率',
          dataIndex: 'clickRate',
          tip: '封面点击数占封面展示数百分比',
          align: 'center',    
          scopedSlots: { customRender: 'clickRate' },
        //   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: 'active',
          tip: '广告主回传的应用激活次数',
          align: 'center',    
          scopedSlots: { customRender: 'active' },
        //   sorter:() => {}
        },
        {
          title: '激活单价',
          dataIndex: 'activeCost',
          tip: '花费/激活数',
          align: 'center',    
          scopedSlots: { customRender: 'activeCost' },
        //   sorter:() => {}
        },
        {
          title: '下载完成激活率',
          dataIndex: 'activeRate',
          tip: '激活数/安卓下载完成数',
          align: 'center',    
          scopedSlots: { customRender: 'activeRate' },
        //   sorter:() => {}
        },
        {
          title: '注册数',
          dataIndex: 'register',
          tip: '付费金额/当日消耗',
          align: 'center',    
          scopedSlots: { customRender: 'register' },
        //   sorter:() => {}
        },
        {
          title: '注册成本',
          dataIndex: 'activeRegisterCost',
          tip: '当日消耗/当日回传注册数',
          align: 'center',    
          scopedSlots: { customRender: 'activeRegisterCost' },
        //   sorter:() => {}
        },
        {
          title: '注册率',
          dataIndex: 'activeRegisterRate',
          tip: '当日回传注册数/当日激活数',
          align: 'center',    
          scopedSlots: { customRender: 'activeRegisterRate' },
        //   sorter:() => {}
        },
        {
            title: '次留数',
            dataIndex: 'nextDayOpen',
            tip: '前一日激活用户在次日继续访问的PV',
            align: 'center',    
            scopedSlots: { customRender: 'nextDayOpen' },
            // sorter:() => {}
        },
        
        {
            title: '次留率',
            dataIndex: 'nextDayOpenRate',
            tip: '前一日激活用户在次日继续访问的PV/前一日激活数',
            align: 'center',    
            scopedSlots: { customRender: 'nextDayOpenRate' },
            // sorter:() => {}
        },
]

    export default {
        data() {
            return {
                spinning:false,
                materialId:[],
                treeData: [],
                materialTreeData:[],
                SHOW_PARENT,
                userId:'',
                tabKey:1,
                loading:false,
                ipagination: {
                    current: 1,
                    pageSize: 10,
                    //   pageSizeOptions: ['10', '20', '30'],
                    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;
                    }
                },

                tableValue:1,
                accountIds:undefined,
                accountList:[],
                directionalId:undefined,
                value:1,
                columns:[...regionColumns,...publicColumns],
                tableData:[],
                dateRange: [],
                topOption: JSON.parse(JSON.stringify(option)),
                scrollX:2500,
                materialipagination: {
                    current: 1,
                    pageSize: 10,
                    //   pageSizeOptions: ['10', '20', '30'],
                    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;
                    }
                },
                materialColumns:[...material,...publicColumns],
                materialtableData:[],
                materialloading:false,
                materialscrollX:4000,

                age:[],
                gender:[],
                region:[],
            }
        },
        methods: {
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
             // //项目改变后的事件
            treeChange(val) {
                // console.log(this.treeData)
                    console.log(val)
                    this.directionalId = [];
                    //选择一个后禁用其他
                    if(val.length==1){
                        if(val[0].indexOf('strategy')==-1){
                            let selectindex=0
                            this.treeData.forEach((ele,index)=>{                   
                                if(ele.children){
                                    ele.children.map((item,ind)=>{
                                            if(item.value==val[0]){
                                                selectindex=index;
                                            }
                                    })
                                }                   
                            });
                            // console.log(selectindex)
                            if(selectindex ||selectindex==0){
                                this.treeData.forEach((ele,index)=>{
                                    if(index!=selectindex){
                                        ele.disableCheckbox = true;
                                        if(ele.children){
                                            ele.children.map((item,ind)=>{
                                                item.disableCheckbox = true;
                                            })
                                        }
                                    }
                                })
                            }
                            
                        }else{
                            //  console.log(1)
                            this.treeData.forEach((ele,index)=>{
                                    if(ele.value!=val[0]){
                                        ele.disableCheckbox = true;
                                        
                                        if(ele.children){
                                            ele.children.forEach((item,ind)=>{
                                                item.disableCheckbox = true;
                                            })
                                        }
                                    }
                                    
                            })
                        }
                        // console.log(this.mediaId)
                        
                    }

                    if(val.length==0){
                        this.treeData.forEach((ele,index)=>{              
                                ele.disableCheckbox = false;
                                
                                if(ele.children){
                                    ele.children.forEach((item,ind)=>{
                                        item.disableCheckbox = false;
                                    })
                                }
                            
                        });
                        
                    }
                    if(val){
                        val.forEach((ele,index)=>{
                        if(ele.indexOf('strategy')==-1){
                            this.directionalId.push(ele)
                        }else{              
                            let projectArr=this.treeData.filter((item)=>{
                                return item.value==ele
                            });
                            // console.log(projectArr)
                            projectArr[0].children.forEach((element)=>{
                                this.directionalId.push(element.value)
                            })
                        }


                        })       
                    }
                    
                    console.log(this.directionalId);
                    this.getRelativeData()

                
            },
            
            //请求项目和账户内容
            accountHttp(){
                this.treeData=[];
                this.directionalId=[];
                getAction('/ai/analyze/getStrategyAndTarget', {
                    accountId:this.accountIds
                }).then(res => {
                    if(res.success){
                        // console.log(res);
                        if(res.result){
                            res.result.forEach((element,index) => {
                            if(element){                  
                                this.treeData.push({});                    
                                this.treeData[index].title=element.strategy_name +'_('+ element.id +')';
                                this.treeData[index].value='strategy'+element.id;
                                this.treeData[index].key=element.id;
                               
                                this.treeData[index].children=[];
                                                    
                                if(element.targets.length&&element.targets[0]){
                                    element.targets.forEach((ele,i)=>{
                                        this.treeData[index].children.push({});
                                        this.treeData[index].children[i].title=ele.target_type+'_'+ele.target_content
                                        this.treeData[index].children[i].value=element.id+'_'+ele.id;
                                        this.treeData[index].children[i].key=element.id+'_'+ele.id;
                                    })
                                    
                                }                           
                            }      
                            });
                            // console.log(this.treeData)
                            this.directionalId=[this.treeData[0].children[0].value]
                            
                        }
                    }
                })
            },
            accountMaterialHttp(){
                this.materialTreeData=[];
                this.materialId=[];
                getAction('/ai/analyze/getStrategyAndMaterial', {
                    accountId:this.accountIds
                }).then(res => {
                    if(res.success){
                        // console.log(res);
                        if(res.result){
                            res.result.forEach((element,index) => {
                            if(element){                  
                                this.materialTreeData.push({});                    
                                this.materialTreeData[index].title=element.strategy_name +'_('+ element.id +')';
                                this.materialTreeData[index].value='strategy'+element.id;
                                this.materialTreeData[index].key=element.id;
                               
                                this.materialTreeData[index].children=[];
                                                    
                                if(element.materials.length&&element.materials[0]){
                                    element.materials.forEach((ele,i)=>{
                                        this.materialTreeData[index].children.push({});
                                        this.materialTreeData[index].children[i].title=ele.material_name
                                        this.materialTreeData[index].children[i].value=element.id+'_'+ele.code;
                                        this.materialTreeData[index].children[i].key=element.id+'_'+ele.code;
                                        this.materialTreeData[index].children[i].coverUrl=ele.cover_url;

                                    })
                                    
                                }                           
                            }      
                            });
                            // console.log(this.treeData)
                            this.materialId=[this.materialTreeData[0].children[0].value]
                        }
                    }
                })
            },
            materialTreeChange(val){
                console.log(val)
                    this.materialId = [];
                    //选择一个后禁用其他
                    if(val.length==1){
                        if(val[0].indexOf('strategy')==-1){
                            let selectindex=0
                            this.materialTreeData.forEach((ele,index)=>{                   
                                if(ele.children){
                                    ele.children.map((item,ind)=>{
                                            if(item.value==val[0]){
                                                selectindex=index;
                                            }
                                    })
                                }                   
                            });
                            // console.log(selectindex)
                            if(selectindex ||selectindex==0){
                                this.materialTreeData.forEach((ele,index)=>{
                                    if(index!=selectindex){
                                        ele.disableCheckbox = true;
                                        if(ele.children){
                                            ele.children.map((item,ind)=>{
                                                item.disableCheckbox = true;
                                            })
                                        }
                                    }
                                })
                            }
                            
                        }else{
                            //  console.log(1)
                            this.materialTreeData.forEach((ele,index)=>{
                                    if(ele.value!=val[0]){
                                        ele.disableCheckbox = true;
                                        
                                        if(ele.children){
                                            ele.children.forEach((item,ind)=>{
                                                item.disableCheckbox = true;
                                            })
                                        }
                                    }
                                    
                            })
                        }
                        // console.log(this.mediaId)
                        
                    }

                    if(val.length==0){
                        this.materialTreeData.forEach((ele,index)=>{              
                                ele.disableCheckbox = false;
                                
                                if(ele.children){
                                    ele.children.forEach((item,ind)=>{
                                        item.disableCheckbox = false;
                                    })
                                }
                            
                        });
                        
                    }
                    if(val){
                        val.forEach((ele,index)=>{
                            if(ele.indexOf('strategy')==-1){
                                this.materialId.push(ele)
                            }else{              
                                let projectArr=this.materialTreeData.filter((item)=>{
                                    return item.value==ele
                                });
                                console.log(projectArr)
                                projectArr[0].children.forEach((element)=>{
                                    this.materialId.push(element.value)
                                })
                            }


                        })       
                    }
                    
                    console.log(this.materialId);
                    this.getRelativeData()
            },


            accountChange(val){
                console.log(val);
                if(val){
                    if(this.tabKey==1){
                        this.accountHttp()
                    }else if(this.tabKey==2){
                        this.accountMaterialHttp()
                    }
                }
                
                
            },
            disabledDate(current) {           
                return current && current > moment()
            }, 
            dateChange(date, dateString) {
                // console.log(date,dateString)               
            },
            chartDataTypeChange(e) {
                console.log('radio checked', e.target.value);
                this.getEchartData()
            },
            tableTypeChange(e){
                console.log('radio checked', e.target.value);
                if(e.target.value==2){
                    this.columns=[...sexColumns,...publicColumns];
                    this.tableData=this.gender
                }else if(e.target.value==1){
                    this.columns=[...regionColumns,...publicColumns]
                    this.tableData=this.region
                }else if(e.target.value==3){
                    this.columns=[...ageColumns,...publicColumns]
                    this.tableData=this.age
                }
                // this.getEchartData()

                
            },

            // directionalTableHttp(){
            //     this.loading=true;
            //     postAction('',{

            //     }).then(res=>{
            //         console.log(res)
            //     })
            // },
            // materialTableHttp(){
            //     this.loading=true;
            //     postAction('',{

            //     }).then(res=>{
            //         console.log(res)
            //     })
            // },
            directionalIdChange(val){
                console.log(val)
            },
            //获取echart的值
            initEchart(idName, optionName) {
                const chart = this.$refs[idName]
                //   console.log(chart)
                if (chart) {
                    const myChart = echarts.init(document.getElementById(idName))
                    // myChart.showLoading({
                    //     text: "图表数据正在努力加载..."
                    // });
                    
                    myChart.setOption(optionName)
                    window.addEventListener('resize', function() {
                    myChart.resize()
                    })
                }
            },
            // province,data
            handlerMapEchartOption(province,data){
                
                var res = [];
                for (var j = 0; j < data.length; j++) {
                    res.push({
                        name: province[j],
                        value: data[j]
                    });
                }
                console.log(res)
                // res.sort(function(a, b) {
                //     // console.log(a,b)
                //     return a.value - b.value;
                // });
                // var res1 = [];
                // var res2 = [];
                // for (var t = 0; t < 10; t++) {
                //     res1[t] = res[res.length - 1 - t].name;
                //     res2[t] = res[res.length - 1 - t].value;
                // }

                var option = {
                    title: {
                        text: '省级地域分布',
                        // subtext: '仅供参考',
                        left: 'left',

                    },
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            return params.name + '：' + params.value
                        },
                    },
                    visualMap: {
                        type: 'piecewise',
                        // text: ['头', '尾'],
                        pieces: [{
                                min: 1002,
                                color: '#73240D'
                            },
                            {
                                min: 501,
                                max: 1001,
                                color: '#BB0000'
                            },
                            {
                                min: 251,
                                max: 500,
                                color: '#BD430A'
                            },
                            {
                                min: 101,
                                max: 250,
                                color: '#E08150'
                            },
                            {
                                min: 11,
                                max: 100,
                                color: '#E9B090'
                            },
                            {
                                min: 1,
                                max: 10,
                                color: '#F2DDD2'
                            },
                            {
                                value: 0,
                                color: '#F1eeee'
                            }
                        ],
                        orient: 'vertical',
                        itemSymbol: 'circle',
                        itemWidth: 20,
                        itemHeight: 20,
                        showLabel: true,
                        seriesIndex: [0],
                        textStyle: {
                            color: '#7B93A7'
                        },
                        bottom: '10%',
                        left: "5%",
                    },
                    grid: {
                        right: '5%',
                        top: '20%',
                        left:'20%',
                        bottom: '10%',
                        width: '20%'
                    },
                    xAxis: {
                        min: 0,
                        // max: 4000,
                        show: false
                    },
                    
                    geo: {
                        map: 'china',
                        // right: '35%',
                        left: '30%',
                        label: {
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                areaColor: '#99FF99'
                            }
                        }
                    },
                    series: [{
                            name: 'mapSer',
                            type: 'map',
                            map: 'china',
                            roam: false,
                            geoIndex: 0,
                            label: {
                                show: false,
                            },
                            data: res
                        }
                    ]
                };
                console.log(option)
                return option
            },
            
            handlerSexOption(data){
                
                var option = {
                
                    color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        show : true,
                    
                    },
                    title: {
                        text: '性别分布',
                        // subtext: '仅供参考',
                        left: 'left',

                    },
                    legend: {
                       
                        type:"scroll",
                        orient: 'vertical',
                        left:'2%',
                        align:'left',
                        top:'middle',
                        textStyle: {
                            color:'#8C8C8C'
                        },
                        height:100
                    },
                    series : [
                        {
                            name:'性别分布',
                            type:'pie',
                            radius : [0, 100],
                            
                        
                            data,
                        }
                    ]
                };
                return option
            },

            handlerAgeOption(data){
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        show : true,
                    
                    },
                    title: {
                        text: '年龄分布',
                        // subtext: '仅供参考',
                        left: 'left',

                    },
                    // grid: {
                    //     right: '5%',
                    //     top: '20%',
                    //     left:'15%',
                    //     bottom: '10%',
                    //     width: '20%'
                    // },
                    legend: {
                       
                        type:"scroll",
                        orient: 'vertical',
                        left:'2%',
                        align:'left',
                        top:'middle',
                        textStyle: {
                            color:'#8C8C8C'
                        },
                        height:200
                    },
                    series: [{
                        type: 'pie',
                        // center: ['30%', '30%'],
                        radius: ['30%', '60%'],
                        minAngle: 10 ,
                        avoidLabelOverlap: true,
                        hoverOffset: 15,
                        itemStyle: {
                            color: (params) => {
                                return colorList[params.dataIndex]
                            }
                        },
                        label: {
                            show: true,
                            position: 'outer',
                            alignTo: 'labelLine',
                            // ·圆点
                            backgroundColor: 'auto',//圆点颜色，auto：映射的系列色
                            height: 0,
                            width: 0,
                            lineHeight: 0,
                            // height,width.lineHeight必须为0
                            distanceToLabelLine: 0,//圆点到labelline距离
                            borderRadius: 2.5,
                            padding: [2.5, -2.5, 2.5, -2.5],
                            /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
                            如：圆点半径为1
                                        borderRadius: 1,
                                        padding: [1, -1, 1, -1]
                            */
                            formatter: '{a|{b}：}{b|{d}%}',
                            rich: {
                                a: {
                                    padding: [0, 0, 0, 10]
                                },
                                b: {
                                    padding: [0, 10, 0, 0]
                                }
                            }
                        },
                        data,
                    }, ]
                }

                return option
            },
            //点击分页
            // sort(pagination, filters, sorter, { currentDataSource }){
            //     console.log(pagination)
            //     this.ipagination.current=pagination.current;
            //     this.ipagination.pageSize=pagination.pageSize;
            //     this.getEchartData()
            // },
            materialTableChange(pagination, filters, sorter, { currentDataSource }){
                console.log(pagination)
                this.materialipagination.current=pagination.current;
                this.materialipagination.pageSize=pagination.pageSize;
                this.getRelativeData()
            },

            tabChange(key){
                console.log(key)
                this.accountIds=undefined;
                this.directionalId=[];
                this.materialId=[];
                if(key==1){
                    this.materialColumns=[...material,...publicColumns]
                }else{
                    this.materialColumns=[...directional,...publicColumns]
                }
                // this.getRelativeData()
            },  

            getEchartData(){
                
                let params=this.handlerParams();
                params.dataType=this.value
                if(params.accountId&&(params.targetIds||params.codes)){
                    this.spinning=true;
                    this.loading=true
                postAction('/ai/analyze/chart/targetOrMaterial',params).then(res=>{
                    console.log(res)
                    this.spinning=false;
                     this.loading=false
                    if(res.success){

                        this.age=res.result.age
                        this.gender=res.result.gender
                        this.region=res.result.region
                        var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
                        
                        let params=this.handlerRegion(province,this.region)
                        console.log(params)
                        this.initEchart('mapEchart',this.handlerMapEchartOption(province,params))
                        
                        
                        let genderData=this.handlerGender(this.gender)
                        this.initEchart('sexEchart',this.handlerSexOption(ageData))

                        
                        let   ageData=this.handlerAge(this.age)
                        this.initEchart('ageEchart',this.handlerAgeOption(ageData))
                        this.spinning=false

                        if(this.tableValue==1){
                            this.tableData=res.result.region
                        }else if(this.tableValue==2){
                            this.tableData=res.result.gender
                        }else if(this.tableValue==3){
                            this.tableData=res.result.age
                        }
                    }
                })
                }

            },

            handlerRegion(province,data){
                
                let value=[];
                switch (this.value) {
                    case 1:
                        province.forEach((ele,index)=>{
                            value=data.map(item=>{
                                if(item.province==ele){
                                    if(item.cost){
                                        return item.cost
                                    }else{
                                        return 0
                                    }
                                }
                                
                            })
                        })
                        
                        break;
                    case 2:
                        province.forEach((ele,index)=>{
                            value=data.map(item=>{
                                if(item.province==ele){
                                    
                                    if(item.photoShow){
                                        return item.photoShow
                                    }else{
                                        return 0
                                    }
                                }
                                 
                            })
                        })
                        break;
                    case 3:
                        province.forEach((ele,index)=>{
                            value=data.map(item=>{
                                if(item.province==ele){
                                    if(item.photoClick){
                                        return item.photoClick
                                    }else{
                                        return 0
                                    }
                                    
                                }
                                
                            })
                        })
                        break;
                    case 4:
                        province.forEach((ele,index)=>{
                            value=data.map(item=>{
                                if(item.province==ele){
                                   if(item.aclick){
                                        return item.aclick
                                    }else{
                                        return 0
                                    }
                                }
                                
                            })
                        })
                        break;
                
                    default:
                        break;
                }
                return value
            },
            handlerGender(data){
                let value=[];
                switch (this.value) {
                    case 1:
                        
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.cost,
                                    name:item.gender
                                }
                            }
                            
                        })
                        
                        
                        break;
                    case 2:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.photoShow,
                                    name:item.gender
                                }
                            }
                            
                        })
                        
                        break;
                    case 3:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.photoClick,
                                    name:item.gender
                                }
                            }
                            
                        })
                        break;
                    case 4:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.aclick,
                                    name:item.gender
                                }
                            }
                            
                        })
                        break;
                
                    default:
                        break;
                }
                return value
            },
            handlerAge(data){
                let value=[];
                switch (this.value) {
                    case 1:
                        
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.cost,
                                    name:item.ageSegment
                                }
                            }
                            
                        })
                        
                        
                        break;
                    case 2:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.photoShow,
                                    name:item.ageSegment
                                }
                            }
                            
                        })
                        
                        break;
                    case 3:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.photoClick,
                                    name:item.ageSegment
                                }
                            }
                            
                        })
                        break;
                    case 4:
                        value=data.map(item=>{
                            
                            if(item.cost){
                                return {
                                    value:item.aclick,
                                    name:item.ageSegment
                                }
                            }
                            
                        })
                        break;
                
                    default:
                        break;
                }
                return value
            },




            getDetailTableData(){
                
                let params=this.handlerParams();
                if(params.accountId&&(params.targetIds||params.codes)){
                    params.dataType=this.tableValue
                    this.loading=true
                    postAction('',params).then(res=>{
                        console.log(res)
                        this.loading=false
                        this.tableData=res.result.list
                    })
                }else{
                   
                }
            },

            getRelativeData(){
                
                let params=this.handlerParams();
                // params.dataType=this.tableValue
                if(params.accountId&&(params.targetIds||params.codes)){
                    this.materialloading=true
                    postAction('/ai/analyze/report/targetOrMaterial',params).then(res=>{
                    console.log(res)
                    this.materialloading=false
                        if(res.success){
                            this.materialtableData=res.result.list
                            this.ipagination.total=res.result.total;
                        }else{
                            this.$message.error('出错了')
                        }
                        

                    })
                }else{
                    this.$message.error('请选择账户、策略等信息')
                }
                
            },

            search(){
                
                this.getRelativeData()
                
                this.getEchartData()
            },

            handlerParams(){
                let params={};
                params.accountId=this.accountIds
                if(this.tabKey==1){
                    if(this.directionalId&&this.directionalId.length){
                        params.type='target'
                        params.strategyId=this.directionalId[0].split('_')[0]
                        params.targetIds=this.directionalId.map(item=>{
                            return item.split('_')[1]
                        })
                    }
                    
                }else{
                    params.type='material'
                    if(this.materialId&&this.materialId.length){
                        params.strategyId=this.materialId[0].split('_')[0]
                        params.codes=this.materialId.map(item=>{
                            return item.split('_')[1]
                        })
                    }
                    
                }
                if(this.dateRange&&this.dateRange.length>0){
                    params.startDate=this.dateRange[0].format('YYYY-MM-DD')
                    params.endDate=this.dateRange[1].format('YYYY-MM-DD')
                }
                params.pageNo=this.ipagination.current;
                params.pageSize=this.ipagination.pageSize
                return params
            }
        },

        
        mounted() {
            // this.$nextTick(()=>{
            //     var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
            //     var data = [3554, 241, 296, 221, 206, 152, 147, 121, 109, 108, 99, 91, 80, 80, 58, 48, 56, 51, 43, 37, 34, 27, 24, 24, 16, 13, 12, 9, 9, 6, 0, 7, 8, 8]
            //     this.initEchart('mapEchart',this.handlerMapEchartOption(province,data))

            //     var data1=[
            //         {value:20, name:'男'},
            //         {value:30, name:'女'},
            //         {value:25, name:'其他'},
                    
            //     ]

            //     this.initEchart('sexEchart',this.handlerSexOption(data1))

            //     var data2= [
            //         {
            //             name: 'first',
            //             value: 1
            //         }, {
            //             name: 'second',
            //             value: 2
            //         }, {
            //             name: 'third',
            //             value: 3
            //         }, {
            //             name: 'fourth',
            //             value: 4
            //         }, {
            //             name: 'fifth',
            //             value: 5
            //         }, {
            //             name: 'sixth',
            //             value: 6
            //         }]
            //     this.initEchart('ageEchart',this.handlerAgeOption(data2))

            // })
            let userInfo=localStorage.getItem('pro__Login_Userinfo');
            let userId=''
            if(userInfo){
                this.userId=JSON.parse(userInfo).value.id
            }
            getAction('/ctop/userAllocation/getAccountIdsByUserId',{
                userId:this.userId,
            }).then(res=>{
                console.log(res)
                if(res.success){
                    this.accountList=res.result
                }
            })
            
        },
        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="scss">
     .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
        background-color: #fff;
        color: #333;
    }

</style>
<style lang="scss" scoped>
.autoLaunchReport {
    background-color: #fff;
    padding: 10px 20px;
    position: relative;
    width: 100%;
    .OptinItem{
        display: inline-block;
        margin-right: 15px;
        margin-top: 15px;
        .ok{
            margin-right: 15px;
        }
    }
    .OptinItem:first-child{
        margin-right: 10px;
    }
    .topOptions{
        padding: 15px 10px;
        .topOpt{
            width: 100%;
            margin-bottom: 10px;
        }
    }
    .optionBtn{
        // display: inline-block;
        float: right;
        .searchBtn{
            // margin-right: 10px;
        }
    }
  .circul{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #32CD32;;
  }

  .show{
    // background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // padding: 0px 15px;
    box-sizing: border-box;

    .showBox {
    width: 19%;
    box-sizing: border-box;    
    padding: 15px 15px;
    background-color: #fff;
    
    .title {
      color: #999;
      font-size: 16px;
      position: relative;
      text-align: center;
      .infotitle{
        padding: 8px 0;
      }
      
      span {
        font-size: 1rem;
        // color: #1890ff;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
      
    }
    .infoNum{
        padding:10px 0;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        span{
          font-weight: 600;
          font-size: 16px;
        }
        .red{
          font-size: 20px;
          font-weight: 600;
          color: red;
        }
        .green{
          display: block;
          text-align: center;
          margin-left: 0.2rem;
          font-size: 14px;
          font-weight: 700;
          color: #32CD32;
          .huanbi{
            // color:#999;
            font-weight: 400;
            font-size: 14px;
          }
        }
      }
    
  }
  }
  .chartBox{
    background-color: #fff;
    margin: 15px 0px;
    padding: 2px 10px 30px;
    .chartBody{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
  }
  .tableBox{
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 0px;
    .tableTop{
      position: relative;
      padding: 20px 0;
      border-top: 1px solid #e0e0e0;
      font-size: 24px;
      color: black;
      .selectTime{
        margin-right: 20px;
      }
      .add{
          position: absolute;
          top: 0;
          right: 0;
      }
    }
    .tableOpt{
        margin-bottom: 20px;
    }
  }
}

</style>