<template>
    <div class="accountPage">
        <a-spin :spinning="accountPageSpinning">
        <div class="bodyBox accountBody">
            <div class="accountBodyLeft">
                <div class="accountBodyLeftCost">
                    <div class="accountBodyLeftCostLeft">
                        <div class="top">
                            <div class="title" >花费</div>
                            <a-range-picker 
                                v-model="dateValue"
                                style="width:180px;"
                                :allowClear=false
                                :disabled-date="disabledDate"
                                @change="onChange"
                            />
                        </div>
                        <div class="costInfo">
                            <div class="yesterdayInfo">
                                <div style="margin-bottom:8px">上阶段花费</div>
                                <div style="font-size:14px;font-weight:600">{{columnsFixd[0].yesterday | decimalsHandle}}</div>
                            </div>
                            <a-divider type="vertical" />
                            <div class="tongbi">
                                <div style="margin-bottom:8px">同比
                                    <a-tooltip >
                                        <template slot="title">
                                        <span>截止此时与上一阶段的花费同比</span>
                                        </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </div>
                                <div style="font-size:14px;font-weight:600">{{AggregateByHourList.today?AggregateByHourList.today.grew:0}}%</div>
                            </div>
                        </div>
                        <div class="costNum">
                            {{columnsFixd[0].today | decimalsHandle}}
                        </div>
                    </div>
                    <div class="accountBodyLeftCostRight">
                        
                        <div class="gaugeEchart" id="gaugeEchart"  style='width:100%;height:200px;margin:0 auto' ref="gaugeEchart">
                            <a-empty  />
                        </div>
                    </div>
                </div>
                <div class="accountBodyLeftOther">
                    <span class="showIndex" @click="showIndexChangeBox">显示指标</span>
                    <div class="top">                       
                        <div class="item" v-for="(item,index) in columns" :key='item.dataIndex' v-show="index>0">
                            <div class="todyCost">
                                <span v-if="item.type=='double'">{{item.today | decimalsHandle}}</span>
                                <span v-else-if="item.type=='string'">{{item.today +'%'}}</span>
                                <span v-else-if="item.type=='int'">{{item.today | formatCurrency}}</span>
                                <span class="sign">
                                    <a-icon type="rise"  class="rise" v-show="item.today-item.yesterday>0"/>
                                    <a-icon type="fall" class="fall" v-show="item.today-item.yesterday<0" />
                                </span>
                            </div>
                            <div class="yesterdayCost">
                                <a-tooltip >
                                    <template slot="title">
                                    <span>
                                        {{dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')?moment(dateValue[0]).subtract(1,'days').format('YYYY-MM-DD'):dateStringShow}}
                                        的{{item.title}}
                                    </span>
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>：
                                <span v-if="item.type=='double'">{{item.yesterday | decimalsHandle}}</span>
                                <span v-else-if="item.type=='string'">{{item.yesterday +'%'}}</span>
                                <span v-else-if="item.type=='int'">{{item.yesterday | formatCurrency}}</span>
                            </div>
                            <span class="IndexName" :class="{'IndexNameActive':isActive==item.dataIndex}"  @click="getActiveIndexName(item)">
                                <a-tooltip >
                                    <template slot="title">
                                    <span>{{item.title}}</span>
                                    </template>
                                    <span  style="display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px">{{item.title}}</span>
                                </a-tooltip>
                                
                            </span>
                        </div>
                    </div>
                    <div class="echart" style="margin-top:20px;position:relative">
                        <div style="position:absolute;right:5px;top:-15px">
                            更新时间：{{updateAccountEchart||'-'}}
                        </div>
                        <a-spin :spinning="accountIndexEchartSpinning">
                            <div class="accountIndexEchart" id="accountIndexEchart"  style='width:100%;height:150px;margin:0 auto;' ref="accountIndexEchart">
                                 <a-empty  />
                            </div>
                        </a-spin>
                    </div>
                </div>
            </div>
            <div class="accountBodyRight">
                <div class="accountBodyRighTitle" @click="changeAccount">
                    <h1>{{currentAccount.accountName}}<a-icon type="down" style="font-size:14px" /></h1>
                    <div class="accountBodyRighTitleID">账户ID：{{currentAccount.accountId || accountId}}</div>
                </div> 
                <div class="accountBodyRightInfo">
                    <div class="accountBodyRightInfoItem">
                        <span class="name">余额：</span>
                        {{currentAccount.totalBalance |decimalsHandle }}
                    </div>
                    <div class="accountBodyRightInfoItem">
                        <span class="name">投放状态：</span>
                        {{currentAccount.statusStr}}
                    </div>
                    <div class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
                        <span class="name">被拒创意数：</span>
                        {{currentAccount.rejectedCounts}}<a-icon type="right" style="font-size:12px;position:absolute;right:10px;top:16px"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="bodyBox planBody">
            <div class="planBodyLeft">
                <div class="title">
                    <div class="titleContext">
                        <span class="spot"> </span>
                        广告上新
                        <span class="titleTip">该广告账户近七天上新数据</span>
                    </div>
                </div>
                <div class="echart">
                    <a-spin :spinning="planBodyEchartSpinning">
                    <div class="newDataEchart" id="newDataEchart"  style='width:100%;height:350px;margin:0 auto;padding: 0 10px' ref="newDataEchart">
                          <a-empty  />
                    </div>
                    </a-spin>
                </div>
            </div>
            <div class="planBodyRight">
                <div class="title">
                    <div class="titleContext">
                        <span class="spot"> </span>
                        投放数据
                        <span class="titleTip">更新时间：{{data.length?data[0].updateTime: '-'}}</span>
                    </div>
                </div>
                <div class="table" style="height:400px">
                    <a-table
                    :columns="newColumns"
                    :data-source="data"
                    :ellipsis='true'
                    :pagination="ipagination"
                    :loading="loading"
                    @change="sort"
                    :scroll="{ x: 950,y:280}"
                    size='middle'
                    style="font-size:14px">
                    <div style='' slot="unitName" slot-scope="text">
                        <a-tooltip placement="topLeft">
                            <template slot="title" >
                                <!-- style="width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;" -->
                                <div >
                                    {{ text}}
                                </div>
                            </template>
                            {{text}}
                        </a-tooltip>
                    </div>
                    <span slot="unitStatus" slot-scope="text,record">
                        <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked='text==1'  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>    
                        
                    </span>
                    
                    <span slot="bid" slot-scope="text">
                        {{text?text/1000:0}}
                    </span>
                    <span slot="grew" slot-scope="text">
                        {{text?text+'%':0+'%'}}
                    </span>
                    <span slot="authName" slot-scope="text">
                        <!-- <a href="javascript:;" >{{text}}</a> -->
                        {{text || '-'}}
                    </span>
                    <span slot="time" slot-scope="text,record">
                        {{record.startTime}}至{{record.endTime}}
                    </span>
                    <span slot="operator" slot-scope="text,record">
                        <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
                            <span slot="title">修改出价</span>
                            <template  slot="content" style="width:300px;">
                                <div style="margin:5px 0 0;padding: 0 0 15px;">
                                    <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
                                    <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
                                </div>
                                
                                <div>
                                    <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
                                    <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
                                </div>
                                
                            </template>
                            <a href="javascript:;"  type='primary' @click="()=>{record.visible=true}">调价</a>
                        </a-popover>
                        <a-divider type="vertical" />
                        <a-dropdown :trigger="['click']">
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">更多</a>
                            <a-menu slot="overlay">
                            <a-menu-item>
                                <span href="javascript:;"  @click="editTarget(record)">修改定向</span>
                            </a-menu-item>
                            <a-menu-item>
                                <span href="javascript:;" @click="editLink(record)">修改链接</span>
                            </a-menu-item>
                            
                            </a-menu>
                        </a-dropdown>
                    </span>

                </a-table>
                </div>
            </div>
        </div>
        <div class="bodyBox materialBody">
            <div class="dataPicker">
                <a-range-picker 
                    v-model="materialDate"
                    style="width:200px;"
                    :allowClear=false
                    :disabled-date="disabledDate"
                    @change="materialDataChange"
                />
            </div>           
            <div class="materialBodyLeft">
                <div class="title">
                    <div class="titleContext">
                        <span class="spot"> </span>
                        素材相关
                        <a-tooltip >
                            <template slot="title">
                            <div style="margin-bottom:8px">新上素材数：前一日上传的素材数</div>
                            <div style="margin-bottom:8px">有效素材：素材上线14天内消耗超过5000的素材数量</div>
                            <div style="margin-bottom:8px">爆量素材：素材上线7天内消耗超过50000的素材数量</div>
                            <div >素材总数：账户的素材总数</div>
                            </template>
                            <a-icon type="question-circle" />
                        </a-tooltip>
                        <span class="titleTip">更新时间：{{materialBodyUpdateTime || '-'}}</span>
                    </div>
                </div>
                <div class="echart">
                    <a-spin :spinning="materialBodyEchartSpinning">
                    <div class="materialEchart" id="materialEchart"  style='width:100%;height:350px;margin:0 auto;' ref="materialEchart">
                          <a-empty  />
                    </div>
                    </a-spin >
                </div>
            </div>
            <a-divider type="vertical" />
            <div class="materialBodyRight">
                <div class="table">
                    <a-table
                    :columns="materialColumns"
                    :data-source="materialData"
                    :scroll="{ x: 950,y:260}"
                    :pagination="materialIpagination"
                    :loading="materialLoading"
                    @change="materialChange"
                    size='middle'
                    style="font-size:14px">
                    
                    <span slot="coverUrl" slot-scope="text,record" >  
                        <div style="background:#e8e8e8;text-align:center;border-radius:3px">
                            <a-popover placement="right">
                            <template slot="content">                                
                                <video :src="record.url" style="width:250px" controls  ></video>
                            </template>
                            <template slot="title">                            
                            </template>
                            <img :src="text" alt="" style="width:20px">
                        </a-popover>
                        </div>                      
                        
                        
                    </span>
                    <span slot="bid" slot-scope="text">
                        {{text/1000 }}
                    </span>
                    <span slot="charge" slot-scope="text"> {{text | decimalsHandle}} </span>
                    <span slot="phototShow" slot-scope="text"> {{text | formatCurrency}} </span>
                    <span slot="activation" slot-scope="text"> {{text | formatCurrency}} </span>
                    <span slot="activationCost" slot-scope="text"> {{text | decimalsHandle}} </span>
                    <span slot="stateDate" slot-scope="text">
                        {{text || '暂无'}}
                    </span>
                    
                </a-table>
                </div>
            </div>
        </div>
        <div class="bodyBox targetBody">
            <div class="title">
                    
                    <a-select size="default" v-model="echartIndex" style="width: 150px" @change="echartIndexChange">
                        <a-select-option v-for="item in indexValue" :key="item.value" :value='item.value'>
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                    <span class="titleTip">该处展示前天起七天数据</span>
                    
                </div>
            <a-spin :spinning="targetBodyEchartSpinning">
            <div class="dataMode">
                <div class="adPositionMode">
                    <div class="title">
                        <div class="titleContext">
                            <span class="spot"> </span>
                            分版位数据
                            <span class="titleTip" style="font-size:12px;margin-left:10px">数据与消耗存在一定误差</span>
                        </div>
                    </div>
                    <div class="eachrt">
                        <a-spin :spinning="adPositionEchartSpinning">
                        <div class="adPositionEchart" id="adPositionEchart"  style='width:100%;height:350px;margin:0 auto;' ref="adPositionEchart">
                              <a-empty  />
                        </div>
                        </a-spin >
                    </div>
                </div>
                <a-divider type="vertical" />
                <div class="ageMode">
                    <div class="title">
                        <div class="titleContext">
                            <span class="spot"> </span>
                            分年龄数据
                            <!-- <span class="titleTip" style="font-size:12px;margin-left:10px">数据与消耗存在一定误差</span> -->
                        </div>
                    </div>
                    <div class="eachrt">
                        <a-spin :spinning="ageEchartSpinning">
                        <div class="ageEchart" id="ageEchart"  style='width:100%;height:350px;margin:0 auto;' ref="ageEchart">  <a-empty  /></div>
                        </a-spin >
                    </div>
                </div>
                <a-divider type="vertical" />
                <div class="genderMode">
                    <div class="title">
                        <div class="titleContext">
                            <span class="spot"> </span>
                            分性别数据
                            <!-- <span class="titleTip" style="font-size:12px;margin-left:10px">数据与消耗存在一定误差</span> -->
                        </div>
                    </div>
                    <div class="eachrt">
                        <a-spin :spinning="genderEchartSpinning">
                        <div class="genderEchart" id="genderEchart"  style='width:100%;height:350px;margin:0 auto;' ref="genderEchart">
                            <a-empty  />
                        </div>
                        </a-spin >
                    </div>
                </div>  
            </div>
            </a-spin>
        </div>
        </a-spin>


        <!-- 修改检测链接的modal -->
        <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' :height='400' @cancel='linkhandleCancel'>
            <div class="linkBody">
                <a-row>
                    <a-col :span="4">
                        <div style="text-align:right">第三方检测链接：</div>
                    </a-col>
                    <a-col :span="18">
                        <span>{{oldLink || '-'}}</span>
                    </a-col>
                </a-row>
                <div style="margin-bottom:20px"></div>
                <a-row>
                    <a-col :span="4">
                        <div style="text-align:right">修改链接：</div>
                    </a-col>
                    <a-col :span="18">
                        <a-input placeholder="请输入监测链接" style="300px"  v-model="newLink"/>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
        <!-- 修改定向的modal -->
        <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
            <div class="linkBody">
                
 
                <a-row>
                    <a-col :span="6">
                        <div style="text-align:right">修改定向包：</div>
                    </a-col>
                    <a-col :span="16">
                        <a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
                            <a-select-option v-for="i in directionalList" :key="i.templateId" :value='i.templateId'>
                                {{ i.templateName }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                </a-row>               
            </div>
        </a-modal>
        <!-- 修改账户modal -->
        <a-modal v-model="accountVisible" title="切换账户" @ok="accounthandleOk" :width='800' @cancel='accountCancel' >
            <div class="linkBody" style='height:100px;display:flex;'>
                <!-- <a-input-search style="margin-bottom: 8px;width:500px" placeholder="Search" v-model="searchValues"  @change="searchChange" />
                <a-tree
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :tree-data="gData"
                @expand="onExpand"
                @select="accountSelect"
                
                >
                <template slot="title" slot-scope="{ title }">
                    <span v-if="title.indexOf(searchValue) > -1">
                        {{ title.substr(0, title.indexOf(searchValue)) }}
                        <span style="color: red">{{ searchValue }}</span>
                        {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                    </span>
                    <span v-else>{{ title }}</span>
                </template>
                </a-tree> -->
                <div style="height:32px;line-height:32px">选择账户：</div>
                <Treeselect :appId.sync="selectaccountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:600px " />     
            </div>
        </a-modal>
        <customColumn :visible='visible'  :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='2'  @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
    </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import customColumn from './modules/customColumn.vue'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import qs from 'qs'
// 引入基本模板
var echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/chart/map')
require('echarts/lib/chart/gauge')
// 引入提示框和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')
import { mapGetters } from 'vuex'
const newColumns = [
  
  
   {
    title: '组/计划名称',
    dataIndex: 'unitName',
    key: 'unitName',
    align: 'center',
    scopedSlots: { customRender: 'unitName' }, 
    width:120,
    // fixed:'left',
    ellipsis:true
  },
  {
    title: '花费',
    dataIndex: 'charge',
    key: 'charge',
    align: 'center',
    scopedSlots: { customRender: 'charge' },   
    sorter:() => {}
  },
  
  {
    title: '环比',
    dataIndex: 'grew',
    key: 'grew',
    align: 'center',
    scopedSlots: { customRender: 'grew' },
        
  },
  {
        title: '出价',
        dataIndex: 'bid',
        align: 'center',    
        scopedSlots: { customRender: 'bid' },
        sorter:() => {}
    },
  {
        title: '激活数',
        dataIndex: 'activation',
        align: 'center',    
        scopedSlots: { customRender: 'activation' },
        sorter:() => {}
        
    },
  {
        title: '激活成本',
        dataIndex: 'activationCost',
        align: 'center',    
        scopedSlots: { customRender: 'activationCost' },
        sorter:() => {}
        
    },
    {
    title: '状态操作',
    dataIndex: 'unitStatus',
    key: 'unitStatus',
    align: 'center',
    scopedSlots: { customRender: 'unitStatus' },
    
    
  },
 {
    title: '操作',
    dataIndex: 'operator',
    key: 'operator',
    align: 'center',
    scopedSlots: { customRender: 'operator' },
    
  },

];
const materialColumns = [
  
  
   {
    title: '素材',
    dataIndex: 'coverUrl',
    key: 'coverUrl',
    align: 'center',
    scopedSlots: { customRender: 'coverUrl' }, 
    width:100,
    fixed:'left',  
  },
  {
    title: '素材ID',
    dataIndex: 'signature',
    key: 'signature',
    width:150,
    align: 'center',
    scopedSlots: { customRender: 'signature' },   
  },
  
  {
    title: '曝光数',
    dataIndex: 'photoShow',
    key: 'photoShow',
    align: 'center',
    scopedSlots: { customRender: 'photoShow' },
        sorter:() => {}
  },
  {
        title: '花费',
        dataIndex: 'charge',
        align: 'center',    
        scopedSlots: { customRender: 'charge' },
        sorter:() => {}
    },
  {
        title: '激活数',
        dataIndex: 'activation',
        align: 'center',    
        scopedSlots: { customRender: 'activation' },
        sorter:() => {}
        
    },
  {
        title: '激活成本',
        dataIndex: 'activationCost',
        align: 'center',    
        scopedSlots: { customRender: 'activationCost' },
        sorter:() => {}
        
    },
//   {
//         title: '关联创意',
//         dataIndex: 'openProgragmCreafte',
//         align: 'center',    
//         scopedSlots: { customRender: 'openProgramCrgheate' },
//         // sorter:() => {}
        
//     },
  {
        title: '上线时间',
        dataIndex: 'stateDate',
        align: 'center',    
        scopedSlots: { customRender: 'stateDate' },
        // sorter:() => {}
        
    },
    

];

const indexValue = [
    {
        label:'花费',
        value:'charge',
        type:'pie',
    },
    {
        label:'激活数',
        value:'activation',
        type:'pie',
        
    },
    {
        label:'激活成本',
        value:'activationCost',
        type:'line',
    },
    {
        label:'ROI',
        value:'eventPayRoi',
        type:'line',
    },
    {
        label:'付费次数',
        value:'eventPay',
        type:'pie',
    },
    {
        label:'付费金额',
        value:'eventPayPurchaseAmount',
        type:'pie',
    },
    {
        label:'付费成本',
        value:'eventPayCost',
        type:'line',
    },
    {
        label:'次留数',
        value:'eventNextDayStay',
        type:'pie',
    },
    {
        label:'次留成本',
        value:'eventNextDayStayCost',
        type:'line',
    },
]
    
const columnsFixd = [
    {
        title: '消耗',
        dataIndex: 'charge',     
        key:'date',
        today:0,
        yesterday:0,

    },
  
]

const columns=[
    {
        title: '激活成本',
        dataIndex: 'activationCost',     
        key:'activationCost',
        today:0,
        yesterday:0,
        type:'double'
    },
    {
        title: '激活数',
        dataIndex: 'activation',     
        key:'activation',
        today:0,
        yesterday:0,
        type:'int'
    },
    {
        title: '行为数',
        dataIndex: 'bclick',     
        key:'bclick',
        today:0,
        yesterday:0,
        type:'int'
    },
    {
        title: '表单提交数',
        dataIndex: 'formCount',     
        key:'formCount',
        today:0,
        yesterday:0,
        type:'int'
    },
]




    export default {
        name:'accountPage',
         components:{ 
            // DatePicker,
            customColumn,
            Treeselect
        },
        data() {
            return {
                dateStringShow:'',//为了账户哪儿的问号显示对应段时间
                updateAccountEchart:'',//账户图标的更新时间
                selectaccountId:'',
                adPositionEchartSpinning:false,
                ageEchartSpinning:false,
                genderEchartSpinning:false,
                accountId:'',
                searchValue:'',
                searchValues:'',
                accountVisible:false,
                expandedKeys: [],
                autoExpandParent: true,
                gData:[],
                dataList:[],


                AggregateByHourList:[],

                columnsFixd,
                columns:[...columnsFixd,...columns],
                visible:false,
                listNum:[],
                newLink:'',
                linkVisible:false,
                targetVisible:false,
                isActive:'activationCost',
                moment,
                materialDate:[moment().subtract(1,'days'),moment().subtract(1,'days')],
                currentAccount:{},
                dateValue:[moment(),moment()],
                data:[],
                newColumns:[...newColumns],           
                loading:false,
                ipagination: {
                    current: 1,
                    pageSize: 10,
                    //   pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger:false,
                    pageSizeOptions: ['10', '30', '50'],
                    total: 0,
                    onChange: (current, pageSize) => {
                        // 切换分页时的回调，
                        // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                        this.ipagination.current = current;
                        this.ipagination.pageSize= pageSize;
                    }
                },
                bidErrorMessage:'',
                newBid:undefined,

                materialColumns,
                materialData:[],
                materialLoading:false,
                materialIpagination:{
                    current: 1,
                    pageSize: 10,
                    //   pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger:false,
                    pageSizeOptions: ['10', '30', '50'],
                    total: 0,
                    onChange: (current, pageSize) => {
                        // 切换分页时的回调，
                        // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                        this.materialIpagination.current = current;
                        this.materialIpagination.pageSize= pageSize;
                    }
                },


                indexValue,
                timeDimension:'a',
                echartIndex:'charge',


                accountIndexEchartSpinning:false, //账户模块的指标的echart
                targetBodyEchartSpinning:false,
                materialBodyEchartSpinning:false,
                materialBodyUpdateTime:'',
                planBodyEchartSpinning:false,


                newDataSortCode:'charge',
                newDataSortType:'DESC',
                materialSortCode:"charge",
                materialSortType:'DESC',
                currentUnit:{},
                directionalList:[],
                selectDirectionalId:undefined,
                oldLink:'',//原先的检测链接

                accountPageSpinning:false,
            }
        },
        watch:{
            accountId(n,o){
                if(n){
                    this.echartIndex='charge';
                    this.getColumnsByAccountId();

                    
                    this.getAgeData();
                    this.getNewlyCounts();
                    
                    this.getLaunchData();
                    this.getMaterialOverview();
                    this.getSceneData();
                    this.getGenderData()
                    this.getMaterialData()
                    
                    this.getCurrentAccountInfo()
                }
            }
        },
        methods: {
            ...mapGetters([ 'userInfo']),
            // 跳转到拒审重提-创意页面
            gorejectCreativePage(){
              
                this.$router.push(`/Statistics/refuseDataCreatNew?accountId=${this.accountId}`)
            },
            // 点击修改定向
            editTarget(record){
                // console.log(res);(record);
                this.currentUnit=record;
                this.targetVisible=true;

                getAction('/batch/kuaishouTemplate/list',{
                    accountId:this.accountId,
                }).then(res=>{
                    // console.log(res);(res);
                    if(res.result){
                        this.directionalList=res.result
                    }
                })
                
            },
            editLink(record){
                this.currentUnit=record;
                this.linkVisible=true;
                getAction('/kuaishou/dingpan/getClickTrackUrlByUnitId',{
                    accountId:this.accountId,
                    unitId:record.unitId
                }).then(res=>{
                    // console.log(res);(res);
                    if(res.result){
                        this.oldLink=res.result
                    }
                })
            },
            changeAccount(){
                this.accountVisible=true;
               
            },
            accounthandleOk(){
                this.accountVisible=false;
                this.dateValue=[moment(),moment()];
                this.materialDate=[moment().subtract(1,'days'),moment().subtract(1,'days')]
                this.accountId=this.selectaccountId;
                
                // this.getCurrentAccountInfo();
            },
            accountCancel(){                
                this.accountVisible=false;
                
            },
            

            //自定义之后修改父元素表头
            changeColumn(val){
                if(this.AggregateByHourList.today && this.AggregateByHourList.yesterday){
                    val.forEach(item=>{
                        item.today=this.AggregateByHourList.today?this.AggregateByHourList.today[item.dataIndex]:0;
                        item.yesterday=this.AggregateByHourList.yesterday?this.AggregateByHourList.yesterday[item.dataIndex]:0
                    })
                    this.columns=[...val];
                    let arr = JSON.stringify(this.columns)
                    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJsonByAccountId', {
                        json: arr,
                        columnType: 10,
                        accountId:this.accountId
                    }).then(res => {
                    // // console.log(res);(res)
                    })

                   this.isActive=this.columns[1].dataIndex
                   
                    this.getAccountIndexData()
                    
                }else{
                    // this.$message.error('暂无数据，不支持修改自定义列')
                    this.columns=[...val];
                    let arr = JSON.stringify(this.columns)
                    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJsonByAccountId', {
                        json: arr,
                        columnType: 10,
                        accountId:this.accountId
                    }).then(res => {
                    // // console.log(res);(res)
                    })
                    this.isActive=this.columns[1].dataIndex
                   
                    this.getAccountIndexData()
                }
                
            },
            getColumnsByAccountId(){
                postAction('/toutiao/videoReportDaily/getColumnJsonByAccountId', {
                    columnType: 10,
                    accountId:this.accountId
                }).then(res => {
                // // console.log(res);(res)
                if (res.success) {
                    // // console.log(res);(JSON.parse(res.result))
                    if(res.result){
                        let columns = JSON.parse(res.result)
                        if (columns.length) {
                        if (columns.length >= columnsFixd.length) {
                            
                            columns = columns.slice(columnsFixd.length)
                            columns.forEach(item=>{
                                item.today=0;
                                item.yesterday=0;
                            })
                            this.columns = [...columnsFixd, ...columns]
                        
                            
                        }

                        // // console.log(res);(this.columns)
                        }
                        this.isActive=this.columns[1].dataIndex
                    }
                    this.changeColumn(this.columns);
                    this.getAccountIndexData()
                    this.getAllIndex()

                }
                })
            },
            closeCustomColumn(){
                this.visible=false;
            },
             //弹出框打开，自定义列
            customColumns() {
                this.visible = true
                this.listNum = [...this.columns]
            },
            // 监测链接修改OK事件
            linkhandleOk(e){
                this.linkVisible=false;
                getAction('/kuaishou/dingpan/updateClickTrackUrlByUnitId',{
                    accountId:this.accountId,
                    unitId:this.currentUnit.unitId,
                    clickTrackUr:this.newLink
                }).then(res=>{
                    // console.log(res);(res)
                    this.newLink='';
                    if(res.success){
                        this.$message.success('修改成功')
                    }else{
                        this.$message.error('修改失败，请重试')
                    }
                })
            },
            linkhandleCancel(){
                this.linkVisible=false;
                this.newLink='';
            },
            // 定向包修改OK事件
            targethandleOk(e){
                this.targetVisible=false;
                getAction('/kuaishou/dingpan/updateTemplate',{
                    accountId:this.accountId,
                    unitId:this.currentUnit.unitId,
                    templateId:this.selectDirectionalId
                }).then(res=>{
                    
                    if(res.success){
                        this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                    this.selectDirectionalId=undefined
                })
            },
            targethandleCancel(){
                this.targetVisible=false;
                this.selectDirectionalId=undefined
            },

            getActiveIndexName(val){
                this.isActive=val.dataIndex;
                this.getAccountIndexData()
            },
            showIndexChangeBox(){
                this.visible=true;
                this.listNum = [...this.columns]
            },
            disabledDate(current) {
                return current  && !(current > (moment().subtract(1,'months')) && current < moment())
            }, 
            onChange(date, dateString) {                
                // console.log(date, dateString);
                this.getAllIndex();
                this.getAccountIndexData();

                if(dateString.length>0&&dateString[0]!=dateString[1]){
                    let interval=date[1].diff(date[0],'days')
                    // console.log(interval);
                    this.dateStringShow=`${moment(date[0]).subtract(1+interval,'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1,'days').format('YYYY-MM-DD')}`
                    // console.log(this.dateStringShow)
                }
            },
            materialDataChange(date, dateString){
                // console.log(res);(date, dateString);
                this.materialIpagination.current=1
                this.getMaterialData()
                // this.getMaterialOverview()
            },
            initAccountIndexEchart(type,data){
                // let type='激活'
                // console.log(res);(data)
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        // `${type}<br />{a0}  {b0}: {c0}<br />{a1}  {b1}: {c1}`
                        formatter: (params)=>{
                            // console.log(params);
                            let isType=''
                            this.columns.forEach((item=>{
                                if(item.dataIndex==this.isActive){
                                    isType=item.type
                                }
                            }))
                            let isString= isType=='string'?'%':''
                            let option=type+'<br/>';

                            for (var i = 0, length = params.length; i < length; i++) {
                                
                                option +=`<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>`+ params[i].seriesName + ' '+ params[i].axisValue + '  '+params[i].data + isString +'<br />'
                            }
                            
                            return option
                        }
                    },
                    grid:{
                        left:'5px',
                        top:0,
                        right:'5px',
                        bottom:0
                    },
                    xAxis:[
                        {
                            type: 'category',
                            show:false,
                            boundaryGap: false,
                            data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisPointer: {
                                type: 'none'
                            },
                            
                        },
                        {
                            type: 'category',
                            show:false,
                            boundaryGap: false,
                            data: ['1', '2', '3', '4', '5', '6', '7'],
                            axisPointer: {
                                type: 'none'
                            },
                        },
                    ] ,
                    yAxis: {
                        type: 'value',
                        show:false,
                    },
                    series: [
                        {
                        name: '昨天',
                        data: [100, 290, 204, 258, 105, 117, 290],
                        type: 'line',
                        smooth: true,
                        xAxisIndex: 0,
                        showSymbol: false,
                        symbol: 'circle',
                        lineStyle: {                               
                            color: '#3CC6A5',   
                            width: 3,
                        },
                        itemStyle:{
                            color:'#3CC6A5',
                            borderWidth:2,
                            borderColor:'#fff'
                        },
                        
                    },
                        {
                        name: '今天',
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 1,
                        symbol: 'circle',
                        lineStyle: {                               
                            color: '#2461F1',   
                            width: 3,
                        },
                        itemStyle:{
                            color:'#2461F1',
                            borderWidth:2,
                            borderColor:'#fff'
                        },
                        areaStyle: {
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#2461F1' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'white' // 100% 处的颜色
                                }],
                            }
                        }
                    },
                    
                    ]
                };
                //单一天数
                // console.log(data)
                
                if(this.dateValue[0].format('YYYY-MM-DD')==this.dateValue[1].format('YYYY-MM-DD')){
                    option.xAxis[0].data=data.xData;
                    option.xAxis[1].data=data.xData;

                }else {
                    // 时间段
                    // let xdata=[]
                    option.xAxis[0].data=data.xData?data.xData.yesterday:[]
                    option.xAxis[1].data=data.xData?data.xData.today:[]
                   
                } 
                option.series[0].name=data.yData?data.yData.yesterday.name:''
                option.series[1].name=data.yData?data.yData.today.name:''
                option.series[0].data=data.yData?data.yData.yesterday.data:[]
                option.series[1].data=data.yData?data.yData.today.data:[] 
                // console.log(option)
                return option
            },  

            

            initGaugechart(value){
                var dataArr = value;
                var colorSet = {
                    color: '#fff'
                };
                let option = {
                    // backgroundColor: '#0E1327',
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },

                    series: [
                        {
                            name: "内部进度条",
                            type: "gauge",
                            // center: ['20%', '50%'],
                            radius: '40%',

                            splitNumber: 10,
                            axisLine: {
                                lineStyle: {
                                    color: [
                                        [dataArr / 100 || 0, colorSet.color],
                                        [1, "#111F42"]
                                    ],
                                    width: 8
                                }
                            },
                            axisLabel: {
                                show: false,
                            },
                            axisTick: {
                                show: false,

                            },
                            splitLine: {
                                show: false,
                            },
                            itemStyle: {
                                show: false,
                            },
                            detail: {
                                formatter: function(value) {
                                    if (value !== 0) {
                                        var num = Math.round(value ) ;
                                        return parseInt(num).toFixed(0)+"%";
                                    } else {
                                        return 0;
                                    }
                                },
                                offsetCenter: [0, 52],
                                textStyle: {
                                    padding: [0, 0, 0, 0],
                                    fontSize: 18,
                                    fontWeight: '700',
                                    color: colorSet.color
                                }
                            },
                            title: { //标题
                                show: true,
                                offsetCenter: [0, 80], // x, y，单位px
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 14, //表盘上的标题文字大小
                                    fontWeight: 400,
                                    fontFamily: 'PingFangSC'
                                }
                            },
        
                            data: [{
                                name: "点击-激活率",
                                value: dataArr,
                            }],
                            pointer: {
                                show: true,
                                length: '75%',
                                radius: '20%',
                                width: 3, //指针粗细
                            },
                            animationDuration: 4000,
                        },
                        {
                            name: '外部刻度',
                            type: 'gauge',
                            //  center: ['20%', '50%'],
                            radius: '50%',
                            min: 0, //最小刻度
                            max: 100, //最大刻度
                            splitNumber: 5, //刻度数量
                            startAngle: 225,
                            endAngle: -45,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: [
                                        [1, 'rgba(0,0,0,0)']
                                    ]
                                }
                            }, //仪表盘轴线
                            axisLabel: {
                                show: true,
                                color: '#fff',
                                distance: -20,
                                formatter: function(v) {
                                    switch (v + '') {
                                        case '0':
                                            return '0';
                                        case '10':
                                            return '10';
                                        case '20':
                                            return '20';
                                        case '30':
                                            return '30';
                                        case '40':
                                            return '40';
                                        case '50':
                                            return '50';
                                        case '60':
                                            return '60';
                                        case '70':
                                            return '70';
                                        case '80':
                                            return '80';
                                        case '90':
                                            return '90';
                                        case '100':
                                            return '100';
                                    }
                                }
                            }, //刻度标签。
                            axisTick: {
                                show: true,
                                splitNumber: 5,
                                lineStyle: {
                                    color: colorSet.color, //用颜色渐变函数不起作用
                                    width: 1,
                                },
                                length: -8
                            }, //刻度样式
                            splitLine: {
                                show: true,
                                length: -10,
                                lineStyle: {
                                    color: colorSet.color, //用颜色渐变函数不起作用
                                }
                            }, //分隔线样式
                            detail: {
                                show: false
                            },
                            pointer: {
                                show: false
                            }
                        },
                    ]
                };
                return option
            },
            initNewDataChart(data){
                
                let   option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新上计划数', '新上组数', '新上创意数']
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xdata,
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            onZero: false,
                            show:false,
                            color: '#999',
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    
                    series: [
                        {   
                            name: '新上计划数',
                            data: data.campaign,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            symbol: 'circle',
                            lineStyle: {                               
                                color: '#AC8BF9',   
                                width: 3,
                            },
                            itemStyle:{
                                color:'#AC8BF9',
                                borderWidth:2,
                                borderColor:'#fff'
                            }
                        },
                        {   
                            name: '新上组数',
                            data: data.unit,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            showSymbol: false,
                            lineStyle: {                               
                                color: '#4CA4F9', 
                                width: 3,  
                            },
                            itemStyle:{
                                color:'#4CA4F9',
                                borderWidth:2,
                                borderColor:'#fff',
                                
                            }
                        },
                        {
                            name: '新上创意数',
                            data: data.creative,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            showSymbol: false,
                            lineStyle: {                               
                                color: '#3CC6A5',   
                                width: 3,
                            },
                            itemStyle:{
                                color:'#3CC6A5',
                                borderWidth:3,
                                borderColor:'#fff'
                            }
                        },
                    ]
                };

                return option
            },
            initMaterialChart(data){
                let  option={
                    legend: {
                        data: ['新上计划数', '新上组数', '新上创意数']
                    },
                    grid:{
                        left:'15px',
                        // top:'20px',
                        right:'15px',
                        // bottom:'20px'
                    },
                    xAxis:[
                        {   
                            // ['新上素材数量', '有效素材', '爆量素材','新上素材使用数', '新上素材使用率',''],
                            // name:"a",
                            type: 'category',
                            data: ['新上素材数量', '有效素材', '爆量素材',''],
                            axisLine: {
                                show:false,
                            
                            },
                            axisTick:{
                                show:false,
                            },
                            axisLabel: {
                                interval: 0,      // 坐标轴刻度标签的显示间隔
                                // rotate: 40        // 标签倾斜的角度
                            }
                        },
                        {   
                            // name:"b",
                            // ['素材总数','','','','',''],  对应上面的数据 等要加新上素材使用率时 x轴数据切换为当前注释这个
                            type: 'category',
                            data: ['素材总数','','',''],
                            nameLocation: 'end',
                            axisLine: {
                                show:false,
                            
                            },
                            axisTick:{
                                show:false,
                            },
                            position: 'bottom',
                            inverse: true
                        },
                    
                    
                    ] ,
                    yAxis:[
                        {
                            type: 'value',
                            show:false,
                            axisLine: {
                                onZero: false,
                                show:false,
                                color: '#999',
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                        },
                        {
                            type: 'value',
                            show:false,
                            axisLine: {
                                onZero: false,
                                show:false,
                                color: '#999',
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                            position: 'right',
                            // inverse: true
                        },
                        
                        
                    ] ,
                    
                    series: [
                        {   
                            
                            data: data.data1,
                            type: 'bar',
                            barWidth: '30%',
                            xAxisIndex:0,
                            label:{
                                show:true,
                                position:'top',
                                distance: 10 ,

                            },
                            backgroundStyle:{
                                borderRadius:[2, 2, 0, 0],
                            },
                            itemStyle:{
                                
                                // normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#7820FF'
                                    }, {
                                        offset: 1,
                                        color:  '#3470FF'
                                    }]),
                                    barBorderRadius:[5, 5, 0, 0],
                                // },
                                
                            },
                        },
                        {   
                            
                            data: data.data2,
                            type: 'bar',
                            barWidth: '30%',
                            xAxisIndex:1,
                            yAxisIndex:1,
                            label:{
                                show:true,
                                position:'top',
                                distance: 10 ,

                            },
                            backgroundStyle:{
                                borderRadius:[0, 0, 5, 5],
                            },
                            itemStyle:{
                                
                                // normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#7820FF'
                                    }, {
                                        offset: 1,
                                        color:  '#3470FF'
                                    }]),
                                    barBorderRadius:[5, 5, 0, 0],
                                // },
                                
                            },
                        },
                        
                    ]
                }

                return  option
            },
            // 
            initAdpositionChart(type,data){
                
                // console.log(res);(type,data)
                let indexName='';
                this.indexValue.forEach(item=>{
                    if(item.value==this.echartIndex){
                        indexName= item.label
                    }
                })
                let option={};
                if(type=='line'){
                    option=  this.getLineOption(indexName,data);                   
                    
                }else if( type=='pie'){
                    option= this.getPieOption(indexName,data);
                    
                }
                return option
            },

            getLineOption(name,data){
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                let lineOption = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: ''
                    },
                    legend: {
                        // data: data.legend,
                        orient: 'horizontal',
                        left: '3%',
                        top:'top',
                        icon:'circle'
                    },
                    xAxis: {
                        show:true,
                        type: 'category',
                        data: [moment().subtract(8,'days').format('YYYY-MM-DD'), moment().subtract(7,'days').format('YYYY-MM-DD'), moment().subtract(6,'days').format('YYYY-MM-DD'), moment().subtract(5,'days').format('YYYY-MM-DD'), moment().subtract(4,'days').format('YYYY-MM-DD'), moment().subtract(3,'days').format('YYYY-MM-DD'), moment().subtract(2,'days').format('YYYY-MM-DD')],
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        show:true,
                        axisLine: {
                            onZero: false,
                            show:false,
                            color: '#999',
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    
                    series: [                       
                        
                    ]
                };
                data.yData.forEach((item,index)=>{
                    lineOption.series.push({
                        
                        name: item.name,
                        data: item.data,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        symbol: 'circle',
                        lineStyle: {                               
                            color: colorList[index],   
                            width: 3,
                        },
                        itemStyle:{
                            color:colorList[index],
                            borderWidth:2,
                            borderColor:'#fff'
                        }
                    
                    })
                })
                return lineOption
            },


            getPieOption(name,data){
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                let option = {
                    
                    tooltip: {
                        trigger: 'item',
                        formatter: `${name} <br/>{a} <br/>{b} : {c} ({d}%)`
                    },
                    legend: {
                        // orient: 'vertical',
                        // left: '3%',
                        // top:'center',
                        // icon:'circle'
                        orient: 'horizontal',
                        left: '3%',
                        top:'top',
                        icon:'circle'
                    },
                    toolbox: {
                        show: true,
                        
                    },
                    xAxis: {
                        show:false
                    },
                    yAxis: {
                        show:false
                    },
                    series: [
                        
                    ]
                }
                option.series=[];
                option.series.push(
                    {
                        name:`${moment().subtract(8,'days').format('YYYY-MM-DD')}~${moment().subtract(2,'days').format('YYYY-MM-DD')}`,
                        type: 'pie',
                        radius: ['40%', '70%'],
                        labelLine:{
                            length:5,
                            length2:5
                        },
                        label:{
                            show: false,
                            position:'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        itemStyle: {
                            borderRadius: 5,
                            color: (params) => {
                                return colorList[params.dataIndex]
                            }
                        },
                        data: data
                    }
                )
                return option
            },

            //获取echart的值
            initEchart(idName, optionName) {
                const chart = this.$refs[idName]
                //   // console.log(res);(chart)
                if (chart) {
                    const myChart = echarts.init(document.getElementById(idName))
                    // myChart.showLoading({
                    //     text: "图表数据正在努力加载..."
                    // });
                    myChart.clear()
                    myChart.setOption(optionName)
                    window.addEventListener('resize', function() {
                    myChart.resize()
                    })
                }
            },


            //点击分页
            sort(pagination, filters, sorter, { currentDataSource }){
                // console.log(res);(pagination, filters, sorter)
                this.ipagination.current=pagination.current;
                this.ipagination.pageSize=pagination.pageSize;
                if(sorter.order=="descend"){
                    this.newDataSortType='DESC'
                    this.newDataSortCode=sorter.columnKey
                }else if(sorter.order=="ascend"){
                    this.newDataSortType='ASC'
                    this.newDataSortCode=sorter.columnKey
                }else{
                    this.newDataSortType='DESC'
                    this.newDataSortCode='charge'
                }
                this.getLaunchData()
            },

            materialChange(pagination, filters, sorter, { currentDataSource }){
                // console.log(res);(pagination)
                this.materialIpagination.current=pagination.current;

                this.materialIpagination.pageSize=pagination.pageSize;

                if(sorter.order=="descend"){
                    this.materialSortType='DESC'
                    this.materialSortCode=sorter.columnKey
                }else if(sorter.order=="ascend"){
                    this.materialSortType='ASC'
                    this.materialSortCode=sorter.columnKey
                }else{
                    this.materialSortType='DESC'
                    this.materialSortCode='charge'
                }
                this.getMaterialData()
            },


            visibleChange(){
                this.bidErrorMessage='';
                this.examineAgainType=1;
                this.newBid=undefined;
                
            },
            bidChangeCancel(record){
                record.visible=false;
                this.newBid=undefined;
                this.bidErrorMessage=''
            },
            bidChangeOk(record){
                if(this.newBid){
                    record.visible=false;
                    getAction('/kuaishou/dingpan/updateBid',{
                        accountId:record.accountId,
                        bid:this.newBid*1000,
                        unitId:record.unitId,
                        bidType:record.bidType
                    }).then(res=>{
                        // console.log(res);(res)
                        if(res.code==0){
                            this.$message.success(res.message)
                            this.newBid=undefined;
                            this.getLaunchData()
                        }
                        
                    })
                }else{
                    this.bidErrorMessage='请正确填写出价'
                    // this.$message.error('请正确填写出价')
                }
                
            },
            //状态改变
            switchChange(text,record){
                // this.spinning=true;
                // console.log(res);(text,record)
                record.spin=true;
                
                
                let putStatus=text==1?2:1;
                postAction(`/kuaishou/batch/batchUpdateUnitStatus`,{
                    accountId:this.accountId,
                    unitIds:[record.unitId],
                    id:record.id,
                    putStatus
                }).then((res)=>{
                    
                        record.spin=false;
                    if(res.success){
                        this.getLaunchData()
                        this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                })
            

            },

            // 
            echartIndexChange(val){
                // console.log(res);(`Selected: ${val}`);
                this.getAgeData();
                this.getGenderData();
                this.getSceneData()
            },
            // 获取当日广告组投放数据
            
            getLaunchData(){
                this.loading = true
                // // console.log(res);(this.accountId)
                postAction('/etl/kuaiShouGroupDailyReport/queryPageList',{
                    accountId:this.accountId,
                    sortCode:this.newDataSortCode,
                    sortType:this.newDataSortType,
                    pageNo:this.ipagination.current,
                    pageSize:this.ipagination.pageSize
                }).then((res)=>{
                    this.data=[]
                    // console.log(res);(res)
                    this.loading = false
                    if(res.success){

                        this.ipagination.total = res.result.total
                        
                        res.result.list.forEach((item)=>{
                            item.key=item.id;
                            item.show=false;
                            item.visible=false;
                            item.spin=false;
                        })

                        this.data = res.result.list;

                    }
                })
            },

            getMaterialData(){
                this.materialLoading = true
                // // console.log(res);(this.accountId)
                postAction('/ctop/kuaishouVideoEtlInfo/queryPageList',{
                    accountId:this.accountId,
                    pageNo:this.materialIpagination.current,
                    pageSize:this.materialIpagination.pageSize,
                    sortCode:this.materialSortCode,
                    sortType:this.materialSortType,
                    startTime:this.materialDate[0].format('YYYY-MM-DD'),
                    endTime:this.materialDate[1].format('YYYY-MM-DD')
                }).then((res)=>{
                    this.materialData=[]
                    // console.log(res);(res)
                    this.materialLoading = false
                    if(res.success){

                        this.materialIpagination.total = res.result.total
                        
                        // res.result.list.forEach((item)=>{
                        //     item.key=item.id;
                        //     item.show=false;
                        //     item.visible=false;
                        //     item.spin=false;
                        // })

                        this.materialData = res.result.list;

                    }
                })
            },


            handlerTypeOfIndex(val){
                let type=''
                this.indexValue.forEach(item=>{
                    if(item.value==val){
                        type= item.type
                    }
                })

                return type
            },


            getAllIndex(){
                postAction('/etl/reportAccountHourly/getAggregateByHour',{
                    accountId:this.accountId,
                    startTime:this.dateValue[0].format('YYYY-MM-DD'),
                    endTime:this.dateValue[1].format('YYYY-MM-DD'),
                }).then(res=>{
                    // console.log(res);(res);
                    if(res.success){
                        this.AggregateByHourList=res.result;
                        
                        this.columns.forEach(item=>{
                            item.today=res.result.today?res.result.today[item.dataIndex]:0;
                            item.yesterday=res.result.yesterday?res.result.yesterday[item.dataIndex]:0
                        })
                       let clickOnActivationRatio=res.result.today?res.result.today.clickOnActivationRatio:0
                       this.initEchart('gaugeEchart',this.initGaugechart(clickOnActivationRatio))
                    }
                })
            },

            getAccountId(){
                postAction('/ctop/projectMember/participateListByMediaId',{
                    userId:this.userInfo().id,
                    type :'kuaishou',
                }).then(res=>{
                    // console.log(res);(res);
                    this.accountList=res.result
                })
            },
            


            getCurrentAccountInfo(val){
                this.accountPageSpinning=true
                getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{
                    accountId:val || this.accountId ||undefined,
                   
                }).then(res=>{
                    if(res.success){
                        this.currentAccount=res.result;
                        // this.accountId=res.result.accountId
                        this.accountPageSpinning=false
                    }else{
                        this.accountPageSpinning=false;
                        this.$message.error(res.message)
                        this.currentAccount=res.result;
                    }
                })
            },
            
            // z账户的昨日今日数据趋势图
            getAccountIndexData(){
                let indexName=''
                this.columns.forEach(item=>{
                    if(item.dataIndex==this.isActive){
                        indexName= item.title
                    }
                })
                this.accountIndexEchartSpinning=true
                postAction('/etl/reportAccountHourly/getEtlReportList',{
                    accountId:this.accountId,
                    startTime:this.dateValue[0].format('YYYY-MM-DD'),
                    endTime:this.dateValue[1].format('YYYY-MM-DD'),
                    value:this.isActive,
                }).then(res=>{
                    // console.log(res);(res);
                    this.accountIndexEchartSpinning=false;
                    if(res.success){
                            let data={
                                xData:null,
                                yData:{
                                yesterday:{
                                    name:"",
                                    data:[]
                                },
                                today:{
                                    name:"",
                                    data:[]
                                },
                            }
                        };
                       this.updateAccountEchart=res.result.updateTime
                        
                        // 单天的数据
                     
                        if(res.result.yesterday.length&&res.result.yesterday[0].statHour==0){
                            
                            data.xData=[];
                            data.xData= Array.apply(null, Array(24)).map((item, i)=> {return i<10?`0${i}:00`:`${i}:00`});
                            data.yData.yesterday.name=moment(this.dateValue[0]).subtract(1,'days').format('YYYY-MM-DD');
                            data.yData.today.name=this.dateValue[0].format('YYYY-MM-DD')
                            data.yData.yesterday.data=res.result.yesterday.map((item,index)=>{
                                return item.value?item.value:0
                            })
                            data.yData.today.data=res.result.today.map((item,index)=>{
                                return item.value?item.value:0
                            })
                            data.yData.today.data=Array.apply(null, Array(24)).map((item, i)=> {
                                
                                return data.yData.today.data[i]?data.yData.today.data[i]:0
                            });
                            // console.log(data)
                            this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
                            
                        }else if(res.result.yesterday.length&&!res.result.yesterday[0].statHour){
                            // 时间段的
                           
                            data.xData={};
                            data.xData.yesterday=res.result.yesterday.map(item=>{
                                return item.statDate
                            })
                            data.xData.today=res.result.today.map(item=>item.statDate);

                            data.yData.yesterday.name='';
                            data.yData.today.name='';

                            data.yData.yesterday.data=res.result.yesterday.map(item=>item.value)
                            data.yData.today.data=res.result.today.map(item=>item.value)
                            // console.log(data)
                            this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
                           
                        }else{
                            this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,{}))
                        }
                        
                        
                        this.accountIndexEchartSpinning=false;
                        // setTimeout(()=>{
                        //     this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
                        // },0)
                        
                    }else{
                       this.accountIndexEchartSpinning=false;
                       this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,{}))
                    }
                })
            },
            // 年龄对应图
            getAgeData(){
                this.ageEchartSpinning=true
                let type=this.handlerTypeOfIndex(this.echartIndex);
                
                // // console.log(res);(this.echartIndex)
                postAction('/etl/audienceAccountDaily/getAgeInfo',{
                    accountId:this.accountId,
                    value:this.echartIndex,
                    dataType:type,
                }).then(res=>{
                    // console.log(res);(res);
                    this.ageEchartSpinning=false
                    let data;
                    
                    if(res.result&&res.success){
                        if(type=='pie'){
                            data=res.result.map(item=>{
                                return {
                                    name:item.type,
                                    value:item.value
                                }
                            });
                            this.initEchart('ageEchart',this.initAdpositionChart(type,data))
                        }else{                           
                            this.initEchart('ageEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
                        }
                        // this.$nextTick(()=>{
                        //     this.initEchart('ageEchart',this.initAdpositionChart(type,data))
                        // })
                        
                    }else{
                        this.initEchart('ageEchart',{})
                    }
                    
                })
            },
            handlerLineData(res){
                let data;
                let xData=Array.apply(null, Array(7)).map((item, i)=> {return moment().subtract(2+i,'days').format('YYYY-MM-DD')}).reverse();
                         
                data={
                    yData:[],
                    legend:[],
                };
                data.legend=[];
                Object.keys(res.result).forEach((key)=>{
                    // console.log(key)
                })
                res.result[xData[0]].forEach(item=>{
                    if(data.legend.indexOf(item.type)==-1){
                        data.legend.push(item.type)
                    }   
                });
                // console.log(data)
                data.legend.forEach((item,index)=>{
                    data.yData.push({
                        name:item,
                        data:[]
                    })
                    
                })
                xData.forEach(item=>{
                    res.result[item].forEach(ele=>{
                        data.yData.forEach((element)=>{
                            if(ele.type==element.name){
                                element.data.push(ele.value)
                            }
                        })
                         
                    });
                })
                // console.log(data)
                return data       
            },
            // 性别对应数据图
            getGenderData(){
                this.genderEchartSpinning=true
                let type=this.handlerTypeOfIndex(this.echartIndex);
                // // console.log(res);(this.echartIndex)
                postAction('/etl/audienceAccountDaily/getSexInfo',{
                    accountId:this.accountId,
                    value:this.echartIndex,
                    dataType:type,
                }).then(res=>{
                    // console.log(res);(res);
                    this.genderEchartSpinning=false
                    let data=[]
                    if(res.success&&res.result){
                        if(type=='pie'){
                                data=res.result.map(item=>{
                                    
                                    return {
                                        name:item.type,
                                        value:item.value
                                    }
                                });
                            
                            
                            this.initEchart('genderEchart',this.initAdpositionChart(type,data))
                        }else{
                            this.initEchart('genderEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
                        }
                        
                    }else{
                        this.initEchart('genderEchart',{})
                    }
                    
                    
                })
            },
            // 投放版位对应数据图
            getSceneData(){
                this.adPositionEchartSpinning=true;
                 let type=this.handlerTypeOfIndex(this.echartIndex);
                // // console.log(res);(this.echartIndex)
                postAction('/etl/audienceAccountDaily/getSceneInfo',{
                    accountId:this.accountId,
                    value:this.echartIndex,
                    dataType:type,
                }).then(res=>{
                    // // console.log(res);(res);
                    this.adPositionEchartSpinning=false;

                    let data;
                    if(res.success&&res.result){
                        
                        if(type=='pie'){
                            data=res.result.map(item=>{
                                return {
                                    name:item.type,
                                    value:item.value
                                }
                            });
                            this.initEchart('adPositionEchart',this.initAdpositionChart(type,data))
                        }else{
                            this.initEchart('adPositionEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
                        }
                    }else{
                        this.$message.error(res.message)
                        this.initEchart('adPositionEchart',{})
                    }
    
                    
                })
            },

            // 获取七日上新数据
            getNewlyCounts(){
                this.planBodyEchartSpinning=true
                getAction('/etl/kuaiShouNewly/getNewlyCounts',{
                    accountId:this.accountId
                }).then(res=>{
                    // console.log(res);(res)
                    let data={
                            xdata:[],
                            campaign:[],
                            creative:[],
                            unit:[]
                        };
                    if(res.success){
                        
                        if(res.result){
                            res.result.forEach(item=>{
                                if(data.xdata.indexOf(item.statDate)==-1){
                                    data.xdata.push(item.statDate)
                                }

                                if(item.newType=='campaign'){
                                    data.campaign.push(item.newCount)
                                }else if(item.newType=='creative'){
                                    data.creative.push(item.newCount)
                                }else if(item.newType=='unit'){
                                    data.unit.push(item.newCount)
                                }
                            })
                        }
                        
                        this.planBodyEchartSpinning=false;
                        this.initEchart('newDataEchart',this.initNewDataChart(data))
                    }else{
                        this.planBodyEchartSpinning=false;
                        this.initEchart('newDataEchart',this.initNewDataChart(data))
                    }
                })
            },

            // 素材柱形图的数据
            getMaterialOverview(){
                this.materialBodyEchartSpinning=true
                getAction('/material/etlKuaiShouAccountMaterialOverview/getMaterialOverview',{
                    accountId:this.accountId,
                    statDate:moment().subtract(1,'days').format('YYYY-MM-DD'),
                }).then(res=>{
                    // console.log(res);(res)
                    
                    this.materialBodyEchartSpinning=false;

                    if(res.success&&res.result){
                        let data={
                            data1:[res.result.newlyCount,res.result.effectiveCount,res.result.hotMoneyCount],
                            data2:[res.result.totalCount]
                        }
                        
                        this.materialBodyEchartSpinning=false;
                        this.materialBodyUpdateTime=res.result.updateTime
                        this.initEchart('materialEchart',this.initMaterialChart(data))
                    }else{
                        let data={
                            data1:[],
                            data2:[]
                        }
                        this.initEchart('materialEchart',this.initMaterialChart(data))
                    }
                })
            },
            

        },
        mounted() {
            
            this.getAccountId();
            this.accountPageSpinning=true
            // getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{                
            //     userId:this.userInfo().id,
            // }).then(res=>{
            //     if(res.success){
            //         this.currentAccount=res.result;
            //         this.accountId=res.result.accountId;
            //         this.selectaccountId=res.result.accountId;
            //         this.accountPageSpinning=false
            //     }else{
            //         this.$message.error(res.message)
            //         this.accountPageSpinning=false 
            //     }
            // })
            if(localStorage.getItem('stockWatchAccountId')) {
                let data = JSON.parse(localStorage.getItem('stockWatchAccountId'));
                this.accountId = data.accountId;
                this.selectaccountId = data.accountId;
                this.dateValue = [moment(data.timeRange[0]),moment(data.timeRange[1])];
                this.accountPageSpinning = false;
            }
            else {
                getAction('/etl/reportAccountHourly/getMaxChargeAccountIdByUser',{                
                    userId:this.userInfo().id,
                }).then(res=>{
                    if(res.success){
                        // this.currentAccount=res.result;
                        this.accountId=res.result;
                        this.selectaccountId=res.result;
                        this.accountPageSpinning=false;
                    }else{
                        // this.$message.error(res.message)
                        this.accountPageSpinning=false; 
                    }
                })
            }
            
         
        },
        filters:{
            
        }
    }
</script>
<style lang="scss">

.accountPage .accountBody{
    


    line-height: 1;
    .ant-input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-variant: tabular-nums;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 0px;
    color: white;
    font-size: 14px;
    line-height: 1.5;
    background-color: transparent;
    background-image: none;
    border:none;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    }
    .ant-calendar-range-picker-separator {
        display: inline-block;
        min-width: 10px;
        height: 100%;
        color: white;
        white-space: nowrap;
        text-align: center;
        vertical-align: top;
        pointer-events: none;
    }

    .ant-divider, .ant-divider-vertical {
        position: relative;
        top: -0.06em;
        display: inline-block;
        width: 1px;
        height: 2.9em;
        margin: 0 8px;
        vertical-align: middle;
    }
    

}
.accountPage .materialBody{
    .ant-divider, .ant-divider-vertical {
        position: relative;
        top: 25px;
        display: inline-block;
        width: 1px;
        height: 366px;
        margin: 0 8px;
        vertical-align: middle;
        
    }
}
.accountPage .dataMode{
    .ant-divider, .ant-divider-vertical {
        position: relative;
        top: 10px;
        display: inline-block;
        width: 1px;
        height: 350px;
        margin: 0 8px;
        vertical-align: middle;
    }
}
// .accountPage{
        .ant-tooltip {
       
        max-width: 400px;
       
        }
// }
</style>
<style lang="scss" scoped>
// #
.accountPage{
    p{
        margin-bottom: 0px;
    }
    .echart{
        margin-top: 30px;
    }
    .bodyBox{
        width: 100%;
        margin-bottom: 26px;
        height: 450px;
    }
    .accountBody{
        
        height: 300px;
        display: flex;
        justify-content: space-between;
        
    }
    .accountBodyLeft{
        width: 75%;
        margin-right: 26px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }
    .accountBodyRight{
        width: 25%;
        // flex-shrink: 0;
        padding: 25px;
    }
    .accountBodyLeft,.accountBodyRight{
        border-radius: 10px;
        background: white;
        
    }
    .accountBodyLeftCost{
        background: #2461F1;
        border-radius: 10px;
        height: 260px;
        width: 40%;
        flex-shrink: 0;
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
    .accountBodyLeftCostLeft{
        width: 55%;
        // padding-left: 20px;
        .title{
            font-size: 26px;
            font-weight: 700;
            padding: 0;
            margin-bottom: 10px;
        }
        .costInfo{
            margin: 20px 0 0 0;
            width: 70%;
            display: flex;
            justify-content: space-between;    
        }
        .yesterdayInfo{
            width:50%;
            flex-shrink: 0;
        }
        
        .costNum{
            width: 90%;
            font-size: 26px;
            font-weight: 700;
            color:#2461F1 ;
            background: white;
            text-align: center;
            border-radius: 10px;
            margin: 20px 0;
            padding: 10px 0px;
        }
        @media screen and (max-width:1980px) and (min-width:1560px) {
            .costNum {
                font-size: 22px;
            }
        }
        @media screen and (max-width:1560px) and (min-width:1280px) {
            .costNum {
                font-size: 20px;
            }
        }
        @media screen and (max-width:1280px) {
            .costNum {
                font-size: 18px;
            }
        }
        
    }
    .accountBodyLeftCostRight{
        width: 45%;
        // background: white;
    }
    .accountBodyLeftOther{
        width: 60%;
        margin-left: 15px;
        padding-left: 15px;
        border-left:1px solid  #eee ;
        position: relative;
        .top{
            display: flex;
            justify-content: space-between;
            padding-top: 8px;
        }
        .item{
            width: 25%;
            // min-width: 100px;
            // font-size: 16px;
        }
        .todyCost{
            font-size: 1.2rem;
            font-weight: 700;
            color:#303133;
            margin-bottom: 10px;
            width: 100%;
            
        }
        .sign{
            font-size: 18px;
            .rise{
                color: #F2637B;
                width: 16px;
                height: 16px;
                text-align: center;
                // background-color: #F2637B;
                // border-radius: 50%;
                // color: white;
                // font-size: 14px;
                transform: rotate(-30deg);
            }
            .fall{
                color: green;
                 width: 16px;
                height: 16px;
                text-align: center;
                // background-color: #F2637B;
                // border-radius: 50%;
                // color: white;
                // font-size: 14px;
                transform: rotate(30deg);
            }
            .up{
                width: 16px;
                height: 16px;
                text-align: center;
                background-color: #F2637B;
                border-radius: 5px;
                color: white;
            }
        }
        .yesterdayCost{
            font-size: 0.89rem;
            font-weight: 500;
            color:#303133;
            margin-bottom:8px ;
        }
        .IndexName{
            // width: 100%;
            font-size: 15px;
            font-weight: 600;
            color:#303133;
            display: inline-block;
            cursor: pointer;
            // white-space:nowrap;
            // overflow:hidden;
            // text-overflow:ellipsis;
        }
        .IndexNameActive{
            color:#2461F1;
        }
        .IndexNameActive::after{
            content: '';
            display: block;
            width: 15px;
            height: 3px;
            background: #2461F1;
            position: relative;
            top: 3px;
            left: 50%;
            margin-left: -8px;
        }
        .showIndex{
            position: absolute;
            top: -5px;
            right: 0px;
            font-size: 12px;
            cursor: pointer;
            color: #909399;
        }
        .showIndex:hover{
            color:#2461F1
        }
    }

    // 第二块
    .planBody{
        
        display: flex;
        justify-content: space-between;
    }

    .planBodyLeft{
        width: 40%;
        height: 100%;
        background: white;
        flex-shrink: 0;
        border-radius: 10px;
        

    }
    .title{
            padding: 20px 20px;
        }
        
        .titleContext{
            font-size: 14px;
            font-weight: 600;
            color:#303133;
            margin-bottom:0px;
            
        }
        .titleContext::before{
            content:'';
            width: 5px;
            height: 5px;
            border-radius: 2.5px;
            background-color:#2461F1;
            display: inline-block;
            position: relative;
            top: -2px;
        }
        .titleTip{
            font-size: 14px;
            color: #909399;
            font-weight: 400;
            margin-left: 20px;
        }
    .planBodyRight{
        width: 60%;
        background: white;
        margin-left: 20px;
        height: 100%;
        border-radius: 10px;
    }









    // 素材块
    .materialBody{
        border-radius: 10px;
        background: white;
        position: relative;
        display: flex;
        padding:20px 20px ;
        .dataPicker{
            position: absolute;
            top: 25px;
            right: 20px;
        }
    }

    .materialBodyLeft{
        width: 40%;
        height: 100%;
    }

    .materialBodyRight{
        width: 60%;
        height: 100%;
        padding-top: 60px;
    }


    

    .accountBodyRighTitle{
       
        h1{
            font-size: 26px;
            font-weight: 700;
            cursor: pointer;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
    }
    .accountBodyRighTitleID{
        font-size: 14px;
        color: #c0c4cc;
        
    }
    .accountBodyRightInfoItem{
        background: rgb(238,241,255);
        padding:15px 15px;
        margin: 20px 0 0;
        border-radius: 5px;
        font-size: 16px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        .name{
            font-size: 16px;
            font-weight: 600;
        }
    }
    .createNum{
        cursor: pointer;
        position: relative;
    }


    .targetBody{
        border-radius: 10px;
        background: white;
        .dataMode{
            display: flex;
            justify-content: space-between;
        }
        .topOpt{
            padding: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
    .adPositionMode,.ageMode,.genderMode{
        width: 32%;
        height: 100%;
    }
    .ageMode{
        
    }
    .genderMode{
      
    }

}

</style>