<template>
    <div class="accountPage">
        <div class="bodyBox accountBody">
            <div class="accountBodyLeft">
                <div class="accountBodyLeftCost">
                    <div class="accountBodyLeftCostLeft">
                        <div class="top">
                            <div class="title">花费</div>
                            <a-range-picker 
                                v-model="dateValue"
                                style="width: 180px;"
                                :allowClear="false"
                                format="YYYY-MM-DD"
                                :disabled-date="disabledDate"
                                @change="onChange"
                            />
                        </div>
                        <div class="costInfo">
                            <div class="yesterdayInfo">
                                <div style="margin-bottom:8px">上阶段花费</div>
                                <div style="font-size:14px;font-weight:600">
                                    {{ yearCostReportList.lastCost }}
                                </div>
                            </div>
                            <a-divider type="vertical"/>
                            <div class="tongbi">
                                <div style="margin-bottom:8px">
                                    环比
                                    <a-tooltip >
                                        <template slot="title">
                                            <span>截止此时与上一阶段的花费同比</span>
                                        </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </div>
                                <div style="font-size:14px;font-weight:600">
                                    {{ yearCostReportList.compare }}
                                </div>
                            </div>
                        </div>
                        <div class="costNum">
                            {{ yearCostReportList.nowCost }}
                        </div>
                    </div>
                    <div class="accountBodyLeftCostRight">
                        <div
                            class="gaugeEchart"
                            id="gaugeEchart"
                            style='width:100%;height:200px;margin:0 auto' ref="gaugeEchart"
                        >
                            <a-empty/>
                        </div>
                    </div>
                </div>
                <div class="accountBodyLeftOther">
                    <!-- <span class="showIndex">显示指标</span> -->
                    <div class="top">                       
                        <div class="item" v-for="item in throwColumns" :key="item.dataIndex">
                            <div class="todyCost">
                                <span v-if="item.type === 'double'">{{ item.today | decimalsHandle }}</span>
                                <span v-else-if="item.type === 'string'">{{ item.today + '%' }}</span>
                                <span v-else-if="item.type === 'int'">{{ item.today | formatCurrency }}</span>
                                <span class="sign">
                                    <a-icon type="rise" class="rise" v-show="item.today - item.yesterday > 0"/>
                                    <a-icon type="fall" class="fall" v-show="item.today - item.yesterday < 0" />
                                </span>
                            </div>
                            <div class="yesterdayCost">
                                <a-tooltip >
                                    <template slot="title">
                                    <span>
                                        <!-- {{dateValue[0].format('YYYY-MM-DD') === dateValue[1].format('YYYY-MM-DD') ? moment(dateValue[0]).subtract(1,'days').format('YYYY-MM-DD') : dateStringShow}}
                                        的{{item.title}} -->
                                    </span>
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>：
                                <span v-if="item.type === 'double'">{{ item.yesterday | decimalsHandle }}</span>
                                <span v-else-if="item.type === 'string'">{{ item.yesterday +'%' }}</span>
                                <span v-else-if="item.type === 'int'">{{ item.yesterday | formatCurrency }}</span>
                            </div>
                            <span
                                class="IndexName"
                                :class="{'IndexNameActive': isActive === item.dataIndex}"
                                @click="handleGetActiveIndexName(item)"
                            >
                                <a-tooltip>
                                    <template slot="title">
                                        <span>{{ item.title }}</span>
                                    </template>
                                    <span style="display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px">
                                        {{ item.title }}
                                    </span>
                                </a-tooltip>
                            </span>
                        </div>
                    </div>
                    <div class="echart" style="margin-top:20px;position:relative">
                        <!-- <div style="position:absolute;right:5px;top:-15px">
                            更新时间：2021-05-21 13:28:30
                        </div> -->
                        <a-spin :spinning="accountIndexEchartSpinning">
                            <div
                                class="accountIndexEchart"
                                id="accountIndexEchart"
                                style='width:100%;height:150px;margin:0 auto;'
                                ref="accountIndexEchart"
                            >
                                <a-empty/>
                            </div>
                        </a-spin>
                    </div>
                </div>
            </div>
            <div class="accountBodyRight">
                <div class="accountBodyRighTitle">
                    <div class="acount-body-content" @click="handleChangeAccount">
                        <p class="acount-body-title">{{ topAccountMsg.accountMap && topAccountMsg.accountMap.authName }}</p>
                        <span><a-icon type="down" style="font-size:14px"/></span>
                    </div>
                    <div class="accountBodyRighTitleID">账户ID：{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountId }}</div>
                </div> 
                <div class="accountBodyRightInfo">
                    <div class="accountBodyRightInfoItem">
                        <span class="name">余额：</span>
                        <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.validBalance }}</span>
                    </div>
                    <div class="accountBodyRightInfoItem">
                        <span class="name">投放状态：</span>
                        <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === '0' ? '投放中' : '未投放' }}</span>
                    </div>
                    <div class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
                        <span class="name">被拒创意数：</span>
                        <span>0</span>
                        <a-icon type="right" style="font-size:12px;position:absolute;right:10px;top:16px"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="bodyBox planBody">
            <div class="planBodyRight">
                <div class="title">
                    <div class="titleContext">
                        投放数据
                    </div>
                    <div style="float: right;margin-top: -23px;">
                        <a-range-picker 
                            v-model="planRangePicker"
                            style="width:200px;"
                            :allowClear="false"
                            @change="handlePlanPicker"
                        />
                    </div>
                </div>
                <div class="table" style="height:400px">
                    <a-table
                        :columns="planColumns"
                        :data-source="planData"
                        :pagination="false"
                        @change="handlePlaneSort"
                    >
                    <span slot="optStatus" slot-scope="text, record">
                        <a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
                    </span>
                    <span slot="operator" slot-scope="text, record">
                        <a @click="handleModifyPrice(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>
                                <a @click="handleUpdateDirectional(record)">修改定向</a>
                            </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </span>
                    </a-table>
                    <a-pagination
                        class="pagin-table-class"
                        :total="planTotalAll"
                        :show-total="total => `共 ${planTotalAll} 条`"
                        size="small"
                        show-size-changer
                        show-quick-jumper
                        @change="handleOnShowSizeChange"
                        @showSizeChange="handleOnShowSizeChange"
                    />
                </div>
            </div>
        </div>
        <div class="bodyBox materialBody">
            <div class="dataPicker">
                <div>
                    <a-range-picker 
                        v-model="materialDate"
                        style="width:200px;"
                        :allowClear="false"
                        :disabled-date="disabledDate"
                        @change="materialDataChange"
                    />
                </div>
            </div>
            <div class="titleContext source-material">>素材相关</div>
            <div class="materialBodyRight">
                <div class="material-table-class">
                    <a-table
                        :columns="materialColumns"
                        :data-source="materialData"
                        :pagination="false"
                        @change="materialChange"
                    >
                        <span slot="posterUrl" slot-scope="text,record">
                            <div style="background:#e8e8e8;text-align:center;border-radius:3px">
                                <a-popover placement="right">
                                    <template slot="content">
                                        <video :src="record.videoUrl" style="width:250px" controls></video>
                                    </template>
                                    <img v-if="text" :src="text" style="width:20px">
                                    <img v-if="!text" src="@/assets/feishu.png" style="width:20px">
                                </a-popover>
                            </div>
                        </span>
                    </a-table>
                    <a-pagination
                        class="pagin-table-class"
                        :total="materTotalAll"
                        :show-total="total => `共 ${materTotalAll} 条`"
                        size="small"
                        show-size-changer
                        show-quick-jumper
                        @change="handleSourceMaterialChange"
                        @showSizeChange="handleSourceMaterialChange"
                    />
                </div>
            </div>
        </div>
        <!-- 修改定向的modal -->
        <a-modal
            v-model="targetVisible"
            title="修改定向"
            @ok="handleTargethandleOk"
            @cancel="handleTargethandleCancel"
        >
            <div class="linkBody">
                <a-row>
                    <a-col :span="6">
                        <div style="text-align:right">修改定向包：</div>
                    </a-col>
                    <a-col :span="16">
                        <a-select
                            style="width: 240px;"
                            v-model="adAudiencePackageId"
                            allow-clear
                            placeholder="请选择已有定向包名称"
                        >
                            <a-select-option
                                v-for="(item, index) in selectiveList"
                                :key="index"
                                :value="item.audience_package_id"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
        <!-- 修改账户modal -->
        <a-modal
            :visible="accountVisible"
            :width="800"
            title="切换账户"
            @ok="handleAccounthandleOk"
            @cancel="handleAccountCancel"
        >
            <div class="linkBody" style="height:100px;display:flex;">
                <div style="height:32px;line-height:32px">选择账户：</div>
                <tree-select
                    :appId.sync="selectaccountId"
                    :multiple="false"
                    request="1,3"
                    ref="treeSelect"
                    style="margin-bottom:8px;width:600px "
                >
                </tree-select>     
            </div>
        </a-modal>
        <a-modal
            title="修改调价"
            v-if="budgetVisible"
            :visible="budgetVisible"
            dialog-class="mode-modal-class"
            @ok="handleBudgetSure"
            @cancel="handleBudgetCancel"
        >
            <div>
                <a-form-model
                    ref="budgetForm"
                    :model="budgetForm"
                    :rules="budgetRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-model-item label="调价" prop="budget">
                        <a-input-number
                            v-model="budgetForm.budget"
                        /> 元
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment';
import {getAction} from '@/api/manage';
import TreeSelect from '@/views/modules/Statistics/components/Treeselect.vue';
import {mapGetters} from 'vuex';
import {urlAcount} from './headline-view-server.js';

// 引入基本模板
let echarts = require('echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/map');
require('echarts/lib/chart/gauge');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/graphic');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
export default {
    name: 'headline-view',
    components: {
        TreeSelect
    },
    data() {
        return {
            adAudiencePackageId: '',
            planRangePicker: [],
            labelCol: {span: 4},
            wrapperCol: {span: 14},
            budgetForm: {
                budget: 0
            },
            budgetRules: {
                budget: [
                    {required: true, message: '请输入', trigger: 'blur'}
                ]
            },
            budgetVisible: false,
            planTotalAll: 100,
            dateStringShow: '', // 为了账户哪儿的问号显示对应段时间
            selectaccountId: '', // 修改账户弹窗的value
            accountVisible: false,
            throwColumns: [
                {
                    title: '转化成本',
                    dataIndex: 'activationCost',
                    key: 'activationCost',
                    today: 0,
                    yesterday: 0,
                    type: 'double'
                },
                {
                    title: '转化数',
                    dataIndex: 'activation',
                    key: 'activation',
                    today: 0,
                    yesterday: 0,
                    type: 'int'
                },
                {
                    title: '转化率',
                    dataIndex: 'bclick',
                    key: 'bclick',
                    today: 0,
                    yesterday: 0,
                    type: 'int'
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'formCount',
                    key: 'formCount',
                    today: 0,
                    yesterday: 0,
                    type: 'int'
                }
            ],
            newLink: '',
            linkVisible: false,
            targetVisible: false,
            isActive: 'activationCost',
            moment,
            materialDate: [],
            dateValue: [],
            planData: [],
            planPagin: {
                page: 1,
                size: 10
            },
            planColumns: [
                {
                    title: '计划名称',
                    dataIndex: 'adName',
                    key: 'adName',
                    align: 'center',
                    width: 120,
                    ellipsis: true
                },
                {
                    title: '花费',
                    dataIndex: 'cost',
                    key: 'cost',
                    align: 'center'
                },
                {
                    title: '出价',
                    dataIndex: 'bid',
                    key: 'bid',
                    align: 'center'
                },
                {
                    title: '展示数',
                    dataIndex: 'showNum',
                    key: 'showNum',
                    align: 'center'
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'averageShow',
                    key: 'averageShow',
                    align: 'center'
                },
                {
                    title: '点击数',
                    dataIndex: 'click',
                    key: 'click',
                    align: 'center'
                },
                {
                    title: '平均点击单价',
                    dataIndex: 'averageClick',
                    key: 'averageClick',
                    align: 'center'
                },
                {
                    title: '点击率',
                    dataIndex: 'clickRate',
                    key: 'clickRate',
                    align: 'center'
                },
                {
                    title: '转化数',
                    dataIndex: 'convertNum',
                    key: 'convertNum',
                    align: 'center'
                },
                {
                    title: '转化率',
                    dataIndex: 'converRate',
                    key: 'converRate',
                    align: 'center'
                },
                {
                    title: '转化成本',
                    dataIndex: 'conver',
                    key: 'conver',
                    align: 'center'
                },
                {
                    title: '环比',
                    dataIndex: 'compare',
                    key: 'compare',
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'optStatus',
                    key: 'optStatus',
                    align: 'center',
                    scopedSlots: {customRender: 'optStatus'}
                },
                {
                    title: '操作',
                    dataIndex: 'operator',
                    key: 'operator',
                    align: 'center',
                    scopedSlots: {customRender: 'operator'}
                }
            ],
            materPagin: {
                page: 1,
                size: 10
            },
            materialColumns: [
                {
                    title: '素材',
                    dataIndex: 'posterUrl',
                    key: 'posterUrl',
                    align: 'center',
                    scopedSlots: {customRender: 'posterUrl'},
                    width: 100,
                    fixed: 'left'
                },
                {
                    title: '素材ID',
                    dataIndex: 'materialId',
                    key: 'materialId',
                    align: 'center'
                },
                {
                    title: '花费',
                    dataIndex: 'cost',
                    align: 'center',
                    sorter: () => {}
                },
                {
                    title: '展示数',
                    dataIndex: 'showMaterial',
                    key: 'showMaterial',
                    align: 'center'
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'costPerThousandShow',
                    key: 'costPerThousandShow',
                    align: 'center'
                },
                {
                    title: '点击数',
                    dataIndex: 'click',
                    key: 'click',
                    align: 'center'
                },
                {
                    title: '平均店家单价',
                    dataIndex: 'costPerClick',
                    key: 'costPerClick',
                    align: 'center'
                },
                {
                    title: '点击率',
                    dataIndex: 'clickRate',
                    key: 'clickRate',
                    align: 'center'
                },
                {
                    title: '转化数',
                    dataIndex: 'convertMaterial',
                    key: 'convertMaterial',
                    align: 'center'
                },
                {
                    title: '转化率',
                    dataIndex: 'convertRate',
                    key: 'convertRate',
                    align: 'center'
                },
                {
                    title: '转化成本',
                    dataIndex: 'costConvert',
                    key: 'costConvert',
                    align: 'center'
                },
                {
                    title: '关联创意数',
                    dataIndex: 'count',
                    key: 'count',
                    align: 'center'
                },
                {
                    title: '上线时间',
                    dataIndex: 'materialUploadTime',
                    key: 'photoShow',
                    align: 'center',
                    scopedSlots: {customRender: 'photoShow'},
                    sorter: () => {}
                }
            ],
            materialData: [
                {
                    signature: '123',
                    photoShow: '345'
                }
            ],
            materTotalAll: 0,
            accountIndexEchartSpinning: false, // 账户模块的指标的echart
            newDataSortCode: 'charge',
            newDataSortType: 'DESC',
            materialSortCode: 'charge',
            materialSortType: 'DESC',
            directionalList: [],
            selectDirectionalId: undefined,
            topAccountMsg: {},
            topCostList: {},
            yearCostReportList: {}, // 环比数据
            selectiveList: [],
            currentUnit: {}
        };
    },
    mounted() {
        this.handleGetInit();
    },
    methods: {
        ...mapGetters(['userInfo']),
        // 获取所有的定向包的列表
        handleGetAdAudiencePackage(account) {
            const params = {
                accountId: account
            };
            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', params)
                .then(result => {
                    if (result.code === 0) {
                        this.selectiveList = result.result || [];
                    }
                    else {
                        this.$message.error(result.message);
                    }
                })
                .catch(error => {
                    console.log(error, 'eeee');
                });
        },
        handleChangeAccount() {
            this.accountVisible = true;
        },
        // 计划开关的切换事件
        handleSwitchChang(checked, data) {
            const paramsData = {
                adId: data.adId,
                optStatus: checked ? 'enable' : 'disable',
                accountId: this.topCostList.account.accountId
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updPlanStatus', paramsData).then(result => {
                if (result.code === 0) {
                    this.$message.success(result.message);
                    this.handleGetPlanTableList(this.topCostList);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleUpdateDirectional(record) {
            this.currentUnit = record;
            this.targetVisible = true;
        },
        handleBudgetSure() {
            this.$refs.budgetForm.validate(valid => {
                if (valid) {
                    const paramsData = {
                        adId: this.currentUnit.adId,
                        bid: this.budgetForm.budget,
                        accountId: this.topCostList.account.accountId
                    };
                    getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADBid', paramsData).then(result => {
                        if (result.code === 0) {
                            this.$message.success(result.message);
                            this.budgetForm.budget = '';
                            this.budgetVisible = false;
                            this.handleGetPlanTableList(this.topCostList);
                        }
                        else {
                            this.$message.error(result.message);
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                }
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 调价修改取消按钮
        handleBudgetCancel() {
            this.budgetForm.budget = '';
            this.budgetVisible = false;
        },
        // 调价修改确定按钮
        handleModifyPrice(list) {
            this.currentUnit = list;
            this.budgetVisible = true;
        },
        // 获取计划列表数据
        handleGetPlanTableList(data) {
            const paramsData = {
                accountId: data.account.accountId,
                startTime: data.startTime,
                endTime: data.endTime,
                pageNum: this.planPagin.page,
                pageSize: this.planPagin.size
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
                if (result.code === 0) {
                    console.log(result.result, '计划列表数据');
                    this.planData = result.result.list;
                    this.planTotalAll = result.result.total;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 获取echarts数据
        handleYearOnYearCost(data) {
            const paramsData = {
                accountId: data.account.accountId,
                startTime: data.startTime,
                endTime: data.endTime
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportYearOnYearCost', paramsData).then(result => {
                if (result.code === 0) {
                    this.yearCostReportList = result.result;
                    this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
                    this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'activationCost'));
                    this.throwColumns[0].today = Number(result.result.nowMap.conver);
                    this.throwColumns[0].yesterday = Number(result.result.lastMap.conver);
                    this.throwColumns[1].today = Number(result.result.nowMap.converNum);
                    this.throwColumns[1].yesterday = Number(result.result.lastMap.converNum);
                    this.throwColumns[2].today = Number(result.result.nowMap.converRate);
                    this.throwColumns[2].yesterday = Number(result.result.lastMap.converRate);
                    this.throwColumns[3].today = Number(result.result.nowMap.averageShow);
                    this.throwColumns[3].yesterday = Number(result.result.lastMap.averageShow);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 初始化数据
        handleGetInit() {
            const paramsData = {
                userId: this.userInfo().id,
                type: 'bytedance'
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/initAccountIdAndTime', paramsData).then(result => {
                if (result.code === 0) {
                    this.topCostList = result.result;
                    const defaultTime = [result.result.startTime, result.result.endTime];
                    this.dateValue = [...defaultTime];
                    this.planRangePicker = [...defaultTime];
                    this.materialDate = [...defaultTime];
                    this.handleGetAccountMessage(result.result.account.accountId);
                    this.handleYearOnYearCost(result.result);
                    this.handleGetPlanTableList(result.result);
                    this.handleGetmaterialData(result.result);
                    this.handleGetAdAudiencePackage(result.result.account.accountId);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 获取头部最右侧数据
        handleGetAccountMessage(value) {
            const paramsData = {
                accountId: value
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', paramsData).then(result => {
                if (result.code === 0) {
                    this.topAccountMsg = result.result;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 获取素材列表数据
        handleGetmaterialData(data) {
            const paramsData = {
                accountId: data.account.accountId,
                startTime: data.startTime,
                endTime: data.endTime,
                pageNum: this.materPagin.page,
                pageSize: this.materPagin.size
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
                if (result.code === 0) {
                    this.materialData = result.result.list;
                    this.materTotalAll = result.result.total;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleGetActiveIndexName(val) {
            this.isActive = val.dataIndex;
            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.yearCostReportList, val.dataIndex));
        },
        // 修改定向的确定按钮
        handleTargethandleOk() {
            const paramsData = {
                accountId: this.topCostList.account.accountId,
                adId: this.currentUnit.adId,
                audiencePackageId: this.adAudiencePackageId
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADAudiencePackage', paramsData).then(result => {
                if (result.code === 0) {
                    this.adAudiencePackageId = '';
                    this.targetVisible = false;
                    this.$message.success(result.message);
                    this.handleGetPlanTableList(this.topCostList);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 修改定向的取消按钮
        handleTargethandleCancel() {
            this.adAudiencePackageId = '';
            this.targetVisible = false;
        },
        handleAccounthandleOk() {
            const paramsData = {
                account: {
                    accountId: this.selectaccountId
                },
                startTime: this.topCostList.startTime,
                endTime: this.topCostList.startTime
            };
            this.topCostList = paramsData;
            this.handleGetAccountMessage(this.selectaccountId);
            this.handleYearOnYearCost(paramsData);
            this.handleGetPlanTableList(paramsData);
            this.handleGetmaterialData(paramsData);
            this.handleGetAdAudiencePackage(this.selectaccountId);
            this.selectaccountId = '';
            this.accountVisible = false;
        },
        handleAccountCancel() {
            this.selectaccountId = '';
            this.accountVisible = false;
        },
        // 计划点击分页操作
        handleOnShowSizeChange(current, pageSize) {
            this.planPagin = {
                page: current,
                size: pageSize
            };
            const paramsData = {
                account: {
                    accountId: this.topCostList.account.accountId
                },
                startTime: this.planRangePicker[0],
                endTime: this.planRangePicker[1]
            };
            this.handleGetPlanTableList(paramsData);
        },
        // 素材点击分页操作
        handleSourceMaterialChange(current, pageSize) {
            this.materPagin = {
                page: current,
                size: pageSize
            };
            const paramsData = {
                account: {
                    accountId: this.topCostList.account.accountId
                },
                startTime: this.planRangePicker[0],
                endTime: this.planRangePicker[1]
            };
            this.handleGetmaterialData(paramsData);
        },
        // have 跳转到拒审重提-创意页面
        gorejectCreativePage() {
            this.$router.push('/Statistics/refuseDataCreatNew');
        },
        disabledDate(current) {
            return current && !(current > (moment().subtract(1, 'months')) && current < moment());
        },
        // 计划点击时间切换数据
        handlePlanPicker(date, dateString) {
            this.planRangePicker = dateString;
            this.planPagin = {
                page: 1,
                size: 10
            };
            const paramsData = {
                account: {
                    accountId: this.topCostList.account.accountId
                },
                startTime: dateString[0],
                endTime: dateString[1]
            };
            this.handleGetPlanTableList(paramsData);
        },
        onChange(date, dateString) {
            if (dateString.length > 0 && dateString[0] !== dateString[1]) {
                let interval = date[1].diff(date[0], 'days');
                this.dateStringShow = `${moment(date[0]).subtract(1 + interval, 'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1, 'days').format('YYYY-MM-DD')}`;
            }
            const paramsData = {
                account: {
                    accountId: this.topCostList.account.accountId
                },
                startTime: dateString[0],
                endTime: dateString[1]
            };
            this.handleYearOnYearCost(paramsData);
        },
        // 获取echart的值
        initEchart(idName, optionName) {
            const chart = this.$refs[idName];
            if (chart) {
                const myChart = echarts.init(document.getElementById(idName));
                myChart.clear();
                myChart.setOption(optionName);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }
        },
        // 素材选择时间切换数据
        materialDataChange(date, dateString) {
            this.materialDate = dateString;
            this.materPagin = {
                page: 1,
                size: 10
            };
            const paramsData = {
                account: {
                    accountId: this.topCostList.account.accountId
                },
                startTime: dateString[0],
                endTime: dateString[1]
            };
            this.handleGetmaterialData(paramsData);
        },
        // have
        initAccountIndexEchart(data, type) {
            const todayX = data.nowMap.costList.map(item => item.time);
            let specialIdentification = '';
            if (todayX.length && todayX[0].indexOf('-') !== -1) {
                specialIdentification = '';
            }
            else {
                specialIdentification = '时';
            }
            let tadayShowY = [];
            let yestodayShowY = [];
            if (type === 'activationCost') {
                tadayShowY = data.nowMap.costList.map(item => item.conver);
                yestodayShowY = data.lastMap.costList.map(item => item.conver);
            }
            else if (type === 'activation') {
                tadayShowY = data.nowMap.costList.map(item => item.convertNum);
                yestodayShowY = data.lastMap.costList.map(item => item.convertNum);
            }
            else if (type === 'bclick') {
                tadayShowY = data.nowMap.costList.map(item => item.converRate);
                yestodayShowY = data.lastMap.costList.map(item => item.converRate);
            }
            else if (type === 'formCount') {
                tadayShowY = data.nowMap.costList.map(item => item.averageShow);
                yestodayShowY = data.lastMap.costList.map(item => item.averageShow);
            }
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        let isType = '';
                        this.throwColumns.forEach(item => {
                            if (item.dataIndex === this.isActive) {
                                isType = item.title;
                            }
                        });
                        let option = isType + '<br/>';
                        for (let i = 0, length = params.length; i < length; i++) {
                            option += `<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>` + ' ' + params[i].axisValue + specialIdentification + '  ' + params[i].data + '<br />';
                        }
                        return option;
                    }
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0
                },
                xAxis: [
                    {
                        type: 'category',
                        show: false,
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisPointer: {
                            type: 'none'
                        }
                        
                    },
                    {
                        type: 'category',
                        show: false,
                        boundaryGap: false,
                        data: ['1', '2', '3', '4', '5', '6', '7'],
                        axisPointer: {
                            type: 'none'
                        }
                    }
                ],
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        name: '今天',
                        data: [],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 1,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#2461F1' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'white' // 100% 处的颜色
                                }]
                            }
                        }
                    },
                    {
                        name: '昨天',
                        data: [],
                        type: 'line',
                        smooth: true,
                        xAxisIndex: 0,
                        showSymbol: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#3CC6A5',
                            width: 3
                        },
                        itemStyle: {
                            color: '#3CC6A5',
                            borderWidth: 2,
                            borderColor: '#fff'
                        }
                    }
                ]
            };
            option.xAxis[0].data = todayX;
            option.xAxis[1].data = todayX;
            option.series[0].data = tadayShowY;
            option.series[1].data = yestodayShowY;
            return option;
        },
        // have
        initGaugechart(value) {
            let dataArr = value.split('%')[0];
            let colorSet = {
                color: '#fff'
            };
            let option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: '内部进度条',
                        type: 'gauge',
                        radius: '40%',
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [dataArr / 100 || 0, colorSet.color],
                                    [1, '#111F42']
                                ],
                                width: 8
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false

                        },
                        splitLine: {
                            show: false
                        },
                        itemStyle: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                if (value !== 0) {
                                    let num = Math.round(value);
                                    return parseInt(num).toFixed(0) + '%';
                                }
                                else {
                                    return 0;
                                }
                            },
                            offsetCenter: [0, 52],
                            textStyle: {
                                padding: [0, 0, 0, 0],
                                fontSize: 18,
                                fontWeight: '700',
                                color: colorSet.color
                            }
                        },
                        title: { // 标题
                            show: true,
                            offsetCenter: [0, 80], // x, y，单位px
                            textStyle: {
                                color: '#fff',
                                fontSize: 14, // 表盘上的标题文字大小
                                fontWeight: 400,
                                fontFamily: 'PingFangSC'
                            }
                        },
                        data: [{
                            name: '花费占比',
                            value: dataArr
                        }],
                        pointer: {
                            show: true,
                            length: '75%',
                            radius: '20%',
                            width: 3 // 指针粗细
                        },
                        animationDuration: 4000
                    },
                    {
                        name: '外部刻度',
                        type: 'gauge',
                        radius: '50%',
                        min: 0, // 最小刻度
                        max: 100, // 最大刻度
                        splitNumber: 5, // 刻度数量
                        startAngle: 225,
                        endAngle: -45,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: [
                                    [1, 'rgba(0,0,0,0)']
                                ]
                            }
                        }, // 仪表盘轴线
                        axisLabel: {
                            show: true,
                            color: '#fff',
                            distance: -20,
                            formatter: function(v) {
                                switch (v + '') {
                                    case '0':
                                        return '0';
                                    case '10':
                                        return '10';
                                    case '20':
                                        return '20';
                                    case '30':
                                        return '30';
                                    case '40':
                                        return '40';
                                    case '50':
                                        return '50';
                                    case '60':
                                        return '60';
                                    case '70':
                                        return '70';
                                    case '80':
                                        return '80';
                                    case '90':
                                        return '90';
                                    case '100':
                                        return '100';
                                }
                            }
                        }, // 刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 5,
                            lineStyle: {
                                color: colorSet.color, // 用颜色渐变函数不起作用
                                width: 1
                            },
                            length: -8
                        }, // 刻度样式
                        splitLine: {
                            show: true,
                            length: -10,
                            lineStyle: {
                                color: colorSet.color // 用颜色渐变函数不起作用
                            }
                        }, // 分隔线样式
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    }
                ]
            };
            return option;
        },
        initNewDataChart(data) {
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新上计划数', '新上组数', '新上创意数']
                },
                xAxis: {
                    type: 'category',
                    data: data.xdata,
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#999'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        onZero: false,
                        show: false,
                        color: '#999',
                        lineStyle: {
                            color: '#999'
                        }
                    }
                },
                series: [
                    {
                        name: '新上计划数',
                        data: data.campaign,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#AC8BF9',
                            width: 3
                        },
                        itemStyle: {
                            color: '#AC8BF9',
                            borderWidth: 2,
                            borderColor: '#fff'
                        }
                    },
                    {
                        name: '新上组数',
                        data: data.unit,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        showSymbol: false,
                        lineStyle: {
                            color: '#4CA4F9',
                            width: 3
                        },
                        itemStyle: {
                            color: '#4CA4F9',
                            borderWidth: 2,
                            borderColor: '#fff'
                            
                        }
                    },
                    {
                        name: '新上创意数',
                        data: data.creative,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        showSymbol: false,
                        lineStyle: {
                            color: '#3CC6A5',
                            width: 3
                        },
                        itemStyle: {
                            color: '#3CC6A5',
                            borderWidth: 3,
                            borderColor: '#fff'
                        }
                    }
                ]
            };
            return option;
        },
        // 点击分页
        handlePlaneSort(pagination, filters, sorter, {currentDataSource}) {
            if (sorter.order === 'descend') {
                this.newDataSortType = 'DESC';
                this.newDataSortCode = sorter.columnKey;
            }
            else if (sorter.order === 'ascend') {
                this.newDataSortType = 'ASC';
                this.newDataSortCode = sorter.columnKey;
            }
            else {
                this.newDataSortType = 'DESC';
                this.newDataSortCode = 'charge';
            }
            this.getLaunchData();
        },
        materialChange(pagination, filters, sorter) {
            console.log(sorter, 'v--sorter--sorter');
            if (sorter.order === 'descend') {
                this.materialSortType = 'DESC';
                this.materialSortCode = sorter.columnKey;
            }
            else if (sorter.order === 'ascend') {
                this.materialSortType = 'ASC';
                this.materialSortCode = sorter.columnKey;
            }
            else {
                this.materialSortType = 'DESC';
                this.materialSortCode = 'charge';
            }
        }
    }
};
</script>
<style lang="scss">
    .accountPage .accountBody{
        line-height: 1;
        .ant-input {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-variant: tabular-nums;
            list-style: none;
            -webkit-font-feature-settings: 'tnum';
            font-feature-settings: 'tnum';
            position: relative;
            display: inline-block;
            width: 100%;
            height: 32px;
            padding: 4px 0px;
            color: white;
            font-size: 14px;
            line-height: 1.5;
            background-color: transparent;
            background-image: none;
            border:none;
            border-radius: 4px;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        .ant-calendar-range-picker-separator {
            display: inline-block;
            min-width: 10px;
            height: 100%;
            color: white;
            white-space: nowrap;
            text-align: center;
            vertical-align: top;
            pointer-events: none;
        }

        .ant-divider, .ant-divider-vertical {
            position: relative;
            top: -0.06em;
            display: inline-block;
            width: 1px;
            height: 2.9em;
            margin: 0 8px;
            vertical-align: middle;
        }
    }
    .accountPage .materialBody{
        .ant-divider, .ant-divider-vertical {
            position: relative;
            top: 25px;
            display: inline-block;
            width: 1px;
            height: 366px;
            margin: 0 8px;
            vertical-align: middle;
            
        }
    }
    .accountPage .dataMode{
        .ant-divider, .ant-divider-vertical {
            position: relative;
            top: 10px;
            display: inline-block;
            width: 1px;
            height: 350px;
            margin: 0 8px;
            vertical-align: middle;
        }
    }
    .ant-tooltip {
        max-width: 400px;
    }
</style>
<style lang="scss" scoped>
    .accountPage {
        .common-input-long {
            width: 140px !important;
        }
        .pagin-table-class {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        p {
            margin-bottom: 0px;
        }
        .echart {
            margin-top: 30px;
        }
        .bodyBox {
            width: 100%;
            margin-bottom: 26px;
        }
        .accountBody {
            height: 300px;
            display: flex;
            justify-content: space-between;
            
        }
        .accountBodyLeft {
            width: 75%;
            margin-right: 26px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .accountBodyRight {
            width: 25%;
            padding: 25px;
        }
        .accountBodyLeft,.accountBodyRight {
            border-radius: 10px;
            background: white;
            
        }
        .accountBodyLeftCost {
            background: #2461F1;
            border-radius: 10px;
            height: 260px;
            width: 40%;
            flex-shrink: 0;
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .accountBodyLeftCostLeft {
            width: 55%;
            .title{
                font-size: 26px;
                font-weight: 700;
                padding: 0;
                margin-bottom: 10px;
            }
            .costInfo {
                margin: 20px 0 0 0;
                width: 70%;
                display: flex;
                justify-content: space-between;    
            }
            .yesterdayInfo {
                width:50%;
                flex-shrink: 0;
            }
            .costNum{
                width: 90%;
                font-size: 26px;
                font-weight: 700;
                color:#2461F1 ;
                background: white;
                text-align: center;
                border-radius: 10px;
                margin: 20px 0;
                padding: 10px 0px;
            }
            @media screen and (max-width:1980px) and (min-width:1560px) {
                .costNum {
                    font-size: 22px;
                }
            }
            @media screen and (max-width:1560px) and (min-width:1280px) {
                .costNum {
                    font-size: 20px;
                }
            }
            @media screen and (max-width:1280px) {
                .costNum {
                    font-size: 18px;
                }
            }
            
        }
        .accountBodyLeftCostRight {
            width: 45%;
        }
        .accountBodyLeftOther {
            width: 60%;
            margin-left: 15px;
            padding-left: 15px;
            border-left: 1px solid #eee;
            position: relative;
            .top {
                display: flex;
                justify-content: space-between;
                padding-top: 8px;
            }
            .item {
                width: 25%;
            }
            .todyCost {
                font-size: 1.2rem;
                font-weight: 700;
                color:#303133;
                margin-bottom: 10px;
                width: 100%;
            }
            .sign {
                font-size: 18px;
                .rise {
                    color: #F2637B;
                    width: 16px;
                    height: 16px;
                    text-align: center;
                    transform: rotate(-30deg);
                }
                .fall {
                    color: green;
                    width: 16px;
                    height: 16px;
                    text-align: center;
                    transform: rotate(30deg);
                }
                .up {
                    width: 16px;
                    height: 16px;
                    text-align: center;
                    background-color: #F2637B;
                    border-radius: 5px;
                    color: white;
                }
            }
            .yesterdayCost {
                font-size: 0.89rem;
                font-weight: 500;
                color:#303133;
                margin-bottom: 8px;
            }
            .IndexName {
                font-size: 15px;
                font-weight: 600;
                color:#303133;
                display: inline-block;
                cursor: pointer;
            }
            .IndexNameActive {
                color:#2461F1;
            }
            .IndexNameActive::after {
                content: '';
                display: block;
                width: 15px;
                height: 3px;
                background: #2461F1;
                position: relative;
                top: 3px;
                left: 50%;
                margin-left: -8px;
            }
            .showIndex {
                position: absolute;
                top: -5px;
                right: 0px;
                font-size: 12px;
                cursor: pointer;
                color: #909399;
            }
            .showIndex:hover {
                color:#2461F1;
            }
        }
        // 第二块
        .planBody{
            display: flex;
            justify-content: space-between;
            height: 760px;
        }
        .planBodyLeft {
            width: 40%;
            height: 100%;
            background: white;
            flex-shrink: 0;
            border-radius: 10px;
        }
        .title {
            padding: 20px 20px;
        }
        .titleContext {
            font-size: 14px;
            font-weight: 600;
            color:#303133;
            margin-bottom: 0;
            
        }
        .titleContext::before {
            content:'';
            width: 5px;
            height: 5px;
            border-radius: 2.5px;
            background-color:#2461F1;
            display: inline-block;
            position: relative;
            top: -2px;
        }
        .titleTip {
            font-size: 14px;
            color: #909399;
            font-weight: 400;
            margin-left: 20px;
        }
        .planBodyRight {
            width: 100%;
            background: white;
            height: 100%;
            border-radius: 10px;
        }
        // 素材块
        .materialBody{
            border-radius: 10px;
            background: white;
            position: relative;
            display: flex;
            padding:20px 20px;
            .dataPicker {
                position: absolute;
                top: 25px;
                right: 20px;
            }
            .source-material {
                position: absolute;
                top: 30px;
                left: 20px;
            }
        }
        .materialBodyRight {
            width: 100%;
            height: 100%;
            padding-top: 60px;
            .material-table-class {
                height: 100%;
                overflow-y: auto;
            }
        }
        .accountBodyRighTitle {
            .acount-body-content {
                display: flex;
                align-items: center;
                .acount-body-title {
                    width: 340px;
                    font-size: 26px;
                    font-weight: 700;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        .accountBodyRighTitleID {
            margin-top: 15px;
            font-size: 14px;
            color: #c0c4cc;
        }
        .accountBodyRightInfoItem {
            background: rgb(238,241,255);
            padding:15px 15px;
            margin: 20px 0 0;
            border-radius: 5px;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .name {
                font-size: 16px;
                font-weight: 600;
            }
        }
        .createNum {
            cursor: pointer;
            position: relative;
        }
        .targetBody {
            border-radius: 10px;
            background: white;
            .dataMode{
                display: flex;
                justify-content: space-between;
            }
            .topOpt {
                padding: 20px;
                display: flex;
                justify-content: flex-end;
            }
        }
        .adPositionMode,
        .ageMode,
        .genderMode {
            width: 32%;
            height: 100%;
        }
    }
</style>
