
<template>
    <div>
        <a-row style="background-color: rgba(255, 255, 255, 1);margin-left: 2px;margin-right: 2px;margin-bottom: 20px;">  
            <a-col :span="14" :push="10">
                <div style="display: flex;justify-content:space-around;margin: 25px;">
                    <div>
                    <p style="font-weight:900;font-size: 16px;">余额</p>
                    <p>{{balance}}</p>
                  </div>
                  <div >
                    <p style="font-weight:900;font-size: 16px;">投放状态</p>
                    <p>{{state == 0?'投放中':'关'}}</p>
                  </div>
                  <div>
                    <p style="font-weight:900;font-size: 16px;">今日消耗</p>
                    <p>{{totalCost}}</p>
                  </div>
                </div>

            </a-col>
            <a-col :span="10" :pull="14">
                <div style="margin:20px;">
                    <p style="font-weight:900;font-size: 18px;">{{accountName}}</p>
                    <p>账户ID:{{accountId}}</p>
                </div>
               
              </a-col>
        </a-row>
        




                <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
                <div slot="title">
                    数据趋势 <span style="font-size: 12px;">更新时间：{{updateTime | formatDate}}</span> 
                </div>
                <div class="person-content-title" slot="extra">
                    <div class="content-title-acount"></div>
                    <div class="content-title-checkout">
                        <span class="title-checkout-time">
                            <a-range-picker format="YYYY-MM-DD" v-model="dateEchart" :range="dateRanges" @change="dateChange"/>
                        </span>
                    </div>
                </div>
                <a-row>
                    <a-col :span="8">
                        <a-checkbox-group
                            v-model="valueBtn"
                            name="checkboxgroup"
                            :options="plainOptions"
                            @change="checkboxonChange"
                            />
                          
                    </a-col>
                    <a-col :span="8" :offset="8">
                      <p style="text-align: right;color: rgb(165, 165, 165);">显示指标</p> 
                    </a-col>
                  </a-row>
                <div id="accountIndexEchart" ref="accountIndexEchart"
                style="width: 90%;height: 315px;margin: 0 auto;">
                <a-empty />
                </div>
            </a-card>





            <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
                <div slot="title">
                    组投放数据 <span style="font-size: 12px;">更新时间：{{updateTimeGroup | formatDate}}</span> 
                </div>
                <div class="person-content-title" slot="extra">
                    <div class="content-title-acount"></div>
                    <div class="content-title-checkout">
                        <span class="title-checkout-time">
                            <a-button type="link" @click="customColumn">
                                自定义列
                              </a-button>
                        </span>
                    </div>
                </div>

                <a-table
                size="middle"
                :dataSource="echartsData"
                :columns="columns"
                bordered
                id="outTable"
                :pagination="false"
                :loading="echartsLoading"
                :scroll="{ x: scrollX }"
                ref="accountTable"
                >
                <span slot="unitStatus" slot-scope="text, record">
                    <a-switch :checked="text === 0" />
                </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>
            <a-pagination
                style="float: right;margin-top: 10px;"
                :total="totalAll"
                :show-total="total => `共 ${totalAll} 条`"
                size="small"
                show-size-changer
                show-quick-jumper
                :defaultPageSize="5"
                @change="onShowSizeChange"
                @showSizeChange="onShowSizeChange"
            />
            </a-card>
            



            
            <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
                <div slot="title">
                    素材相关 <span style="font-size: 12px;">更新时间：{{updateRelated | formatDate}}</span> 
                </div>
                <div class="person-content-title" slot="extra">
                    <div class="content-title-acount"></div>
                    <div class="content-title-checkout">
                        <span class="title-checkout-time" style="margin-right: 10px;">
                            素材类型：
                            <a-radio-group v-model="projectAccount" @change="projectAccountChange"> 
                                <a-radio-button value="0">
                                  全部
                                </a-radio-button>
                                <a-radio-button value="1">
                                  上新素材
                                </a-radio-button>
                                <a-radio-button value="2">
                                    有效素材
                                </a-radio-button>
                                <a-radio-button value="3">
                                    爆款素材
                                </a-radio-button>
                              </a-radio-group>
                        </span>
                        <span class="title-checkout-time">
                            <a-range-picker v-model="dateSource" format="YYYY-MM-DD" :range="dateRanges" @change="dateSourceChange"/>
                        </span>
                    </div>
                </div>
                <a-table
                size="middle"
                :dataSource="sourceMaterialData"
                :columns="sourceMaterial"
                bordered
                id="outTable"
                :pagination="echartsIpagination"
                :loading="echartsLoading"
                ref="accountTable"
                >
                <span slot="unitvideoUrl" slot-scope="text, record">
                    <video class="video" :src="text" controls="controls" style="height:200px">
                        您的浏览器不支持 video 标签。
                      </video>
                </span>
            </a-table>
            </a-card>





            <a-card class="card-content echarts-card">
                <a-row>
                    <a-col :span="12">
                        <a-select v-model="selectValue" style="width:100px;" @change="selectValueChange">
                            <a-select-option value="cost">花费</a-select-option>
                            <a-select-option value="activationPrice">激活成本</a-select-option>
                            <a-select-option value="activation">激活数</a-select-option>
                            <a-select-option value="eventPayRoi">ROI</a-select-option>
                            <a-select-option value="eventPay">付费次数</a-select-option>
                            <a-select-option value="eventPayCost">付费成本</a-select-option>
                            <a-select-option value="eventPayPurchaseAmountFirstDay">首日付费金额</a-select-option>
                            <a-select-option value="eventNextDayStay">次留数</a-select-option>
                            <a-select-option value="leave">次留</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="12">
                        <a-range-picker style="float: right;" v-model="datePie" format="YYYY-MM-DD" :range="dateRanges" @change="datePieChange"/>
                    </a-col>
                  </a-row>

                  <div style="display: flex;justify-content:space-around;margin-top: 20px;">
                       
                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
                       
                        <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>

                        <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;"></div>

                </div>                 

            </a-card>



            <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="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>
        <customColumnProject
        :visible="visible"
        :listNum="listNum"
        :fiexColumn="columnsFixd"
        :mediaType="1"
        @closeCustomColumn="closeCustomColumn"
        @changeColumn="changeColumn"
    />
    </div>
</template>

<script>
    import customColumnProject from './customColumnProject.vue'
    import keepPersonData from './new-keep-data.js';
    import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
    import moment from 'moment';
        // 引入基本模板
    var echarts = require('echarts');
    // 引入折线图组件
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/pie');
    // 引入提示框和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');
    export default{
        components:{customColumnProject},
        data() {
            return {
                targetVisible:false,
                listNum:[],
                visible:false,
                scrollX: 1500,
                columnsFixd:keepPersonData.setNoDeleteColumns(),
                valueBtn:['花费'],
                plainOptions:[
                    {label:'花费',value:'花费'},
                    {label:'激活成本',value:'激活成本'},
                    {label:'新增付费成本',value:'新增付费成本'},
                    {label:'次留率',value:'次留率'}
                ],
                colorChange:1,
                updateAccountEchart:'2021-12-21 16:04',
                dateEchart:[moment(), moment()],
                dateRanges: keepPersonData.setTimeRange(),
                dateSource:[moment(), moment()],
                selectValue:'cost',
                datePie:[moment(), moment()],
                echartsData:[],
                sourceMaterialData:[],
                echartsLoading:false,
                columns:[
                    {
                    title: '状态操作',
                    dataIndex: 'status',
                    key: 'status',
                    align: 'center',
                    scopedSlots: { customRender: 'unitStatus' },
                    },
                    {
                    title: '组名称',
                    dataIndex: 'unitName',
                    key: 'unitName',
                    align: 'center',
                    },{
                    title: '花费',
                    dataIndex: 'charge',
                    key: 'charge',
                    align: 'center',
                    sorter: (a, b) => a.charge - b.charge,
                    },{
                    title: '出价',
                    dataIndex: 'bid',
                    key: 'bid',
                    align: 'center',
                    },{
                    title: '激活数',
                    dataIndex: 'activation',
                    key: 'activation',
                    align: 'center',
                    },{
                    title: '激活成本',
                    dataIndex: 'activationCost',
                    key: 'activationCost',
                    align: 'center',
                    },{
                    title: '操作建议',
                    dataIndex: 'operationAgree',
                    key: 'operationAgree',
                    align: 'center',
                    },{
                    title: '操作',
                    dataIndex: 'operator',
                    key: 'operator',
                    align: 'center',
                    scopedSlots: { customRender: 'operator' },
                    width:150
                    },
                ],
                sourceMaterial:[
                {
                    title: '素材',
                    dataIndex: 'videoUrl',
                    key: 'videoUrl',
                    align: 'center',
                    scopedSlots: { customRender: 'unitvideoUrl' },
                    width: 200
                }, {
                    title: '素材ID',
                    dataIndex: 'signature',
                    key: 'signature',
                    align: 'center',
                }, {
                    title: '曝光数',
                    dataIndex: 'showNum',
                    key: 'showNum',
                    align: 'center',
                }, {
                    title: '花费',
                    dataIndex: 'totalCost',
                    key: 'totalCost',
                    align: 'center',
                }, {
                    title: '激活数',
                    dataIndex: 'activation',
                    key: 'activation',
                    align: 'center',
                }, {
                    title: '激活成本',
                    dataIndex: 'activationPrice',
                    key: 'activationPrice',
                    align: 'center',
                },
                {
                    title: '上线时间',
                    dataIndex: 'dateTime',
                    key: 'dateTime',
                    align: 'center',
                },
                ],
                totalAll:0,
                tablePag: {
                pageNum: 1,
                pageSize: 5
            },
                echartsIpagination: {
                current: 1,
                pageSize: 5,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.echartsIpagination.current = current
                    this.echartsIpagination.pageSize = pageSize
                },
                },
                projectAccount:'0',
                bidErrorMessage:'',
                newBid:'',
                selectDirectionalId:'',
                directionalList:[],
                currentUnit:{},
                oldLink:'',
                linkVisible:false,
                newLink:'',
                accountId:this.$route.query.accountId,
                accountName:'',
                balance:'',
                state:'',
                totalCost:'',
                updateTime:'',
                updateTimeGroup:'',
                updateRelated:'',
                accountIndexEchartThreePieShow:true,
                accountIndexEchartTwoPieShow:true,
                accountIndexEchartOnePieShow:true,
            }
        },
        filters: {
      formatDate: function (value) {
          if (value) {
              let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
          }else{
              return '-'
          }
        
      }
    },
        mounted() {
            // 获取折线图
            this.getQueryNewlyData();
            // 第一个饼图
            // this.getOnePieData();
            // 第二个饼图
            this.getGroupDataList();
            this.getAccountNameData();
            this.getGroupLaunchData();
            this.getEchartOnePieData();
            // this.showColumn();
        },
        
        methods: {
             // 自定义列
             customColumn(){
                this.visible = true;
                this.listNum = [...this.columns]
            },
            //自定义列相关
            closeCustomColumn() {
            this.visible = false
            },
            showColumn() {
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: 13,
            }).then((res) => {
                // console.log(res)
                if (res.success) {
                // console.log(JSON.parse(res.result))
                if (res.result) {
                    let columns = JSON.parse(res.result)
                    if (columns.length) {
                    if (columns.length >= this.columnsFixd.length) {
                        columns.map((item, index) => {
                        if (index > this.columnsFixd.length - 1) {
                            item.sorter = function (a, b) {}
                        }
                        })
                        columns = columns.slice(this.columnsFixd.length)
                        this.columns = [...this.columnsFixd, ...columns]
                    }

                    // console.log(this.columns)
                    }
                }

                this.changeColumn(this.columns)
                }
            })
        },
        changeColumn(val) {
            console.log(val);
            this.columns = [...val]
            if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
                this.columns.forEach((element, index) => {
                if (index < this.columns.length - 1) {
                   
                    element.width = 'auto'
                    element.fixed = false
                    
                }
                })

                this.scrollX = 0
            } 
            else if (this.columns.length >= 8) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 150
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
            } 
            else {
                this.scrollX = 0
                this.columns.forEach((element) => {

                    element.width = 'auto'
                    element.fixed = false
                    
                })
            }

            let arr = JSON.stringify(this.columns)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 13,
            }).then((res) => {
                // console.log(res)
            })
        },
        //获取echart折线图的值
        initEchart(idName, optionName) {
            let that = this;
            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() {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
            // 环形数据图
            getEchartOnePieData(){
                let params = {
                    accountId:this.accountId,
                    startTime:this.datePie[0].format('YYYY-MM-DD'),
                    endTime:this.datePie[1].format('YYYY-MM-DD'),
                    type:this.selectValue
                }
                getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountPieChar',params).then(res=>{
                    if (res.code == 0) {
                        let pieData = [];
                        let pie2d = [];
                        let pie3p = [];
                        let center = '';
                        let centerTwo = ''
                        let centerthree = ''
                        if (res.result.age.length != 0) {
                            this.accountIndexEchartOnePieShow = '分年龄数据';
                            center = ''
                             for (var i = 0; i < res.result.age.length; i++) {
                                var obj = new Object();
                                obj.name = res.result.age[i].ageSegment;
                                if (this.selectValue == 'cost') {
                                    obj.value = res.result.age[i].cost;
                                }else if(this.selectValue == 'activationPrice'){
                                    obj.value = res.result.age[i].activationPrice;
                                }else if(this.selectValue == 'activation'){
                                    obj.value = res.result.age[i].activation;
                                }else if(this.selectValue == 'eventPayRoi'){
                                    obj.value = res.result.age[i].eventPayRoi;
                                }else if(this.selectValue == 'eventPay'){
                                    obj.value = res.result.age[i].eventPay;
                                }else if(this.selectValue == 'eventPayCost'){
                                    obj.value = res.result.age[i].eventPayCost;
                                }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
                                    obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
                                }else if(this.selectValue == 'eventNextDayStay'){
                                    obj.value = res.result.age[i].eventNextDayStay;
                                }else if(this.selectValue == 'leave'){
                                    obj.value = res.result.age[i].leave;
                                }
                                
                                pieData[i] = obj;
                               
                            }
                           
                        }else{ 
                            center = 'center'
                            this.accountIndexEchartOnePieShow = '暂无数据';
                            
                        }
                       if (res.result.gender.length != 0) {
                           this.accountIndexEchartTwoPieShow = '分性别数据';
                           centerTwo="";
                           for (var i = 0; i < res.result.gender.length; i++) {
                                var obj = new Object();
                                obj.name = res.result.gender[i].gender;
                                if (this.selectValue == 'cost') {
                                    obj.value = res.result.age[i].cost;
                                }else if(this.selectValue == 'activationPrice'){
                                    obj.value = res.result.age[i].activationPrice;
                                }else if(this.selectValue == 'activation'){
                                    obj.value = res.result.age[i].activation;
                                }else if(this.selectValue == 'eventPayRoi'){
                                    obj.value = res.result.age[i].eventPayRoi;
                                }else if(this.selectValue == 'eventPay'){
                                    obj.value = res.result.age[i].eventPay;
                                }else if(this.selectValue == 'eventPayCost'){
                                    obj.value = res.result.age[i].eventPayCost;
                                }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
                                    obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
                                }else if(this.selectValue == 'eventNextDayStay'){
                                    obj.value = res.result.age[i].eventNextDayStay;
                                }else if(this.selectValue == 'leave'){
                                    obj.value = res.result.age[i].leave;
                                }
                                pie2d[i] = obj;
                            }
                          
                       }else{
                        centerTwo = 'center'
                        this.accountIndexEchartTwoPieShow = '暂无数据';
                       }
                            
                            if (res.result.scene.length != 0) {
                                this.accountIndexEchartThreePieShow = '分版位数据';
                                centerthree='';
                                for (var i = 0; i < res.result.scene.length; i++) {
                                var obj = new Object();
                                obj.name = res.result.scene[i].adScene;
                                if (this.selectValue == 'cost') {
                                    obj.value = res.result.age[i].cost;
                                }else if(this.selectValue == 'activationPrice'){
                                    obj.value = res.result.age[i].activationPrice;
                                }else if(this.selectValue == 'activation'){
                                    obj.value = res.result.age[i].activation;
                                }else if(this.selectValue == 'eventPayRoi'){
                                    obj.value = res.result.age[i].eventPayRoi;
                                }else if(this.selectValue == 'eventPay'){
                                    obj.value = res.result.age[i].eventPay;
                                }else if(this.selectValue == 'eventPayCost'){
                                    obj.value = res.result.age[i].eventPayCost;
                                }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
                                    obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
                                }else if(this.selectValue == 'eventNextDayStay'){
                                    obj.value = res.result.age[i].eventNextDayStay;
                                }else if(this.selectValue == 'leave'){
                                    obj.value = res.result.age[i].leave;
                                }
                                pie3p[i] = obj;
                            }
                           
                            }else{
                                centerthree = 'center'
                                this.accountIndexEchartThreePieShow = '暂无数据';
                            }
                           
                                this.initEchart('accountIndexEchartOnePie',this.initPieOneData(pieData,this.accountIndexEchartOnePieShow,center));
                                this.initEchart('accountIndexEchartTwoPie',this.initPieTwoData(pie2d, this.accountIndexEchartTwoPieShow,centerTwo));
                                this.initEchart('accountIndexEchartThreePie',this.initPieThreeData(pie3p,this.accountIndexEchartThreePieShow,centerthree));
                                
                            
                            
                  
                    }
                    
                })
                
            },
            selectValueChange(){
                this.getEchartOnePieData();
            },
            datePieChange(){
                this.getEchartOnePieData();
            },
            // 素材相关数据
            getGroupLaunchData(){
                let params = {
                    accountId:this.accountId,
                    startTime:this.dateSource[0].format('YYYY-MM-DD'),
                    endTime:this.dateSource[1].format('YYYY-MM-DD'),
                    searchType:this.projectAccount,
                    pageNum:this.echartsIpagination.current,
                    pageSize:this.echartsIpagination.pageSize
                }
                getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountMaterialNewAndEffectAndFaddish',params).then(res=>{
                    if (res.code == 0) {
                        this.updateRelated = res.timestamp;
                        this.sourceMaterialData = res.result.list;
                        this.echartsIpagination.total = res.result.total;
                    }
                })
            },
            projectAccountChange(){
                this.echartsIpagination.current = 1;
                this.getGroupLaunchData();
            },
            dateSourceChange(){
                this.echartsIpagination.current = 1;
                this.getGroupLaunchData();
            },
            checkboxonChange(){
                this.getQueryNewlyData();
            },
            dateChange(){
                this.getQueryNewlyData();
            },
            // 获取账户名称等信息
            getAccountNameData(){
                let params = {
                    accountId:this.accountId
                }
            getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfo',params).then(res=>{
                    if(res.code == 0){
                        this.accountName = res.result.accountName;
                        this.balance = res.result.balance;
                        this.state = res.result.state;
                        this.totalCost = res.result.totalCost;
                    }
                })
            },
            // 获取组投放数据表格
            getGroupDataList(){
                let params = {
                    accountId:this.accountId,
                    pageNum:this.tablePag.pageNum,
                    pageSize:this.tablePag.pageSize
                }
                getAction('/kuaishou/realTime/getUnitDateInfo',params).then(res=>{
                    if (res.code == 200) {
                        this.updateTimeGroup = res.timestamp;
                        this.echartsData = res.result
                        this.totalAll = res.result[0].totalCount
                    }
                })
            },
            onShowSizeChange(current, pageSize) {
                console.log(current);
            this.tablePag = {
                pageNum: current,
                pageSize: pageSize
            };
            this.getGroupDataList();
        },
            visibleChange(){
                this.bidErrorMessage='';
                this.newBid=undefined;
                
            },
            bidChangeCancel(record){
                record.visible=false;
                this.newBid=undefined;
                this.bidErrorMessage=''
            },
            // 修改出价
            bidChangeOk(record){
                console.log(111);
                if(this.newBid){
                    record.visible=false;
                    record.accountId = this.accountId;
                    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('请正确填写出价')
                }
                
            },
            // 点击修改定向
            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
                    }
                })
                
            },
            targethandleCancel(){
                this.targetVisible=false;
                this.selectDirectionalId=undefined
            },
            // 定向包修改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
                })
            },

            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
                    }
                })
            },

            // 监测链接修改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='';
            },

            // 获取折线图
            getQueryNewlyData(){
                let params = {
                    accountId:this.accountId,
                    startTime:this.dateEchart[0].format('YYYY-MM-DD'),
                    endTime:this.dateEchart[1].format('YYYY-MM-DD'),
                }
                getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfoBrokenLine',params).then(res=>{
                    if (res.code == 0) {
                        this.updateTime = res.timestamp
                       if (res.message == '账户时报报折线图查询成功') {
                           let today = {};
                           let yesterday = {};
                           let timeData = [];
                           timeData = res.result.map(item=>{
                               return item.yHour
                           })


                           if (this.valueBtn.indexOf('花费') != -1 ) {
                                today.data = res.result.map(itemprice=>{
                                return itemprice.tCost
                                });
                                today.name = '花费(today)'
                                yesterday.data = res.result.map(itemyes=>{
                                return itemyes.yCost
                                });
                                yesterday.name = '花费(yesterday)'
                           }else{
                            today.data = [];
                            today.name = '';
                            yesterday.data = [];
                            yesterday.name = '';
                           }
                           let activation = {};
                           let activationyes = {};
                           if(this.valueBtn.indexOf('激活成本') != -1){
                                activation.data = res.result.map(itemprice=>{
                                return itemprice.tActivationPrice
                                });
                                activation.name = '激活成本(today)'

                                activationyes.data = res.result.map(itemyes=>{
                                return itemyes.yActivationPrice
                                });
                                activationyes.name = '激活成本(yesterday)'
                           }else{
                            activation.data = [];
                            activation.name = '';
                            activationyes.data = [];
                            activationyes.name = '';
                           }
                           let pay = {};
                           let payyes = {};
                           if(this.valueBtn.indexOf('新增付费成本') != -1){
                                pay.data = res.result.map(itemprice=>{
                                return itemprice.tEventNewUserPayCost
                                });
                                pay.name = '新增付费成本(today)'

                                payyes.data = res.result.map(itemyes=>{
                                return itemyes.yEventNewUserPayCost
                                });
                                payyes.name = '新增付费成本(yesterday)'
                           }else{
                            pay.data = [];
                            pay.name = '';
                            payyes.data = [];
                            payyes.name = '';
                           }
                           let Secondary = {};
                           let Secondaryyes = {};
                           if(this.valueBtn.indexOf('次留率') != -1){
                                Secondary.data = res.result.map(itemprice=>{
                                return itemprice.tLeave
                                });
                                Secondary.name = '次留率(today)'

                                Secondaryyes.data = res.result.map(itemyes=>{
                                return itemyes.yLeave
                                });
                                Secondaryyes.name = '次留率(yesterday)'
                           }else{
                            Secondary.data = [];
                            Secondary.name = '';
                            Secondaryyes.data = [];
                            Secondaryyes.name = '';
                           }
                          


                           
                           this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
                       }else if(res.message == '账户日报折线图查询成功'){
                        let timeData = [];
                        
                           timeData = res.result.map(item=>{
                               return item.dateTime
                           })
                           let today = {};
                           let yesterday = {};
                           let activation = {};
                           let activationyes = {};
                           if (this.valueBtn.indexOf('花费') != -1 ) {
                                today.data = res.result.map(itemprice=>{
                                return itemprice.cost
                                });
                                today.name = '花费'
                                
                           }else{
                            today.data = [];
                            today.name = '';
                           
                           }
                           if (this.valueBtn.indexOf('激活成本') != -1 ) {
                                yesterday.data = res.result.map(itemprice=>{
                                return itemprice.activationPrice
                                });
                                yesterday.name = '激活成本'
                                
                           }else{
                            yesterday.data = [];
                            yesterday.name = '';
                           
                           }
                           if (this.valueBtn.indexOf('新增付费成本') != -1 ) {
                            activation.data = res.result.map(itemprice=>{
                                return itemprice.eventNewUserPayCost
                                });
                                activation.name = '新增付费成本'
                                
                           }else{
                            activation.data = [];
                            activation.name = '';
                           
                           }
                           if (this.valueBtn.indexOf('次留率') != -1 ) {
                                activationyes.data = res.result.map(itemprice=>{
                                return itemprice.leave
                                });
                                activationyes.name = '次留率'
                                
                           }else{
                            activationyes.data = [];
                            activationyes.name = '';
                           
                           }
                           let pay = {};
                           let payyes = {};
                           let Secondary = {};
                           let Secondaryyes = {};
                           pay.name = '';
                           pay.data = [];
                           payyes.name = '';
                           payyes.data = [];
                           Secondary.name = '';
                           Secondary.data = [];
                           Secondaryyes.name = '';
                           Secondaryyes.data = [];
                           this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
                       }
                    }
                })
                

               
                
            },
            
        // 折线图
        initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes) {
                let option = {
                  
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        bottom:'0%',
                        // data: ['today','yesterday']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        containLabel: true

                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: timeData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: today.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data:today.data,
                            lineStyle: {                               
                            color: '#00BFFF',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00BFFF',
                            borderWidth:2,
                            borderColor:'#00BFFF'
                            },
                        },
                        {
                            name: yesterday.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data:yesterday.data,
                            lineStyle: {                               
                            color: '#00FF7F',   
                            width: 2,
                            },
                            itemStyle:{
                            color:'#00FF7F',
                            borderWidth:2,
                            borderColor:'#00FF00'
                            },
                        }, {
                            name: activation.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: activation.data,
                           
                            
                        },
                        {
                            name: activationyes.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: activationyes.data,
                           
                    
                        },{
                            name: pay.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: pay.data,
                           
                            
                        },
                        {
                            name: payyes.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: payyes.data,
                           
                    
                        },{
                            name: Secondary.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: Secondary.data,
                           
                            
                        },
                        {
                            name: Secondaryyes.name,
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            data: Secondaryyes.data,
                           
                    
                        },
                       
                    ]
                };
                return option
            },

            // 第一个饼图
            initPieOneData(pieData,accountIndexEchartOnePieShow,center){
                var iconNone = require('../../../../../assets/nodata.png');
             let  option = {
                tooltip: {
                    trigger: 'item'
                },
                title:{
                    x: center,
                    y: center,
                    text:accountIndexEchartOnePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartOnePieShow,
                    show: true,
                    textStyle:{
                        rich: {
                            a:{
                            height: 200,
                            width: 280,
                            backgroundColor: {
                                image: iconNone,
                            }
                            }
                        }

                    }
                },
                legend: {
                    top: '10%',
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: pieData
                    }
                ]
                };
                return option
            },
            initPieTwoData(pie2d,accountIndexEchartThreePieShow,centerthree){
                var iconNoneThree = require('../../../../../assets/nodata.png');
                let  option = {
                tooltip: {
                    trigger: 'item'
                },
                title:{
                    x:centerthree,
                    y:centerthree,
                    text:accountIndexEchartThreePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartThreePieShow,
                    textStyle:{
                        rich: {
                            a:{
                            height: 200,
                            width: 280,
                            backgroundColor: {
                                image: iconNoneThree,
                            }
                            }
                        }

                    }
                },
                legend: {
                    top: '10%',
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: pie2d
                    }
                ]
                };
                return option
            },

            initPieThreeData(pie3p,accountIndexEchartTwoPieShow,centerTwo){
                var iconNoneTwo = require('../../../../../assets/nodata.png');
                let  option = {
                tooltip: {
                    trigger: 'item'
                },
                title:{
                    x:centerTwo,
                    y:centerTwo,
                    text:accountIndexEchartTwoPieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartTwoPieShow,
                    textStyle:{
                        rich: {
                            a:{
                            height: 200,
                            width: 280,
                            backgroundColor: {
                                image: iconNoneTwo,
                            }
                            }
                        }

                    }
                },
                legend: {
                    top: '10%',
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:pie3p
                    }
                ]
                };
                return option
            },
        },



    }
</script>
<style lang="less" scoped>
     @import "../keep-manage/keep-manage.less";
</style>