<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 | formatNum}}</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 | formatNum}}</p>
                    </div>
                </div>

            </a-col>
            <a-col :span="10" :pull="14">
                <div style="margin:20px;cursor: pointer;" @click="changeAccount">
                    <p style="font-weight:900;font-size: 18px;">{{accountName}}</p>
                    <p>账户ID:{{accountDataId}}</p>
                </div>

            </a-col>
        </a-row>





        <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
            <div slot="title">
                <span style="font-weight: bolder;">数据趋势</span>
                <!-- &nbsp;&nbsp; <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-radio-group v-for="item in indexShowS" :key="item.key" v-model="valueBtn"
                        @change="checkboxonChange">
                        <a-radio :value="item.dataIndex">
                            {{item.title}}
                        </a-radio>
                    </a-radio-group>
                    <!-- <a-checkbox-group v-model="valueBtn" name="checkboxgroup" :options="plainOptions"
                        @change="checkboxonChange" /> -->

                </a-col>
                <a-col :span="8" :offset="8">
                    <a-button type="link" @click="indexShowClick" style="float: right;">
                        显示指标
                    </a-button>

                </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-weight: bolder;">组投放数据</span> &nbsp;&nbsp; <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="echartsLoadingoutTable" ref="accountTable" :scroll="{ x: scrollX }"
                @change="sortGroup"
                v-if="outTableShow">
                <!-- <span slot="status" slot-scope="text, record">
                    <a-switch :checked="text == 1"  @change="switchChange(text,record)"/>
                </span> -->
                <span slot="putStatus" 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="operationAgree" slot-scope="text,record">
                    <a-popover title="" trigger="hover" v-if="text">
                        <template slot="content">
                            <div style="width: 150px;margin-top: 10px;">{{record.operationAgreeInfo}}</div>
                        </template>
                        <a href="javascript:;" type='primary'>{{text}}</a>
                    </a-popover>
                    <span v-else>-</span>
                    <p style="height: 5px;line-height: 25px;color: rgb(157 157 157);">{{record.operationAgreeContent}}
                    </p>

                </span>
                <span slot="bid" slot-scope="text,record">
                    {{record.bidType == 2?text/1000:record.cpaBid/1000}}
                </span>


                <span slot="operator" slot-scope="text,record">

                    <a href="javascript:;" type='primary' @click="modifyPriceClick(record)">调价</a>

                    <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-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-weight:bolder">素材相关</span>
                <!-- &nbsp;&nbsp; <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" @change="sort">
                <span slot="coverUrl" slot-scope="text,record">
                    <div style="background:#e8e8e8;text-align:center;border-radius:3px">
                        <a-popover placement="right" v-model="record.stopVideo" @visibleChange="handleHoverChange">
                            <template slot="content">
                                <video :src="record.videoUrl" style="width:250px" controls></video>
                            </template>
                            <template slot="title">
                            </template>
                            <img :src="text" alt="" style="width:20px">
                        </a-popover>
                    </div>


                </span>
                <span slot="activationPrice" slot-scope="text">
                    <span v-if="text">{{text}}</span>
                    <span v-else>0</span>
                </span>
                <!-- <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:120px;" @change="selectValueChange">
                        <a-select-option value="cost">花费</a-select-option>
                        <a-select-option value="activation">激活数</a-select-option>
                        <a-select-option value="activationPrice">激活成本</a-select-option>
                        <a-select-option value="eventPayRoi">ROI</a-select-option>
                        <a-select-option value="eventPay">付费次数</a-select-option>
                        <a-select-option value="eventPayPurchaseAmountFirstDay">付费金额</a-select-option>
                        <a-select-option value="eventPayCost">付费成本</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="accountIndexEchartThreePie" ref="accountIndexEchartThreePie"
                    style="width: 35%;height: 315px;border-right: 1px solid #ccc;">
                </div>
                <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;">
                </div>



            </div>

        </a-card>


        <!-- 调价 -->
        <a-modal v-model="modifyPriceVisible" title="调价" @ok="bidChangeOk" @cancel='bidChangeCancel'>
            <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: 300px;' />
                </span>
            </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> -->
        </a-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="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="请输入监测链接" v-model="newLink" />
                    </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;'>
                <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 " :reqUrl="reqUrl"/>
            </div>
        </a-modal>
        <customColumnProject :visible="visible" :listNum="listNum" :fiexColumn="columnsFixd" :mediaType="1"
            @closeCustomColumn="closeCustomColumn" @changeColumn="changeColumn" />
        <customColumnProject :visible="visibleIndex" :listNum="listNumIndex" :fiexColumn="columnsFixdIndex"
            :mediaType="3" @closeCustomColumn="closeCustomColumnIndex" @changeColumnIndex="changeColumnIndex" />
    </div>
</template>

<script>
    import customColumnProject from './customColumnProject.vue'
    import keepPersonData from './new-keep-data.js';
    import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
    import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
    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');
    import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
    import { mapGetters } from 'vuex'
    export default {
        components: { customColumnProject, Treeselect },
        data() {
            return {
                targetVisible: false,
                accountVisible: false,
                visibleIndex: false,
                outTableShow: true,
                modifyPriceVisible: false,
                listNum: [],
                listNumIndex: [],
                visible: false,
                scrollX: 1500,
                columnsFixd: keepPersonData.groupDelivery(),
                columnsFixdIndex: keepPersonData.groupDeliveryIndexShow(),
                valueBtn: 'cost',
                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: [],
                echartsLoadingoutTable: false,
                echartsLoading: false,
                accountDataId: '',
                indexShowS: [
                    {
                        title: '消耗(元)',
                        dataIndex: 'cost',
                        key: 'cost',
                        align: 'center',
                        scopedSlots: { customRender: 'cost' },
                    },
                ],
                columns: [
                    {
                        title: '状态操作',
                        dataIndex: 'putStatus',
                        key: 'putStatus',
                        align: 'center',
                        scopedSlots: { customRender: 'putStatus' },
                    },
                    {
                        title: '组名称',
                        dataIndex: 'unitName',
                        key: 'unitName',
                        align: 'center',
                        width: 300,
                    }, {
                        title: '消耗(元)',
                        dataIndex: 'charge',
                        key: 'charge',
                        align: 'center',
                        sorter: (a, b) => a.charge - b.charge,
                    }, {
                        title: '出价',
                        dataIndex: 'bid',
                        key: 'bid',
                        align: 'center',
                        scopedSlots: { customRender: 'bid' },
                        sorter: (a, b) => a.bid - b.bid,
                    }, {
                        title: '激活数',
                        dataIndex: 'activation',
                        key: 'activation',
                        align: 'center',
                        sorter: (a, b) => a.activation - b.activation,
                    }, {
                        title: '激活成本',
                        dataIndex: 'actionCost',
                        key: 'actionCost',
                        align: 'center',
                        sorter: (a, b) => a.actionCost - b.actionCost,
                    }, {
                        title: '操作建议',
                        dataIndex: 'operationAgree',
                        key: 'operationAgree',
                        align: 'center',
                        scopedSlots: { customRender: 'operationAgree' },

                    }, {
                        title: '操作',
                        dataIndex: 'operator',
                        key: 'operator',
                        align: 'center',
                        scopedSlots: { customRender: 'operator' },
                    },
                ],
                sourceMaterial: [
                    {
                        title: '素材',
                        dataIndex: 'coverUrl',
                        key: 'coverUrl',
                        align: 'center',
                        scopedSlots: { customRender: 'coverUrl' },
                    }, {
                        title: '素材ID',
                        dataIndex: 'signature',
                        key: 'signature',
                        align: 'center',
                    }, {
                        title: '曝光数',
                        dataIndex: 'showNum',
                        key: 'showNum',
                        align: 'center',
                        sorter: (a, b) => a.showNum - b.showNum,
                    }, {
                        title: '花费',
                        dataIndex: 'totalCost',
                        key: 'totalCost',
                        align: 'center',
                        sorter: (a, b) => a.totalCost - b.totalCost,
                    }, {
                        title: '激活数',
                        dataIndex: 'activation',
                        key: 'activation',
                        align: 'center',
                        sorter: (a, b) => a.activation - b.activation,
                    }, {
                        title: '激活成本',
                        dataIndex: 'activationPrice',
                        key: 'activationPrice',
                        align: 'center',
                        sorter: (a, b) => a.activationPrice - b.activationPrice,
                        scopedSlots: { customRender: 'activationPrice' },
                    },
                    {
                        title: '上线时间',
                        dataIndex: 'dateTime',
                        key: 'dateTime',
                        align: 'center',
                    },
                ],
                totalAll: 0,
                tablePag: {
                    pageNum: 1,
                    pageSize: 5
                },
                target: 'charge',
                order: 'descend',
                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: '',
                unitId: '',
                bidType: '',
                accountName: '',
                balance: '',
                state: '',
                totalCost: '',
                updateTime: '',
                updateTimeGroup: '',
                updateRelated: '',
                accountIndexEchartThreePieShow: true,
                accountIndexEchartTwoPieShow: true,
                accountIndexEchartThreePieShowemarks: true,
                accountIndexEchartOnePieShow: true,
                custNmaeType: '',
                selectaccountId: '',
                reqUrl:process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/participateListByMediaIdAllSubordinate'
            }
        },
        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 '-'
                }

            },
            formatNum: function (value) {
                if (!value) {
                    return '暂无数据'
                } else if (value == '暂无数据') {
                    return '暂无数据'
                }
                return Number(value).toFixed(3).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
            },
        },
        watch: {
            // accountId(n,o){
            //     if(n){

            //         this.getCurrentAccountInfo()
            //     }
            // }
        },
        mounted() {
            if (sessionStorage.getItem('personalaccountId')) {
                this.accountId = sessionStorage.getItem('personalaccountId')
            }
            this.showColumn();
            this.showIndex();
            // 获取折线图
            this.getQueryNewlyData();
            // 第一个饼图
            // this.getOnePieData();
            // 第二个饼图
            this.getGroupDataList(null)
            this.getAccountNameData();
            this.getGroupLaunchData();
            this.getEchartOnePieData();
            // 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])];

            // }
            // 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;

            //         }else{
            //             // this.$message.error(res.message)

            //         }
            //     })
            // }
        },

        methods: {
            ...mapGetters(['userInfo']),
            sortGroup(pagination, filters, sorter, { currentDataSource }) {
                this.tablePag.pageNum = pagination.current
                this.tablePag.pageSize = pagination.pageSize

                if (sorter.order) {
                    this.order = sorter.order ? sorter.order : 'descend'
                    this.target = sorter.columnKey
                    this.getGroupDataList({
                        target: sorter.columnKey,
                        order: sorter.order ? sorter.order : 'descend'
                    })
                } else {
                   
                    this.getGroupDataList(null)
                  
                }
            },
            accounthandleOk() {
                this.accountVisible = false;
                this.accountId = this.selectaccountId;
                this.getQueryNewlyData();
                this.getGroupDataList(null)
                this.getAccountNameData();
                this.getGroupLaunchData();
                this.getEchartOnePieData();

            },
            // getCurrentAccountInfo(val){
            //     getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{
            //         accountId:val || this.accountId ||undefined,

            //     }).then(res=>{
            //         if(res.success){
            //             this.currentAccount=res.result;
            //             // this.accountId=res.result.accountId
            //         }else{
            //             this.$message.error(res.message)
            //             this.currentAccount=res.result;
            //         }
            //     })
            // },
            accountCancel() {
                this.accountVisible = false;

            },
            changeAccount() {
                this.selectaccountId = this.accountId
                this.accountVisible = true;

            },
            modifyPriceClick(row) {
                // this.accountId = row.accountId
                this.unitId = row.unit_id
                console.log(this.unitId);
                this.bidType = row.bidType
                this.modifyPriceVisible = true;
            },
            //状态改变
            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.unit_id],
                    // id: record.id,
                    putStatus
                }).then((res) => {

                    record.spin = false;
                    if (res.success) {
                        this.getGroupDataList(null)
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })


            },
            // 显示指标
            indexShowClick() {
                this.visibleIndex = true;
                this.listNumIndex = [...this.indexShowS]
            },
            // 自定义列
            customColumn() {
                this.visible = true;
                this.listNum = [...this.columns]
            },
            //自定义列相关
            closeCustomColumn() {
                this.visible = false
            },
            closeCustomColumnIndex() {
                this.visibleIndex = false;
            },
            showIndex() {
                this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                    columnType: 106,
                }).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.columnsFixdIndex.length) {
                                    columns.map((item, index) => {
                                        if (index > this.columnsFixdIndex.length - 1) {
                                            item.sorter = function (a, b) { }
                                        }
                                    })
                                    columns = columns.slice(this.columnsFixdIndex.length)
                                    this.indexShowS = [...this.columnsFixdIndex, ...columns]
                                }

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

                        this.changeColumnIndex(this.indexShowS)


                    }
                })
            },
            changeColumnIndex(val) {
                if (val.length > 4) {
                    return this.$message.warning('最多只可以选择4个指标');
                } else {
                    this.valueBtn = 'cost'
                    this.getQueryNewlyData()
                    this.indexShowS = [...val]
                    let arr = JSON.stringify(this.indexShowS)
                    this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                        json: arr,
                        columnType: 106,
                    }).then((res) => {
                        // console.log(res)
                    })
                }

            },
            showColumn() {

                this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                    columnType: 103,
                }).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) {

                this.outTableShow = false;
                // val.forEach((item, index) => {
                //     if (item.title == '操作') {
                //         item.fixed = 'left'
                //         item.width = 180
                //     }
                // });

                this.$nextTick(() => {

                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
                        if ( element.dataIndex== 'actionCost'){
                            element.customRender = function(t) {
                                if( !t ) {
                                    return 0;
                                }
                                else {
                                    if(String(t).indexOf(".")>-1){
                                        return t.toFixed(3)
                                    }else{
                                        return t;
                                    }
                                    
                                }
                            }
                        }
                    }             
                });

                // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
                }else if(this.columns.length>8){
                    this.columns.forEach((element,index) => {
                        if(index<this.columnsFixd.length){
                            element.width=100
                            element.fixed='left'
                            if (element.dataIndex == 'operationAgree') {
                                element.width = 200
                                // element.fixed = 'left'
                            } else if (element.dataIndex == 'unitName') {
                                element.width = 300
                                // element.fixed = 'left'
                            }else if ( element.dataIndex== 'actionCost'){
                                element.customRender = function(t) {
                                    if( !t ) {
                                        return 0;
                                    }
                                    else {
                                        if(String(t).indexOf(".")>-1){
                                            return t.toFixed(3)
                                        }else{
                                            return t;
                                        }
                                        
                                    }
                                }
                            }
                        } 
                        else{
                            element.customRender = function(t) {
                                if( !t ) {
                                    return 0;
                                }
                                else {
                                    if(String(t).indexOf(".")>-1){
                                        return t.toFixed(3)
                                    }else{
                                        return t;
                                    }
                                    
                                }
                            }
                        }            
                    });

                this.scrollX=1200+200*(this.columns.length-this.columnsFixd.length)
                } else{
                this.scrollX=0;
                this.columns.forEach(element => {
                    element.width='auto'
                    element.fixed=false
                    if ( element.dataIndex== 'actionCost'){
                        element.customRender = function(t) {
                            if( !t ) {
                                return 0;
                            }
                            else {
                                if(String(t).indexOf(".")>-1){
                                    return t.toFixed(3)
                                }else{
                                    return t;
                                }
                                
                            }
                        }
                    }
                });
                }

                    this.outTableShow = true;
                    let arr = JSON.stringify(this.columns)
                    this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                        json: arr,
                        columnType: 103,
                    }).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.gender[i].cost;
                                } else if (this.selectValue == 'activationPrice') {
                                    obj.value = res.result.gender[i].activationPrice;
                                } else if (this.selectValue == 'activation') {
                                    obj.value = res.result.gender[i].activation;
                                } else if (this.selectValue == 'eventPayRoi') {
                                    obj.value = res.result.gender[i].eventPayRoi;
                                } else if (this.selectValue == 'eventPay') {
                                    obj.value = res.result.gender[i].eventPay;
                                } else if (this.selectValue == 'eventPayCost') {
                                    obj.value = res.result.gender[i].eventPayCost;
                                } else if (this.selectValue == 'eventPayPurchaseAmountFirstDay') {
                                    obj.value = res.result.gender[i].eventPayPurchaseAmountFirstDay;
                                } else if (this.selectValue == 'eventNextDayStay') {
                                    obj.value = res.result.gender[i].eventNextDayStay;
                                } else if (this.selectValue == 'leave') {
                                    obj.value = res.result.gender[i].leave;
                                }
                                pie2d[i] = obj;
                            }

                        } else {
                            centerTwo = 'center'
                            this.accountIndexEchartTwoPieShow = '暂无数据';

                        }

                        if (res.result.scene.length != 0) {
                            this.accountIndexEchartThreePieShow = '分版位数据';
                            this.accountIndexEchartThreePieShowemarks = '数据与消耗存在一定误差';
                            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.scene[i].cost;
                                } else if (this.selectValue == 'activationPrice') {
                                    obj.value = res.result.scene[i].activationPrice;
                                } else if (this.selectValue == 'activation') {
                                    obj.value = res.result.scene[i].activation;
                                } else if (this.selectValue == 'eventPayRoi') {
                                    obj.value = res.result.scene[i].eventPayRoi;
                                } else if (this.selectValue == 'eventPay') {
                                    obj.value = res.result.scene[i].eventPay;
                                } else if (this.selectValue == 'eventPayCost') {
                                    obj.value = res.result.scene[i].eventPayCost;
                                } else if (this.selectValue == 'eventPayPurchaseAmountFirstDay') {
                                    obj.value = res.result.scene[i].eventPayPurchaseAmountFirstDay;
                                } else if (this.selectValue == 'eventNextDayStay') {
                                    obj.value = res.result.scene[i].eventNextDayStay;
                                } else if (this.selectValue == 'leave') {
                                    obj.value = res.result.scene[i].leave;
                                }
                                pie3p[i] = obj;
                            }

                        } else {
                            centerthree = 'center'
                            this.accountIndexEchartThreePieShow = '暂无数据';
                            this.accountIndexEchartThreePieShowemarks = '';
                        }

                        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, this.accountIndexEchartThreePieShowemarks));




                    }

                })

            },
            selectValueChange() {
                this.getEchartOnePieData();
            },
            datePieChange() {
                this.getEchartOnePieData();
            },
            // 素材相关数据
            getGroupLaunchData() {
                this.echartsLoading = true;
                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.map(item=>{
                            return {
                                ...item,
                                stopVideo:false
                            }
                        });
                        this.echartsIpagination.total = res.result.total;
                        this.echartsLoading = false;
                    }
                })
            },
            sort(pagination, filters, sorter, { currentDataSource }) {
                // console.log(pagination, filters, sorter)          
                this.echartsIpagination.current = pagination.current
                this.echartsIpagination.pageSize = pagination.pageSize
                this.getGroupLaunchData()
            },
            projectAccountChange() {
                this.echartsIpagination.current = 1;
                this.getGroupLaunchData();
            },
            dateSourceChange() {
                this.echartsIpagination.current = 1;
                this.getGroupLaunchData();
            },
            checkboxonChange(e) {
                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.accountDataId = res.result.accountId;
                        this.balance = res.result.balance;
                        this.state = res.result.state;
                        this.totalCost = res.result.totalCost;
                    }
                })
            },
            // 获取组投放数据表格
            getGroupDataList(data) {
                this.echartsLoadingoutTable = true;
                let params = {
                    accountId: this.accountId,
                    pageNum: this.tablePag.pageNum,
                    pageSize: this.tablePag.pageSize
                }
                // if (data && data.target) {
                //     params.sortCode = data.target
                //     if (data.order == 'descend') {
                //         params.sortType = 'DESC'
                //     } else {
                //         params.sortType = 'ASC'
                //     }
                // }
                // http://139.186.29.76:8804 线上
                // http://192.168.1.43:8806  字安
                getAction('http://139.186.29.76:8804/jeecg-boot/kuaishou/realTime/getUnitDateInfo', params).then(res => {
                    if (res.code == 200) {
                        if (res.result.length > 0) {
                            res.result.forEach((item) => {
                            // item.key=item.id;
                            // item.show=false;
                            item.visible = false;
                            item.spin = false;
                        })
                        this.updateTimeGroup = res.timestamp;
                        
                        this.echartsData = res.result
                        this.totalAll = res.result[0].totalCount
                        }else{
                            this.echartsData = [];
                            this.totalAll = 0;
                            this.updateTimeGroup = res.timestamp;
                        }
                        this.echartsLoadingoutTable = false;
                    }
                })
            },
            onShowSizeChange(current, pageSize) {
                console.log(current);
                this.tablePag = {
                    pageNum: current,
                    pageSize: pageSize
                };
                this.getGroupDataList({
                    target: this.target,
                    order: this.order
                })
            },
            visibleChange() {
                this.bidErrorMessage = '';
                this.newBid = undefined;

            },
            bidChangeCancel(record) {
                this.modifyPriceVisible = false;
                this.newBid = undefined;
                this.bidErrorMessage = ''
            },
            // 修改出价
            bidChangeOk(record) {
                if (this.newBid) {
                    this.modifyPriceVisible = false
                    // record.accountId = this.accountId;
                    var params = {}
                    params.accountId = this.accountId
                    params.unitId = this.unitId
                    params.bidType= this.bidType
                    params.bid = this.newBid * 1000
                    // if(this.bidType == 2){
                    //     params.bid = this.newBid * 1000
                    // }else{
                    //     params.cpabid = this.newBid * 1000
                    // }
                    getAction('/kuaishou/dingpan/updateBid', params).then(res => {
                        // console.log(res);(res)
                        if (res.code == 0) {
                            this.$message.success(res.message)
                            this.newBid = undefined;
                            this.getGroupDataList(null)
                        }

                    })
                } else {
                    this.$message.warning('请正确填写出价');
                    // 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.unit_id,
                    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.unit_id
                }).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.unit_id,
                    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 = '';
            },
            handleHoverChange(visible) {
                if(!visible){
                    closeAllVideoFun()
                }
            },
            // 获取折线图
            getQueryNewlyData() {
                let params = {
                    accountId: this.accountId,
                    startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                    endTime: this.dateEchart[1].format('YYYY-MM-DD'),
                    type: this.valueBtn
                }
                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+':00'
                            })

                            today.data = res.result.map(itemprice => {
                                return itemprice.tData
                            });
                            today.name = '今天'
                            yesterday.data = res.result.map(itemyes => {
                                return itemyes.yData
                            });
                            yesterday.name = '昨天'
                            

                            if(timeData.length>0){
                                this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday, this.valueBtn));
                            }else{
                                 const myChart = echarts.init(document.getElementById('accountIndexEchart'))
                                myChart.dispose()
                                this.$nextTick(() => {
                                    var html =
                                        '<div class="ant-empty"><div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd"><g transform="translate(24 31.67)"><ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path></g></g></svg></div><p class="ant-empty-description">暂无数据</p></div>'
                                    document.getElementById('accountIndexEchart').innerHTML = html
                                    document.getElementById('accountIndexEchart').removeAttribute('_echarts_instance_')
                                })
                            }
                           
                        } else if (res.message == '账户日报折线图查询成功') {
                            let timeData = [];
                            let today = {};
                            let yesterday = {};

                            timeData = res.result.map(item => {
                                return item.dateTime
                            })
                            today.data = res.result.map(item => {
                                return item.data
                            })
                            today.name = '汇总'
                            // this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday, this.valueBtn));
                            if(timeData.length>0){
                                this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday, this.valueBtn));
                            }else{
                                 const myChart = echarts.init(document.getElementById('accountIndexEchart'))
                                myChart.dispose()
                                this.$nextTick(() => {
                                    var html =
                                        '<div class="ant-empty"><div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd"><g transform="translate(24 31.67)"><ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path></g></g></svg></div><p class="ant-empty-description">暂无数据</p></div>'
                                    document.getElementById('accountIndexEchart').innerHTML = html
                                    document.getElementById('accountIndexEchart').removeAttribute('_echarts_instance_')
                                })
                            }
                        }
                    }
                })




            },

            // 折线图
            initAccountIndexEchart(timeData, today, yesterday, valueBtn) {
                console.log(valueBtn);
                let option = {

                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        formatter: (today.length>0&&yesterday.length>0)&&
                        (valueBtn == 'eventPayRate' || valueBtn == 'leave' || valueBtn == 'eventNewUserPayRate' || valueBtn == 'keyActionRate') ? '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />' : ''
                    },
                    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'
                            },
                        },

                    ]
                };
                return option
            },

            // 第一个饼图
            initPieOneData(pieData, accountIndexEchartOnePieShow, center) {
                var iconNone = require('../../../../../assets/nodata.png');
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
                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
                            },
                            itemStyle: {
                                borderRadius: 5,
                                color: (params) => {
                                    return colorList[params.dataIndex]
                                }
                            },
                            data: pieData
                        }
                    ]
                };
                return option
            },
            initPieTwoData(pie2d, accountIndexEchartThreePieShow, centerthree) {
                var iconNoneThree = require('../../../../../assets/nodata.png');
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
                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
                            },
                            itemStyle: {
                                borderRadius: 5,
                                color: (params) => {
                                    return colorList[params.dataIndex]
                                }
                            },
                            data: pie2d
                        }
                    ]
                };
                return option
            },

            initPieThreeData(pie3p, accountIndexEchartTwoPieShow, centerTwo, accountIndexEchartThreePieShowemarks) {
                var iconNoneTwo = require('../../../../../assets/nodata.png');
                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
                let option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        x: centerTwo,
                        y: centerTwo,
                        text: accountIndexEchartTwoPieShow == '暂无数据' ? `{a| ${''}}` : accountIndexEchartTwoPieShow + `{b|${'  数据与消耗存在一定误差'}}`,
                        textStyle: {
                            rich: {
                                a: {
                                    height: 200,
                                    width: 280,
                                    backgroundColor: {
                                        image: iconNoneTwo,
                                    }
                                },
                                b: {
                                    fontSize: 12,
                                    color: '#ccc'

                                }
                            }

                        }
                    },
                    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
                            },
                            itemStyle: {
                                borderRadius: 5,
                                color: (params) => {
                                    return colorList[params.dataIndex]
                                }
                            },
                            data: pie3p
                        }
                    ]
                };
                return option
            },
        }, 

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