<template>
    <div class="accountPage">
        <div class="bodyBox accountBody">
            <div class="accountBodyLeft">
                <div class="accountBodyLeftCost" @click.capture="handleAccountBodyCost">
                    <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="handleCostTimeChange" 
                            />
                        </div>
                        <div class="costInfo">
                            <div class="yesterdayInfo">
                                <div style="margin-bottom:8px">昨日花费</div>
                                <div style="font-size:14px;font-weight:600">{{ Number(yearCostReportList.lastCost) | decimalsHandle }}</div>
                            </div>
                            <a-divider type="vertical"/>
                            <div class="tongbi">
                                <div style="margin-bottom:8px;margin-left: 10px;">
                                    同比
                                    <a-tooltip >
                                        <template slot="title">
                                            <span>截止此时今日与昨日的花费同比</span>
                                        </template>
                                        <a-icon type="question-circle"/>
                                    </a-tooltip>
                                </div>
                                <div style="font-size:14px;font-weight:600;text-align: end;">
                                    <span class="sign">
                                        <a-icon v-if="Number(yearCostReportList.compare) >= 0" type="rise" class="rise"/>
                                        <a-icon v-if="Number(yearCostReportList.compare) < 0" type="fall" class="fall"/>
                                    </span>
                                    {{ yearCostReportList.compare ? yearCostReportList.compare + '%' : '-' }}
                                </div>
                            </div>
                        </div>
                        <div class="costNum">{{ Number(yearCostReportList.nowCost) | decimalsHandle }}</div>
                    </div>
                    <div class="accountBodyLeftCostRight">
                        <div
                            class="gaugeEchart"
                            id="gaugeEchart"
                            style="width:100%;height:200px;margin:0 auto"
                            ref="gaugeEchart"
                        >
                            <a-empty/>
                        </div>
                        <span class="cost-radio-tool">
                            花费占比
                            <a-tooltip>
                                <template slot="title">
                                    <span>花费占比指花费占账户预算的比例</span>
                                </template>
                                <a-icon type="question-circle"/>
                            </a-tooltip>
                        </span>
                    </div>
                </div>
                <div class="accountBodyLeftOther">
                    <div class="top">
                        <div class="item" v-for="item in throwColumns" :key="item.dataIndex">
                            <div class="todyCost">
                                <span v-if="item.type === 'double'">{{ Number(item.today) | decimalsHandle }}</span>
                                <span v-if="item.type === 'string'">{{ Number(item.today).toFixed(0) | decimalsHandle }}</span>
                                <span v-if="item.type === 'int'">{{ item.today !== 0 ? item.today + '%' : 0 }}</span>
                                <span v-if="item.type === 'average'">{{ Number(item.today) | decimalsHandle }}</span>
                                <span v-if="item.type !== 'spend'" 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">
                                <span v-if="item.type !== 'spend'">/ 昨日: </span>
                                <span v-if="item.type === 'double'">{{ Number(item.yesterday) | decimalsHandle }}</span>
                                <span v-if="item.type === 'string'">{{ Number(item.yesterday).toFixed(0) | decimalsHandle }}</span>
                                <span v-if="item.type === 'int'">{{ item.yesterday !== 0 ? item.yesterday + '%' : 0 }}</span>
                                <span v-if="item.type === 'average'">{{ Number(item.yesterday) | decimalsHandle }}</span>
                            </div>
                            <span
                                v-if="item.type !== 'spend'"
                                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">
                            更新时间：{{ yearCostReportList.updTime || '-' }}
                        </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 && Number(topAccountMsg.accountMap.validBalance) | decimalsHandle }}</span>
                    </div>
                    <div class="accountBodyRightInfoItem">
                        <span class="name">投放状态：</span>
                        <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === 0 ? '投放中' : '未投放' }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bodyBox planBody">
            <div class="planBodyRight">
                <div class="title">
                    <div class="titleContext">
                        投放数据
                        <span class="titleTip">更新时间：{{ planData.length ? planData[0].updateTime : '-' }}</span>
                    </div>
                    <div style="float: right;margin-top: -23px;">
                        <a-range-picker 
                            v-model="planRangePicker"
                            style="width:200px;"
                            :allowClear="false"
                            :disabled-date="disabledDate"
                            @change="handlePlanPicker"
                        />
                    </div>
                </div>
                <div class="table">
                    <a-table
                        :columns="planColumns"
                        :data-source="planData"
                        :pagination="false"
                        :scroll="{x: 1500}"
                    >
                    <span slot="conver" slot-scope="text, record">
                        <span v-if="Number(record.cpaBid) < Number(text)" style="color: #f00;">{{ text }}</span>
                        <span v-else>{{ text }}</span>
                    </span>
                    <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">
                素材相关
                <span class="titleTip">更新时间：{{ materialData.length ? materialData[0].updateTime : '-' }}</span></div>
            <div class="materialBodyRight">
                <div class="material-table-class">
                    <a-table
                        :columns="materialColumns"
                        :data-source="materialData"
                        :pagination="false"
                        :scroll="{x: 1500}"
                    >
                        <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/noImg.png" style="width:20px">
                                </a-popover>
                            </div>
                        </span>
                    </a-table>
                    <a-pagination
                        :total="materTotalAll"
                        :show-total="total => `共 ${materTotalAll} 条`"
                        class="pagin-table-class"
                        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">{{ packageName }}</a-col>
                </a-row>
                <a-row style="margin-top: 20px;">
                    <a-col :span="6">
                        <div style="text-align:right">修改定向包：</div>
                    </a-col>
                    <a-col :span="16">
                        <a-select
                            style="width: 320px;"
                            v-model="adAudiencePackageId"
                            allow-clear
                            placeholder="请选择已有定向包名称"
                        >
                            <a-select-option
                                v-for="(item, index) in selectiveList"
                                :key="index"
                                :value="item.audience_package_id"
                            >
                                <div class="orient-list">
                                    <span class="orient-option-left" style="display: inline-block;width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                                    <span class="orient-option-right" style="display: inline-block;width: 150px;text-align:right;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.changeName }}</span>
                                </div>
                            </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
            v-if="budgetVisible"
            title="修改出价"
            :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"
                            :min="0.1"
                            :max="10000"
                            @change="handleChangeBudgetForm"
                        /> 元
                    </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() {
        let adCpaBidValidator = (rule, value, callback) => {
            if (Number(this.currentUnit.adBudget) < Number(value)) {
                callback('出价不能大于预算');
            }
            else {
                callback();
            }
        };
        return {
            adAudiencePackageId: undefined,
            planRangePicker: [],
            labelCol: {span: 4},
            wrapperCol: {span: 14},
            budgetForm: {
                budget: 0
            },
            budgetRules: {
                budget: [
                    {required: true, message: '请输入', trigger: 'blur'},
                    {validator: adCpaBidValidator, trigger: 'blur'}
                ]
            },
            budgetVisible: false,
            planTotalAll: 100,
            dateStringShow: '', // 为了账户哪儿的问号显示对应段时间
            selectaccountId: '', // 修改账户弹窗的value
            accountVisible: false,
            throwColumns: [
                {
                    title: '花费',
                    dataIndex: 'spendCost',
                    key: 'spendCost',
                    today: 0,
                    yesterday: 0,
                    type: 'spend'
                },
                {
                    title: '转化成本',
                    dataIndex: 'activationCost',
                    key: 'activationCost',
                    today: 0,
                    yesterday: 0,
                    type: 'double'
                },
                {
                    title: '转化数',
                    dataIndex: 'activation',
                    key: 'activation',
                    today: 0,
                    yesterday: 0,
                    type: 'string'
                },
                {
                    title: '转化率',
                    dataIndex: 'bclick',
                    key: 'bclick',
                    today: 0,
                    yesterday: 0,
                    type: 'int'
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'formCount',
                    key: 'formCount',
                    today: 0,
                    yesterday: 0,
                    type: 'average'
                }
            ],
            newLink: '',
            linkVisible: false,
            targetVisible: false,
            isActive: 'spendCost',
            moment,
            materialDate: [moment().subtract(1,'days').format('YYYY-MM-DD'), moment().subtract(1,'days').format('YYYY-MM-DD')],
            dateValue: [],
            planData: [],
            planPagin: {
                page: 1,
                size: 10
            },
            planColumns: [
                {
                    title: '计划名称',
                    dataIndex: 'adName',
                    key: 'adName',
                    align: 'center',
                    fixed: 'left',
                    width: 340
                },
                {
                    title: '花费',
                    dataIndex: 'costStr',
                    key: 'costStr',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.costStr - b.costStr
                },
                {
                    title: '出价',
                    dataIndex: 'cpaBid',
                    key: 'cpaBid',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.cpaBid - b.cpaBid
                },
                {
                    title: '展示数',
                    dataIndex: 'showNum',
                    key: 'showNum',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.showNum - b.showNum
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'averageShow',
                    key: 'averageShow',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.averageShow - b.averageShow
                },
                {
                    title: '点击数',
                    dataIndex: 'click',
                    key: 'click',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.click - b.click
                },
                {
                    title: '平均点击单价',
                    dataIndex: 'averageClick',
                    key: 'averageClick',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.averageClick - b.averageClick
                },
                {
                    title: '点击率',
                    dataIndex: 'clickRate',
                    key: 'clickRate',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                },
                {
                    title: '转化数',
                    dataIndex: 'convertNum',
                    key: 'convertNum',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.convertNum - b.convertNum
                },
                {
                    title: '转化率',
                    dataIndex: 'converRate',
                    key: 'converRate',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
                },
                {
                    title: '转化成本',
                    dataIndex: 'conver',
                    key: 'conver',
                    align: 'center',
                    width: 180,
                    scopedSlots: {customRender: 'conver'},
                    sorter: (a, b) => a.conver - b.conver
                },
                {
                    title: '同比',
                    dataIndex: 'compare',
                    key: 'compare',
                    align: 'center',
                    width: 180
                },
                {
                    title: '状态',
                    dataIndex: 'optStatus',
                    key: 'optStatus',
                    align: 'center',
                    width: 180,
                    scopedSlots: {customRender: 'optStatus'}
                },
                {
                    title: '操作',
                    dataIndex: 'operator',
                    key: 'operator',
                    align: 'center',
                    fixed: 'right',
                    width: 200,
                    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',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '花费',
                    dataIndex: 'cost',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.cost - b.cost
                },
                {
                    title: '展示数',
                    dataIndex: 'showMaterial',
                    key: 'showMaterial',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.showMaterial - b.showMaterial
                },
                {
                    title: '平均千次展现费用',
                    dataIndex: 'costPerThousandShow',
                    key: 'costPerThousandShow',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
                },
                {
                    title: '点击数',
                    dataIndex: 'click',
                    key: 'click',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.click - b.click
                },
                {
                    title: '平均点击单价',
                    dataIndex: 'costPerClick',
                    key: 'costPerClick',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.costPerClick - b.costPerClick
                },
                {
                    title: '点击率',
                    dataIndex: 'clickRate',
                    key: 'clickRate',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                },
                {
                    title: '转化数',
                    dataIndex: 'convertMaterial',
                    key: 'convertMaterial',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.convertMaterial - b.convertMaterial
                },
                {
                    title: '转化率',
                    dataIndex: 'convertRate',
                    key: 'convertRate',
                    align: 'center',
                    width: 180,
                    sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
                },
                {
                    title: '转化成本',
                    dataIndex: 'costConvert',
                    key: 'costConvert',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '关联创意数',
                    dataIndex: 'count',
                    key: 'count',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '上线时间',
                    dataIndex: 'materialUploadTime',
                    key: 'photoShow',
                    align: 'center',
                    width: 180,
                    scopedSlots: {customRender: 'photoShow'}
                }
            ],
            materialData: [],
            materTotalAll: 0,
            accountIndexEchartSpinning: false, // 账户模块的指标的echart
            newDataSortCode: 'charge',
            newDataSortType: 'DESC',
            materialSortCode: 'charge',
            materialSortType: 'DESC',
            directionalList: [],
            promotionTypeList: [
                {
                    value: 'EXTERNAL',
                    label: '落地页'
                },
                {
                    value: 'ARTICLE',
                    label: '文章推广'
                },
                {
                    value: 'GOODS',
                    label: '商品推广'
                },
                {
                    value: 'DPA',
                    label: '商品目录'
                },
                {
                    value: 'STORE',
                    label: '门店推广'
                },
                {
                    value: 'AWEME',
                    label: '抖音号推广'
                },
                {
                    value: 'SHOP',
                    label: '店铺直投'
                },
                {
                    value: 'APP_ANDROID',
                    label: '应用下载-安卓'
                },
                {
                    value: 'APP_IOS',
                    label: '应用下载-IOS'
                }
            ],
            selectDirectionalId: undefined,
            topAccountMsg: {},
            topCostList: {},
            yearCostReportList: {}, // 环比数据
            selectiveList: [],
            currentUnit: {},
            packageName: ''
        };
    },
    mounted() {
        this.handleGetInit();
    },
    methods: {
        ...mapGetters(['userInfo']),
        handleChangeBudgetForm(e) {
            this.budgetForm.budget = Number(Number(e).toFixed(2));
        },
        handleAccountBodyCost() {
            this.isActive = 'spendCost';
            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.yearCostReportList, 'spendCost'));
        },
        // 获取所有的定向包的列表
        handleGetAdAudiencePackage(account) {
            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: account})
                .then(result => {
                    if (result.code === 0) {
                        const defaultList = result.result;
                        this.promotionTypeList.forEach(item => {
                            defaultList.forEach(val => {
                                if (val.landing_type === item.value) {
                                    val.changeName = item.label;
                                }
                            });
                        });
                        this.selectiveList = defaultList;
                    }
                    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');
            });
        },
        handleGetADAudiencePackageId(actId, id) {
            const paramsData = {
                accountId: actId,
                adId: id
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getADAudiencePackageId', paramsData).then(result => {
                if (result.code === 0) {
                    this.packageName = result.result.packageId ? this.selectiveList.filter(item => item.audience_package_id === Number(result.result.packageId))[0].name : '暂无';
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleUpdateDirectional(record) {
            this.handleGetADAudiencePackageId(this.topAccountMsg.accountMap.accountId, record.adId);
            this.currentUnit = record;
            this.targetVisible = true;
        },
        handleBudgetSure() {
            this.$refs.budgetForm.validate(valid => {
                if (valid) {
                    const paramsData = {
                        adId: this.currentUnit.adId,
                        cpaBid: this.budgetForm.budget,
                        accountId: this.topCostList.account.accountId
                    };
                    getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADCpaBid', paramsData).then(result => {
                        if (result.code === 0) {
                            this.$message.success(result.message);
                            this.budgetForm.budget = 0;
                            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 = 0;
            this.budgetVisible = false;
        },
        // 调价修改确定按钮
        handleModifyPrice(list) {
            this.currentUnit = list;
            this.budgetForm.budget = list.cpaBid;
            this.budgetVisible = true;
        },
        // 获取计划列表数据
        handleGetPlanTableList(data) {
            this.planData = [];
            const paramsData = {
                accountId: data.account.accountId,
                startTime: this.planRangePicker[0],
                endTime: this.planRangePicker[1],
                pageNum: this.planPagin.page,
                pageSize: this.planPagin.size
            };
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
                if (result.code === 0) {
                    let defaultData = result.result.list.map(item => {
                        item.converRate = item.converRate + '%';
                        return item;
                    });;
                    this.planData = [...defaultData];
                    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, 'spendCost'));
                    this.throwColumns[0].today = Number(result.result.nowCost);
                    this.throwColumns[0].yesterday = Number(result.result.lastCost);
                    this.throwColumns[1].today = Number(result.result.nowMap.conver);
                    this.throwColumns[1].yesterday = Number(result.result.lastMap.conver);
                    this.throwColumns[2].today = Number(result.result.nowMap.converNum);
                    this.throwColumns[2].yesterday = Number(result.result.lastMap.converNum);
                    this.throwColumns[3].today = Number(result.result.nowMap.converRate);
                    this.throwColumns[3].yesterday = Number(result.result.lastMap.converRate);
                    this.throwColumns[4].today = Number(result.result.nowMap.averageShow);
                    this.throwColumns[4].yesterday = Number(result.result.lastMap.averageShow);
                    this.isActive = 'spendCost';
                }
                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.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) {
            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', {accountId: value}).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: this.materialDate[0],
                endTime: this.materialDate[1],
                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.map(item => {
                        item.clickRate = item.clickRate + '%';
                        item.convertRate = item.convertRate + '%';
                        return item;
                    });
                    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() {
            if (!this.adAudiencePackageId) {
                this.$message.error('请选择定向包');
                return;
            }
            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 = undefined;
                    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 = undefined;
            this.packageName = '';
            this.targetVisible = false;
        },
        handleAccounthandleOk() {
            const paramsData = {
                account: {
                    accountId: this.selectaccountId
                },
                startTime: this.dateValue[0],
                endTime: this.dateValue[1]
            };
            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.materialDate[0],
                endTime: this.materialDate[1]
            };
            this.handleGetmaterialData(paramsData);
        },
        // TODO 暂时功能隐藏 跳转到拒审重提-创意页面
        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);
        },
        handleCostTimeChange(date, dateString) {
            this.dateValue = dateString;
            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);
        },
        // 默认echarts
        initAccountIndexEchart(data, type) {
            const LastX = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.time) : [];
            const todayX = data.nowMap.costList.length ? 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 === 'spendCost') {
                tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.cost) : [];
                yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.cost) : [];
            }
            else if (type === 'activationCost') {
                tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.conver) : [];
                yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.conver) : [];
            }
            else if (type === 'activation') {
                tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.convertNum) : [];
                yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.convertNum) : [];
            }
            else if (type === 'bclick') {
                tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.converRate) : [];
                yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.converRate) : [];
            }
            else if (type === 'formCount') {
                tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.averageShow) : [];
                yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.averageShow) : [];
            }
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        let isType = '';
                        let showBai = this.isActive === 'bclick' ? '%' : '';
                        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++) {
                            const showTime = specialIdentification === '时' ? params[i].seriesName : '';
                            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>${showTime} ${params[i].axisValue}${specialIdentification} ${params[i].data}${showBai}<br />`;
                        }
                        return option;
                    }
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0
                },
                xAxis: [
                    {
                        type: 'category',
                        show: false,
                        boundaryGap: false,
                        data: [],
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    {
                        type: 'category',
                        show: false,
                        boundaryGap: false,
                        data: [],
                        axisPointer: {
                            type: 'none'
                        }
                    }
                ],
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        name: '今天',
                        data: [],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        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: 1,
                        showSymbol: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#3CC6A5',
                            width: 3
                        },
                        itemStyle: {
                            color: '#3CC6A5',
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: '#3CC6A5' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'white' // 100% 处的颜色
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
            option.xAxis[0].data = todayX;
            option.xAxis[1].data = LastX;
            option.series[0].name = data.nowMap.costList.length ? data.nowMap.costList[0].statDatetime : '';
            option.series[1].name = data.lastMap.costList.length ? data.lastMap.costList[0].statDatetime : '';
            option.series[0].data = tadayShowY;
            option.series[1].data = yestodayShowY;
            return option;
        },
        // 花费占比echarts
        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) {
                                    return value + '%';
                                }
                                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;
        }
    }
};
</script>
<style lang="scss">
    .orient-list {
        display: flex;
        justify-content: space-between;
        width: 260px;
        .orient-option-left {
            float: left;
        }
        .orient-option-right {
            float: right;
        }
    }
    .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;
        }
        .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;
            }
        }
        .pagin-table-class {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            margin-bottom: 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: 80%;
            margin-right: 26px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .accountBodyRight {
            width: 18%;
            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: 100%;
                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%;
            margin-left: 15px;
            position: relative;
            .cost-radio-tool {
                position: absolute;
                bottom: 34px;
                left: 28%;
            }
        }
        .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%;
            }
            .item:nth-child(1) {
                width: 0;
            }
            .todyCost {
                font-size: 1.2rem;
                font-weight: 700;
                color:#303133;
                margin-bottom: 10px;
                width: 100%;
            }
            .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: auto;
        }
        .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>
