<style lang="less" scoped>
@import 'kuaishouReport';
::v-deep.vue-treeselect__control {
    line-height: 20px !important;
}
::v-deep .table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control {
    height: auto !important;
    line-height: 20px !important;
}
</style>
<template>
    <div class="account-report">
        <div class="directional-content">
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
                    <a-row :gutter="24">
                        <a-col :md="16" :sm="16" :xxl="16">
                            <a-form-item label="账户名称">
                                <selectTreeAccount
                                    v-decorator="['accountIds', { initialValue: [] }]"
                                    multiple
                                    style="width:100%"
                                    :reqUrl="reqUrl"
                                    :limit="1"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <!-- v-decorator="[
                                        'dateValue',
                                        { initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')] }
                                    ]" -->
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="时间选择">
                                <a-range-picker
                                    v-model="dateValue"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="返点比例">
                                <a-input-number
                                    :min="0.1"
                                    :max="10"
                                    :step="0.1"
                                    v-decorator="['disscount', { initialValue: 1 }]"
                                    :disabled="rebatePropDisabled"
                                    @change="rebatePropChange"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="12" style="display: flex;justify-content: flex-end;">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <!-- <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                > -->
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </div>

        <div class="show">
            <div class="showBox">
                <div class="title">
                    <div class="infotitle">总消耗</div>
                    <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')">
                        <template slot="title">{{ dateValue[0].format('HH:00') }}点之前所有数据对比</template>
                        <span class="icon">
                            <a-icon type="exclamation-circle" />
                        </span>
                    </a-tooltip>
                </div>
                <div class="infoNum">
                    ￥
                    <span class="red">{{ costLink.cost | decimalsHandle }}</span>
                    <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ costLink.CostSumLink | toPercentage }}</span
                    >
                </div>
            </div>
            <div class="showBox">
                <div class="title">
                    <div class="infotitle">折后消耗</div>
                    <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')">
                        <template slot="title">{{ dateValue[0].format('HH:00') }}点之前所有数据对比</template>
                        <span class="icon">
                            <a-icon type="exclamation-circle" />
                        </span>
                    </a-tooltip>
                </div>
                <div class="infoNum">
                    ￥
                    <span class="red">{{ discountCostLink.discountCost | decimalsHandle }}</span>
                    <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ discountCostLink.discountCostLink | toPercentage }}</span
                    >
                </div>
            </div>
            <div class="showBox">
                <div class="title">
                    <div class="infotitle">封面点击数</div>
                    <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')">
                        <template slot="title">{{ dateValue[0].format('HH:00') }}点之前所有数据对比</template>
                        <span class="icon">
                            <a-icon type="exclamation-circle" />
                        </span>
                    </a-tooltip>
                </div>
                <div class="infoNum">
                    ￥
                    <span class="red">{{ photoClickLink.photoClick | formatCurrency }}</span>
                    <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ photoClickLink.photoClickLink | toPercentage }}</span
                    >
                </div>
            </div>
            <div class="showBox">
                <div class="title">
                    <div class="infotitle">封面曝光数</div>
                    <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')">
                        <template slot="title">{{ dateValue[0].format('HH:00') }}点之前所有数据对比</template>
                        <span class="icon">
                            <a-icon type="exclamation-circle" />
                        </span>
                    </a-tooltip>
                </div>
                <div class="infoNum">
                    ￥
                    <span class="red">{{ photoShowLink.photoShow | formatCurrency }}</span>
                    <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ photoShowLink.photoShowLink | toPercentage }}</span
                    >
                </div>
            </div>
            <div class="showBox">
                <div class="title">
                    <div class="infotitle">素材曝光数</div>
                    <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')">
                        <template slot="title">{{ dateValue[0].format('HH:00') }}点之前所有数据对比</template>
                        <span class="icon">
                            <a-icon type="exclamation-circle" />
                        </span>
                    </a-tooltip>
                </div>
                <div class="infoNum">
                    ￥
                    <span class="red">{{ aClickLink.aClick | formatCurrency }}</span>
                    <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ aClickLink.aClickLink | toPercentage }}</span
                    >
                </div>
            </div>
        </div>
        <div class="chartBox">
            <a-tabs default-active-key="cost" @change="callback">
                <a-tab-pane key="cost" tab="总消耗"> </a-tab-pane>
                <a-tab-pane key="discountCost" tab="折后消耗"> </a-tab-pane>
                <a-tab-pane key="photoClick" tab="封面点击数"> </a-tab-pane>
                <a-tab-pane key="photoShow" tab="封面曝光数"> </a-tab-pane>
                <a-tab-pane key="zhuanhua" tab="素材曝光数"> </a-tab-pane>
            </a-tabs>
            <div id="sectionChart" style="width:100%;height:300px" ref="sectionChart"></div>
            <!-- <div id="noData" v-else style='width:100%;height:300px'>暂无数据</div> -->
        </div>
        <div class="tableBox">
            <div class="tableTop">
                <a-tooltip>
                    <template slot="title">
                        日期选择具体某一天之后，这里可以查看具体的时间段数据哦~
                    </template>
                    <!-- v-show="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')" -->
                    <a-select
                        placeholder="请选择具体时间段"
                        style="width: 160px"
                        @change="timeChange"
                        v-model="timeDefaultValue"
                        label-in-value
                        class="selectTime"
                        v-show="dateValue[1].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')"
                    >
                        <a-select-option v-for="(i, index) in 24" :key="index" :value="index">{{
                            index >= 10 ? `00:00-${index}:59` : `00:00-0${index}:59`
                        }}</a-select-option>
                    </a-select>
                </a-tooltip>

                <a-button
                    type="primary"
                    class="export"
                    @click="exportExcel"
                    :disabled="!!!getFormData('accountIds') || getFormData('accountIds').length == 0"
                    >导出报表</a-button
                >
                <a-button type="primary" class="add" @click="customColumns">自定义列</a-button>
            </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="tableData"
                bordered
                id="outTable"
                :pagination="false"
                :scroll="{ x: scrollX }"
                :loading="dataLoading"
                ref="accountTable"
                :width="tableWidth"
                @change="sort"
                style="word-break: break-all;font-size:16px;font-weight:600"
            >
                <span slot="statDate" slot-scope="text, records">
                    {{
                        text
                            ? text == '总计'
                                ? text
                                : ('' + text).substr(0, 4) +
                                  '-' +
                                  ('' + text).substr(4, 2) +
                                  '-' +
                                  ('' + text).substr(6, 2)
                            : '-'
                    }}
                </span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{
                    play100FeedBreak | formatCurrency
                }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
                <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
                    eventCreditGrantLandingPage | formatCurrency
                }}</span>
                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
                    eventCreditGrantLandingPageCost | decimalsHandle
                }}</span>
                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
                    eventCreditGrantLandingPageRate | toPercentage
                }}</span>
                <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
                    play25FeedBreakRate | toPercentage
                }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
                <!-- 新加数据 -->

                <span slot="clickRate" slot-scope="clickRate">{{ clickRate | toPercentage }}</span>
                <span slot="bClickRate" slot-scope="bClickRate">{{ bClickRate | toPercentage }}</span>

                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
                <span slot="installFinishRate" slot-scope="installFinishRate">{{
                    installFinishRate | toPercentage
                }}</span>
                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
                    gameAddictionCost | decimalsHandle
                }}</span>
                <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
                    downloadFinishCost | decimalsHandle
                }}</span>
                <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
                    downloadStartCost | decimalsHandle
                }}</span>
                <span slot="installFinishCost" slot-scope="installFinishCost">{{
                    installFinishCost | decimalsHandle
                }}</span>
                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>

                <!--  -->
                <span slot="downloadStartRate" slot-scope="downloadStartRate">{{
                    downloadStartRate | toPercentage
                }}</span>
                <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
                    downloadFinishRate | toPercentage
                }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
                    activeRegisterRate | toPercentage
                }}</span>
                <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
                    gameAddictionRate | toPercentage
                }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="eventCreditGrantAppRate" slot-scope="eventCreditGrantAppRate">{{
                    eventCreditGrantAppRate | toPercentage
                }}</span>
                <span slot="play3sRate" slot-scope="play3sRate">{{ play3sRate | toPercentage }}</span>
                <span slot="formCountRate" slot-scope="formCountRate">{{ formCountRate | toPercentage }}</span>

                <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
            </a-table>
        </div>
        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />
    </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'

import { getAction, postAction, downFile, downFilePost } from '@/api/manage'

import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
// const SHOW_PARENT = TreeSelect.SHOW_ALL;
import DatePicker from '@/components/DatePicker.vue'
import customColumn from '../components/customColumn.vue'

import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
// 引入基本模板
var echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
// 引入提示框和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')

let sectionOption = {
    tooltip: {
        trigger: 'axis',

        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow',
        }
    },
    legend: {
        data: []
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '0%',
        top: '12%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: true
        }
    ],
    series: [
        {
            name: '',
            type: 'line',
            smooth: true,
            data: [],
            color: '#32CD32'
        },
        {
            name: '',
            type: 'line',
            smooth: true,
            data: [],
            color: '#8A2BE2'
        },
        {
            name: '环比',
            type: 'line',
            smooth: true,
            data: [],
            color: 'rgba(0,0,0,0)'
        }
    ]
}
let length = 0
const columnsFixd = [
    {
        title: '时间',
        dataIndex: 'statDate',
        scopedSlots: { customRender: 'statDate' },
        align: 'center',
        key: 'statDate',
        width: 200,
        fixed: 'left'
    },
    {
        title: '账户ID',
        dataIndex: 'accountId',
        align: 'center',
        width: 200,
        fixed: 'left',
        scopedSlots: { customRender: 'accountId' }
    },
    {
        title: '账户昵称',
        dataIndex: 'authName',
        align: 'center',
        width: 200,
        fixed: 'left'
    }
]

const initVariableColimns = [
    {
        title: '消耗(元)',
        dataIndex: 'cost',
        width: 150,
        tip: '广告在投放期间的花费总额',
        align: 'center',
        scopedSlots: { customRender: 'cost' },
        sorter: () => {}
    },
    // {
    //     title: '折后消耗(元)',
    //     dataIndex: 'discountCost',
    //     width:150,
    //     tip: '广告在投放期间的花费总额',
    //     align: 'center',
    //     scopedSlots: { customRender: 'discountCost' },
    //     sorter: () => {}
    // },
    {
        title: '封面曝光数',
        dataIndex: 'photoShow',
        tip: '广告在瀑布流被观看次数',
        align: 'center',
        scopedSlots: { customRender: 'photoShow' },
        sorter: () => {}
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
        align: 'center',

        scopedSlots: { customRender: 'photoClick' },
        sorter: () => {}
    },
    {
        title: '封面点击率',
        dataIndex: 'clickRate',
        tip: '封面点击数占封面展示数百分比',
        align: 'center',
        scopedSlots: { customRender: 'clickRate' },
        sorter: () => {}
    },
    {
        title: '素材曝光数',
        dataIndex: 'aClick',
        tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
        align: 'center',

        scopedSlots: { customRender: 'aClick' },
        sorter: () => {}
    },
    {
        title: '行为数',
        dataIndex: 'bClick',
        tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
        align: 'center',

        scopedSlots: { customRender: 'bClick' },
        sorter: () => {}
    },

    {
        title: '行为率',
        dataIndex: 'bClickRate',
        tip: '行为数占素材曝光数百分比',
        align: 'center',
        scopedSlots: { customRender: 'bClickRate' },
        sorter: () => {}
    },
    {
        title: '平均千次封面曝光花费（元）',
        dataIndex: 'cpm',
        tip: '花费/封面曝光数*1000',
        align: 'center',
        scopedSlots: { customRender: 'cpm' },
        sorter: () => {}
    },
    {
        title: '平均封面点击单价（元）',
        dataIndex: 'cpc',
        tip: '花费／封面点击数',
        align: 'center',
        scopedSlots: { customRender: 'cpc' },
        sorter: () => {}
    },
    {
        title: '平均行为单价（元）',
        dataIndex: 'cpb',
        tip: '总花费/行为数',
        align: 'center',
        scopedSlots: { customRender: 'cpb' },
        sorter: () => {}
    }
]

let initDay = {
    x: [],
    today: {
        y: [],
        name: '今天'
    },
    yesterday: {
        y: [],
        name: '昨天'
    },
    huanbi: {
        name: '环比',
        y: []
    }
}

export default {
    components: {
        DatePicker,
        customColumn,
        selectTreeAccount
    },

    data() {
        return {
            moment,
            //账户的数据
            accountId: [],
            mediaId: '', //媒体类型
            //折扣数值
            discountSelect: 1.0,
            discountDisabled: false,
            //返点比例
            rebateProp: 1.0,
            rebatePropDisabled: false,
            discount: 1,
            left: 0,
            //treeselect的参数
            treeValue: [],
            treeData: [],
            SHOW_PARENT,
            //top区域数据
            discountCostLink: {},
            photoShowLink: {},
            photoClickLink: {},
            costLink: {},
            aClickLink: {},
            //日期矿打开
            openOptions: false,
            //子元素的数据存储
            type: 1, //这个没用但是不能删  请求类型
            dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'day')],

            //处理按钮禁用
            searchDisabled: false,
            refreshDisabled: false,
            resetDisabled: false,

            //echart区域的tab
            tabKey: 'cost',
            sectionOption: JSON.parse(JSON.stringify(sectionOption)),
            tabCost: {},
            tabPhotoClick: {}, //封面点击数
            tabPhotoShow: {},
            tabDiscountCost: {},
            tabAClick: {},
            //table的数据
            timeSelectValue: 23, //table上选择时间
            timeValueString: '',
            timeDefaultValue: undefined,
            visible: false, //自定义页面的打开
            columns: [...columnsFixd, ...initVariableColimns], //table的表头
            columnsFixd,
            tableData: [],
            scrollX: 1000,
            tableWidth: '', //设置表格的列宽
            loading: false,
            target: 'cost', //默认消耗排序
            order: 'desc', //默认降序

            listNum: [],

            myChart: {},
            chartData: [],
            form: this.$form.createForm(this),
            reqUrl: process.env.VUE_APP_BASE_REPORT_URL + '/account/report/getProjectAccountByUserId',
            accountListUrl: process.env.VUE_APP_BASE_REPORT_URL + '/account/report/kuaishou/list',
            charUrl: process.env.VUE_APP_BASE_REPORT_URL + '/account/report/kuaishou/chart',

            dataLoading: false,
            dateRanges: {
                昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
            }
        }
    },
    watch: {
        type(n, o) {},
        dateValue(newName, oldName) {
            // console.log(newName,oldName)
            this.timeValueString = undefined
            this.timeSelectValue = 23
            this.timeDefaultValue = ''
            if (
                newName[0].format('YYYY-MM-DD') == oldName[0].format('YYYY-MM-DD') ||
                newName[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')
            ) {
            } else {
                this.handleQueryList()
            }
        }
    },
    methods: {
        ...mapGetters(['userInfo']),
        //table选择时间函数
        timeChange(value) {
            this.timeSelectValue = value.key
            this.timeValueString = value.label
            this.handleQueryList()
        },
        handleQueryList() {
            // this.ipagination.current = 1
            // event.preventDefault()
            const paramsData = this.form.getFieldsValue()
            console.log(paramsData)
            this.handleGetTableList(paramsData)
        },
        handleResetForm() {
            // this.ipagination.current = 1
            this.form.resetFields()
            this.handleGetTableList({})
        },
        handleGetTableList(data) {
            if (data.accountIds && data.accountIds.length > 0) {
                const paramsData = {
                    ...data,
                    startDate: this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
                    endDate: this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
                    userId: this.userInfo().id,
                    hour: this.timeSelectValue,
                    target: this.target, //默认消耗排序
                    order: this.order //默认降序
                    // pageNo: this.ipagination.current,
                    // pageSize: this.ipagination.pageSize
                }
                this.tableData = []
                this.dataLoading = true
                postAction(this.accountListUrl, paramsData)
                    .then(res => {
                        this.dataLoading = false
                        if (res.success) {
                            this.tableData = res.result
                            // this.ipagination.total = result.result.total || 0
                            if (this.dateValue[0].format('YYYY-MM-DD') == this.dateValue[1].format('YYYY-MM-DD')) {
                                for (let i = res.result.length - 1; i > res.result.length - 4; i--) {
                                    res.result[i].authName = '-'
                                    res.result[i].accountId = '-'
                                    res.result[i].statDate = '总计'
                                }
                                for (let key in res.result[res.result.length - 1]) {
                                    if (res.result[res.result.length - 1][key] < 1) {
                                        res.result[res.result.length - 1][key] =
                                            (res.result[res.result.length - 1][key] * 100).toFixed(2) + '%'
                                    }
                                }

                                res.result[res.result.length - 1].statDate = '环比'
                                res.result[res.result.length - 2].statDate = '昨日总计(相对)'

                                this.tableData = res.result
                                length = this.tableData.length - 3
                            } else {
                                res.result[res.result.length - 1].statDate = '总计'
                                res.result[res.result.length - 1].authName = '-'
                                res.result[res.result.length - 1].accountId = '-'
                                this.tableData = res.result
                                length = this.tableData.length - 1
                            }
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                    .catch(error => {
                        this.dataLoading = false
                        console.log(error, 'eeee')
                    })

                postAction(this.charUrl, { ...paramsData, mediaId: 2 }).then(res => {
                    if (res.success) {
                        if (res.result.sumData.discountCostLink) {
                            this.discountCostLink = res.result.sumData.discountCostLink
                            this.photoShowLink = res.result.sumData.photoShowLink
                            this.photoClickLink = res.result.sumData.photoClickLink
                            this.costLink = res.result.sumData.costLink
                            this.aClickLink = res.result.sumData.aClickLink
                        }

                        this.tabCost = JSON.parse(JSON.stringify(initDay))

                        this.tabPhotoClick = JSON.parse(JSON.stringify(initDay))

                        this.tabPhotoShow = JSON.parse(JSON.stringify(initDay))

                        this.tabDiscountCost = JSON.parse(JSON.stringify(initDay))

                        this.tabAClick = JSON.parse(JSON.stringify(initDay))

                        let chartData = res.result.chartData

                        chartData.map((item, index) => {
                            if (item.statHour || item.statHour == 0) {
                                //说明是查询 天 数据；
                                // console.log('day')
                                item.statHour = item.statHour >= 10 ? `${item.statHour}:00` : `0${item.statHour}:00`
                                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                                    //说明是今天
                                    this.tabPhotoClick.yesterday.y.push(item.photoClick)
                                    this.tabCost.yesterday.y.push(item.cost)
                                    this.tabPhotoShow.yesterday.y.push(item.photoShow)
                                    this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                    this.tabAClick.yesterday.y.push(item.aClick)

                                    this.tabPhotoClick.x.push(item.statHour)
                                    this.tabCost.x.push(item.statHour)
                                    this.tabPhotoShow.x.push(item.statHour)
                                    this.tabDiscountCost.x.push(item.statHour)
                                    this.tabAClick.x.push(item.statHour)

                                    if (item.afterData) {
                                        this.tabPhotoClick.today.y.push(item.afterData.photoClick)
                                        this.tabCost.today.y.push(item.afterData.cost)
                                        this.tabPhotoShow.today.y.push(item.afterData.photoShow)
                                        this.tabDiscountCost.today.y.push(item.afterData.discountCost)
                                        this.tabAClick.today.y.push(item.afterData.aClick)
                                        //环比
                                        this.tabPhotoClick.huanbi.y.push(item.afterData.photoClickProportion)
                                        // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
                                        this.tabCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabPhotoShow.huanbi.y.push(item.afterData.photoShowProportion)
                                        this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabAClick.huanbi.y.push(item.afterData.aClickProportion)
                                    } else {
                                        this.tabPhotoClick.today.y.push(0)
                                        this.tabCost.today.y.push(0)
                                        this.tabPhotoShow.today.y.push(0)
                                        this.tabDiscountCost.today.y.push(0)
                                        this.tabAClick.today.y.push(0)

                                        this.tabPhotoClick.huanbi.y.push(0)
                                        this.tabCost.huanbi.y.push(0)
                                        this.tabPhotoShow.huanbi.y.push(0)
                                        this.tabDiscountCost.huanbi.y.push(0)
                                        this.tabAClick.huanbi.y.push(0)
                                    }
                                } else {
                                    if (item.afterData) {
                                        this.tabPhotoClick.yesterday.y.push(item.afterData.photoClick)
                                        this.tabCost.yesterday.y.push(item.afterData.cost)
                                        this.tabPhotoShow.yesterday.y.push(item.afterData.photoShow)
                                        this.tabDiscountCost.yesterday.y.push(item.afterData.discountCost)
                                        this.tabAClick.yesterday.y.push(item.afterData.aClick)

                                        this.tabPhotoClick.x.push(item.afterData.statHour)
                                        this.tabCost.x.push(item.afterData.statHour)
                                        this.tabPhotoShow.x.push(item.afterData.statHour)
                                        this.tabDiscountCost.x.push(item.afterData.statHour)
                                        this.tabAClick.x.push(item.afterData.statHour)
                                    }
                                }
                            } else if (item.statDate) {
                                //  console.log('date')
                                this.tabPhotoClick.yesterday.y.push(item.photoClick)
                                this.tabCost.yesterday.y.push(item.cost)
                                this.tabPhotoShow.yesterday.y.push(item.photoShow)
                                this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                this.tabAClick.yesterday.y.push(item.aClick)
                                let data =
                                    ('' + item.statDate).substr(0, 4) +
                                    '-' +
                                    ('' + item.statDate).substr(4, 2) +
                                    '-' +
                                    ('' + item.statDate).substr(6, 2)

                                this.tabPhotoClick.x.push(data)
                                this.tabCost.x.push(data)
                                this.tabPhotoShow.x.push(data)
                                this.tabDiscountCost.x.push(data)
                                this.tabAClick.x.push(data)
                            }
                        })
                        this.callback(this.tabKey)
                    }
                })
            } else {
                this.$message.error('请选择账户')
            }
        },
        treeSearch() {
            console.log(arguments)
        },
        treeSelect() {
            // console.log(arguments);
            // this.treeValue=arguments[0].value
        },
        //项目改变后的事件
        treeChange(val) {
            // console.log(this.treeData)
            console.log(val)

            this.accountId = []
            //选择一个后禁用其他
            if (val.length == 1) {
                if (val[0] * 1) {
                    let selectindex = 0
                    this.treeData.forEach((ele, index) => {
                        if (ele.children) {
                            ele.children.map((item, ind) => {
                                if (item.value == val[0]) {
                                    selectindex = index
                                    this.mediaId = ele.mediaId
                                }
                            })
                        }
                    })
                    // console.log(selectindex)
                    if (selectindex || selectindex == 0) {
                        this.treeData.forEach((ele, index) => {
                            if (index != selectindex) {
                                ele.disableCheckbox = true
                                if (ele.children) {
                                    ele.children.map((item, ind) => {
                                        item.disableCheckbox = true
                                    })
                                }
                            }
                        })
                    }
                } else {
                    //  console.log(1)
                    this.treeData.forEach((ele, index) => {
                        if (ele.value != val[0]) {
                            ele.disableCheckbox = true

                            if (ele.children) {
                                ele.children.forEach((item, ind) => {
                                    item.disableCheckbox = true
                                })
                            }
                        }
                        if (ele.value == val[0]) {
                            this.mediaId = ele.mediaId
                        }
                    })
                }
                // console.log(this.mediaId)
                // if(this.mediaId=='2'){

                //     this.discountDisabled=true;
                //     this.rebatePropDisabled=false;
                //     this.discount=this.rebateProp;
                // }else{
                //   this.rebatePropDisabled=true;
                //   this.discountDisabled=false;
                //   this.discount=this.discountSelect;
                // }
            }

            if (val.length == 0) {
                this.treeData.forEach((ele, index) => {
                    ele.disableCheckbox = false
                    this.mediaId = ele.mediaId
                    if (ele.children) {
                        ele.children.forEach((item, ind) => {
                            item.disableCheckbox = false
                        })
                    }
                })
                this.rebatePropDisabled = false
                this.discountDisabled = false
                this.discount = 1.0
            }
            if (val) {
                val.forEach((ele, index) => {
                    if (ele * 1) {
                        this.accountId.push(ele)
                    } else {
                        let projectArr = this.treeData.filter(item => {
                            return item.value == ele
                        })
                        // console.log(projectArr)
                        projectArr[0].children.forEach(element => {
                            this.accountId.push(element.value)
                        })
                    }
                })
            }

            console.log(this.accountId)
        },

        disabledDate(current) {
            // console.log(current)

            return current && current > moment()
        },
        filterOption(input, option) {
            console.log(input, option)
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        //查询按钮的事件
        searchgetData() {
            this.myChart.clear()
            if (this.accountId.length > 0) {
                // console.log();

                this.loading = true
                this.searchDisabled = true

                this.discountCostLink = {}
                this.photoShowLink = {}
                this.photoClickLink = {}
                this.costLink = {}
                this.aClickLink = {}

                this.tabCost = {}
                this.tabPhotoClick = {}
                ;(this.tabPhotoShow = {}), (this.tabDiscountCost = {})
                this.tabAClick = {}
                this.chartHttp({
                    mediaId: this.mediaId,
                    discount: this.discount,
                    accountIds: this.accountId,
                    startDate: this.dateValue[0].format('YYYY-MM-DD'),
                    endDate: this.dateValue[1].format('YYYY-MM-DD')
                })
                if (
                    this.accountId.length == 1 &&
                    this.dateValue[0].format('YYYY.MM.DD') != this.dateValue[1].format('YYYY.MM.DD')
                ) {
                    ;(this.target = 'statDate'), (this.order = 'asc')
                } else {
                    ;(this.target = 'cost'), (this.order = 'desc')
                }
                this.tableHttp()
            } else {
                this.$message.error('请选择账户后再查询！')
            }
        },

        //重置
        resetgetData() {
            this.loading = false
            //  this.resetDisabled=true;
            this.searchDisabled = false
            this.refreshDisabled = false
            this.treeValue = []
            // this.treeData=[];
            this.discountSelect = 1.0
            this.discountDisabled = false
            this.rebatePropDisabled = false
            this.rebateProp = 1.0
            this.treeChange([])

            this.tabCost = {}
            this.tabPhotoClick = {}
            ;(this.tabPhotoShow = {}), (this.tabDiscountCost = {})
            this.tabAClick = {}
            this.tableData = []

            this.discountCostLink = {}
            this.photoShowLink = {}
            this.photoClickLink = {}
            this.costLink = {}
            this.aClickLink = {}

            this.myChart.clear()
            this.dateValue = [moment(), moment()]
        },
        //打开日期框
        opendate() {
            this.openOptions = !this.openOptions
            //  console.log(this.openOptions)
        },
        opendateClose() {
            this.openOptions = false
            //  console.log(this.openOptions)
        },
        //请求chart数据
        chartHttp(params) {
            return new Promise((resolve, reject) => {
                postAction('/ctop/kuaishou/dailyPage/report/chart', params).then(res => {
                    //   console.log(res)
                    if (res.success) {
                        this.loading = false
                        this.refreshDisabled = false
                        this.resetDisabled = false
                        this.searchDisabled = false
                        // 待处理问题
                        this.cost = res.result.costWeekLink
                        this.click = res.result.clickWeekLink
                        this.showNum = res.result.showNumWeekLink

                        //展示的五个块的数据
                        this.discountCostLink = res.result.sumData.Sum.discountCostLink
                        this.photoShowLink = res.result.sumData.Sum.photoShowLink
                        this.photoClickLink = res.result.sumData.Sum.photoClickLink
                        this.costLink = res.result.sumData.Sum.costLink
                        this.aClickLink = res.result.sumData.Sum.aClickLink

                        //chart的数据
                        this.tabCost = JSON.parse(JSON.stringify(initDay))

                        this.tabPhotoClick = JSON.parse(JSON.stringify(initDay))

                        this.tabPhotoShow = JSON.parse(JSON.stringify(initDay))

                        this.tabDiscountCost = JSON.parse(JSON.stringify(initDay))

                        this.tabAClick = JSON.parse(JSON.stringify(initDay))

                        let chartData = res.result.chartData

                        chartData.map((item, index) => {
                            if (item.statHour || item.statHour == 0) {
                                //说明是查询 天 数据；
                                // console.log('day')
                                item.statHour = item.statHour >= 10 ? `${item.statHour}:00` : `0${item.statHour}:00`
                                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                                    //说明是今天
                                    this.tabPhotoClick.yesterday.y.push(item.photoClick)
                                    this.tabCost.yesterday.y.push(item.cost)
                                    this.tabPhotoShow.yesterday.y.push(item.photoShow)
                                    this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                    this.tabAClick.yesterday.y.push(item.aClick)

                                    this.tabPhotoClick.x.push(item.statHour)
                                    this.tabCost.x.push(item.statHour)
                                    this.tabPhotoShow.x.push(item.statHour)
                                    this.tabDiscountCost.x.push(item.statHour)
                                    this.tabAClick.x.push(item.statHour)

                                    if (item.afterData) {
                                        this.tabPhotoClick.today.y.push(item.afterData.photoClick)
                                        this.tabCost.today.y.push(item.afterData.cost)
                                        this.tabPhotoShow.today.y.push(item.afterData.photoShow)
                                        this.tabDiscountCost.today.y.push(item.afterData.discountCost)
                                        this.tabAClick.today.y.push(item.afterData.aClick)
                                        //环比
                                        this.tabPhotoClick.huanbi.y.push(item.afterData.photoClickProportion)
                                        // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
                                        this.tabCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabPhotoShow.huanbi.y.push(item.afterData.photoShowProportion)
                                        this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabAClick.huanbi.y.push(item.afterData.aClickProportion)
                                    } else {
                                        this.tabPhotoClick.today.y.push(0)
                                        this.tabCost.today.y.push(0)
                                        this.tabPhotoShow.today.y.push(0)
                                        this.tabDiscountCost.today.y.push(0)
                                        this.tabAClick.today.y.push(0)

                                        this.tabPhotoClick.huanbi.y.push(0)
                                        this.tabCost.huanbi.y.push(0)
                                        this.tabPhotoShow.huanbi.y.push(0)
                                        this.tabDiscountCost.huanbi.y.push(0)
                                        this.tabAClick.huanbi.y.push(0)
                                    }
                                } else {
                                    if (item.afterData) {
                                        this.tabPhotoClick.yesterday.y.push(item.afterData.photoClick)
                                        this.tabCost.yesterday.y.push(item.afterData.cost)
                                        this.tabPhotoShow.yesterday.y.push(item.afterData.photoShow)
                                        this.tabDiscountCost.yesterday.y.push(item.afterData.discountCost)
                                        this.tabAClick.yesterday.y.push(item.afterData.aClick)

                                        this.tabPhotoClick.x.push(item.afterData.statHour)
                                        this.tabCost.x.push(item.afterData.statHour)
                                        this.tabPhotoShow.x.push(item.afterData.statHour)
                                        this.tabDiscountCost.x.push(item.afterData.statHour)
                                        this.tabAClick.x.push(item.afterData.statHour)
                                    }
                                }
                            } else if (item.statDate) {
                                //  console.log('date')
                                this.tabPhotoClick.yesterday.y.push(item.photoClick)
                                this.tabCost.yesterday.y.push(item.cost)
                                this.tabPhotoShow.yesterday.y.push(item.photoShow)
                                this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                this.tabAClick.yesterday.y.push(item.aClick)

                                this.tabPhotoClick.x.push(item.statDate)
                                this.tabCost.x.push(item.statDate)
                                this.tabPhotoShow.x.push(item.statDate)
                                this.tabDiscountCost.x.push(item.statDate)
                                this.tabAClick.x.push(item.statDate)
                            }
                        })
                    }
                    this.callback(this.tabKey)
                })
            })
        },
        //请求项目和账户内容
        accountHttp() {
            this.treeData = []
            this.treeValue = []
            getAction(
                '/ctop/projectMember/getProjectAccountByUserId?mediaType=2&userId=' + this.userInfo().id,
                {}
            ).then(res => {
                if (res.success) {
                    // console.log(res);
                    if (res.result) {
                        res.result.forEach((element, index) => {
                            if (element) {
                                this.treeData.push({})
                                this.treeData[index].title =
                                    element.project.projectName + '_(' + element.project.advertiserName + ')'
                                this.treeData[index].value = 'project' + element.project.projectId
                                this.treeData[index].key = element.project.projectId
                                this.treeData[index].mediaId = element.project.mediaId
                                this.treeData[index].children = []

                                if (element.account.length) {
                                    element.account.forEach((ele, i) => {
                                        this.treeData[index].children.push({})
                                        this.treeData[index].children[i].title =
                                            ele.userName +
                                            '_' +
                                            ele.authName +
                                            '_' +
                                            element.project.projectName +
                                            '_(' +
                                            (ele.accountStatus ? '已停投' : '投放中') +
                                            ')'
                                        this.treeData[index].children[i].value = ele.accountId
                                        this.treeData[index].children[i].key = ele.accountId
                                        this.treeData[index].children[i].accountStatus = ele.accountStatus
                                    })
                                }
                            }
                        })
                        // console.log(this.treeData)
                    }
                }
            })
        },
        //初始化echart
        getEchartData(idName, optionName) {
            const chart = this.$refs[idName]
            //   console.log(chart)
            if (chart) {
                var myChart = echarts.init(document.getElementById(idName))
                myChart.clear()
                myChart.setOption(optionName)
                window.addEventListener('resize', function() {
                    myChart.resize()
                })
                this.myChart = myChart
            }
        },

        //tab切换页的事件
        callback(key) {
            // console.log(key);
            this.tabKey = key
            this.sectionOption = JSON.parse(JSON.stringify(sectionOption))
            if (key == 'cost') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabCost.x
                    this.sectionOption.series[0].data = this.tabCost.today.y
                    this.sectionOption.series[0].name = this.tabCost.today.name
                    this.sectionOption.series[1].data = this.tabCost.yesterday.y
                    this.sectionOption.series[1].name = this.tabCost.yesterday.name
                    this.sectionOption.series[2].data = this.tabCost.huanbi.y
                    this.sectionOption.series[2].name = this.tabCost.huanbi.name
                    this.sectionOption.tooltip.formatter = params => {
                        // console.log(params)
                        params[2].data = (params[2].data * 100).toFixed(2) + '%'
                        return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['总消耗']
                    this.sectionOption.xAxis[0].data = this.tabCost.x
                    this.sectionOption.series[0].data = this.tabCost.yesterday.y
                    this.sectionOption.series[0].name = '总消耗'
                }
            } else if (key == 'photoClick') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabPhotoClick.x
                    this.sectionOption.series[0].data = this.tabPhotoClick.today.y
                    this.sectionOption.series[0].name = this.tabPhotoClick.today.name
                    this.sectionOption.series[1].data = this.tabPhotoClick.yesterday.y
                    this.sectionOption.series[1].name = this.tabPhotoClick.yesterday.name
                    this.sectionOption.series[2].data = this.tabPhotoClick.huanbi.y
                    this.sectionOption.series[2].name = this.tabPhotoClick.huanbi.name
                    this.sectionOption.tooltip.formatter = params => {
                        // console.log(params)
                        params[2].data = (params[2].data * 100).toFixed(2) + '%'
                        return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['封面点击数']
                    this.sectionOption.xAxis[0].data = this.tabPhotoClick.x
                    this.sectionOption.series[0].data = this.tabPhotoClick.yesterday.y
                    this.sectionOption.series[0].name = '封面点击数'
                }
            } else if (key == 'photoShow') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabPhotoShow.x
                    this.sectionOption.series[0].data = this.tabPhotoShow.today.y
                    this.sectionOption.series[0].name = this.tabPhotoShow.today.name
                    this.sectionOption.series[1].data = this.tabPhotoShow.yesterday.y
                    this.sectionOption.series[1].name = this.tabPhotoShow.yesterday.name
                    this.sectionOption.series[2].data = this.tabPhotoShow.huanbi.y
                    this.sectionOption.series[2].name = this.tabPhotoShow.huanbi.name
                    this.sectionOption.tooltip.formatter = params => {
                        // console.log(params)
                        params[2].data = (params[2].data * 100).toFixed(2) + '%'
                        return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['封面曝光数']
                    this.sectionOption.xAxis[0].data = this.tabPhotoShow.x
                    this.sectionOption.series[0].data = this.tabPhotoShow.yesterday.y
                    this.sectionOption.series[0].name = '封面曝光数'
                }
            } else if (key == 'discountCost') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabDiscountCost.x
                    this.sectionOption.series[0].data = this.tabDiscountCost.today.y
                    this.sectionOption.series[0].name = this.tabDiscountCost.today.name
                    this.sectionOption.series[1].data = this.tabDiscountCost.yesterday.y
                    this.sectionOption.series[1].name = this.tabDiscountCost.yesterday.name
                    this.sectionOption.series[2].data = this.tabDiscountCost.huanbi.y
                    this.sectionOption.series[2].name = this.tabDiscountCost.huanbi.name
                    this.sectionOption.tooltip.formatter = params => {
                        // console.log(params)
                        params[2].data = (params[2].data * 100).toFixed(2) + '%'
                        return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['折后消耗']
                    this.sectionOption.xAxis[0].data = this.tabDiscountCost.x
                    this.sectionOption.series[0].data = this.tabDiscountCost.yesterday.y
                    this.sectionOption.series[0].name = '折后消耗'
                }
            } else {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabAClick.x
                    this.sectionOption.series[0].data = this.tabAClick.today.y
                    this.sectionOption.series[0].name = this.tabAClick.today.name
                    this.sectionOption.series[1].data = this.tabAClick.yesterday.y
                    this.sectionOption.series[1].name = this.tabAClick.yesterday.name
                    this.sectionOption.series[2].data = this.tabAClick.huanbi.y
                    this.sectionOption.series[2].name = this.tabAClick.huanbi.name
                    this.sectionOption.tooltip.formatter = params => {
                        // console.log(params)
                        params[2].data = (params[2].data * 100).toFixed(2) + '%'
                        return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['素材曝光数']
                    this.sectionOption.xAxis[0].data = this.tabAClick.x
                    this.sectionOption.series[0].data = this.tabAClick.yesterday.y
                    this.sectionOption.series[0].name = '素材曝光数'
                }
            }
            this.getEchartData('sectionChart', this.sectionOption)
        },

        //请求table的数据
        tableHttp(params) {
            this.loading = true
            this.tableData = []
            postAction('/ctop/kuaishou/dailyPage/report/list', {
                mediaId: this.mediaId,
                discount: this.discount,
                accountIds: this.accountId,
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),
                hour: this.timeSelectValue,
                target: this.target,
                order: this.order
            }).then(res => {
                if (res.success) {
                    this.loading = false
                    // console.log(res)
                    res.result.forEach(element => {
                        if (this.timeValueString) {
                            element.date = this.dateValue[0].format('YYYY.MM.DD') + '—' + this.timeValueString
                        } else {
                            if (
                                this.accountId.length == 1 &&
                                this.dateValue[0].format('YYYY.MM.DD') != this.dateValue[1].format('YYYY.MM.DD')
                            ) {
                                element.date = element.statDate
                            } else {
                                element.date =
                                    this.dateValue[0].format('YYYY.MM.DD') +
                                    '-' +
                                    this.dateValue[1].format('YYYY.MM.DD')
                            }
                        }
                    })
                    if (this.dateValue[0].format('YYYY-MM-DD') == this.dateValue[1].format('YYYY-MM-DD')) {
                        for (let i = res.result.length - 1; i > res.result.length - 4; i--) {
                            res.result[i].authName = '-'
                            res.result[i].accountId = '-'
                            res.result[i].statDate = '总计'
                        }
                        for (let key in res.result[res.result.length - 1]) {
                            if (res.result[res.result.length - 1][key] < 1) {
                                res.result[res.result.length - 1][key] =
                                    (res.result[res.result.length - 1][key] * 100).toFixed(2) + '%'
                            }
                        }

                        res.result[res.result.length - 1].statDate = '环比'
                        res.result[res.result.length - 2].statDate = '昨日总计(相对)'

                        this.tableData = res.result
                        length = this.tableData.length - 3
                    } else {
                        res.result[res.result.length - 1].statDate = '总计'
                        res.result[res.result.length - 1].authName = '-'
                        res.result[res.result.length - 1].accountId = '-'
                        this.tableData = res.result
                        length = this.tableData.length - 1
                    }
                }
            })
        },
        //导出报表
        exportExcel() {
            let column = this.columns.map((item, index) => {
                return item.dataIndex
            })
            let columns = column.splice(3)
            // console.log(columns)
            downFilePost('/ctop/kuaishou/dailyPage/report/excel', {
                mediaId: this.mediaId,
                discount: this.discount,
                accountIds: this.accountId,
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),
                hour: this.timeSelectValue,
                target: this.target,
                order: this.order,
                columns
            }).then(res => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },

        //弹出框打开，自定义列
        customColumns() {
            this.visible = true
            this.listNum = [...this.columns]
        },
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        //table 排序
        sort(pagination, filters, sorter, { currentDataSource }) {
            if (this.getFormData('accountIds') && this.getFormData('accountIds').length > 0) {
                if (sorter.order == 'ascend') {
                    this.order = 'asc'
                    this.target = sorter.columnKey
                } else if (sorter.order == 'descend') {
                    this.order = 'desc'
                    this.target = sorter.columnKey
                } else {
                    if (
                        this.accountId.length == 1 &&
                        this.dateValue[0].format('YYYY.MM.DD') != this.dateValue[1].format('YYYY.MM.DD')
                    ) {
                        ;(this.target = 'statDate'), (this.order = 'asc')
                    } else {
                        ;(this.target = 'cost'), (this.order = 'desc')
                    }
                }

                this.handleQueryList()
            }
        },

        closeCustomColumn() {
            this.visible = false
        },
        //
        discountChange() {
            // console.log(this.discountSelect);

            this.discount = this.discountSelect
        },
        rebatePropChange() {
            // console.log(this.rebateProp)
            this.discount = this.rebateProp
        },
        //自定义之后修改父元素表头
        changeColumn(val) {
            this.columns = [...val]
            this.columns = [...val]
            if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
                this.columns.forEach((element, index) => {
                    if (index < this.columns.length - 1) {
                        element.width = 'auto'
                        element.fixed = false
                    }
                })

                // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
            } else if (this.columns.length >= 8) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 200
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
            } else {
                this.scrollX = 0
                this.columns.forEach(element => {
                    element.width = 'auto'
                    element.fixed = false
                })
            }
            let arr = JSON.stringify(this.columns)
            postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 2
            }).then(res => {
                // console.log(res)
            })
        },
        tableHandle() {
            // this.listNum = [...this.columns]
            //   console.log(this.listNum.length, this.columns)

            if (this.listNum.length >= 9 || this.columns.length >= 9) {
                this.tableWidth = 160
                this.scrollX = this.columns.length * 160
                // console.log(this.scrollX)
            } else {
                this.scrollX = 2000
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.handleQueryList()
            }, 1000)
        })
        // this.accountHttp()
        new Promise((resolve, reject) => {
            this.getEchartData('sectionChart', this.sectionOption)
            resolve()
        }).then(() => {
            this.myChart.clear()
        })
        postAction('/toutiao/videoReportDaily/getColumnJson', {
            columnType: 2
        }).then(res => {
            // console.log(res)
            if (res.success) {
                // console.log(JSON.parse(res.result))
                if (res.result) {
                    let columns = JSON.parse(res.result)
                    if (columns.length) {
                        if (columns.length >= columnsFixd.length) {
                            columns.map((item, index) => {
                                if (index > columnsFixd.length - 1) {
                                    item.sorter = function(a, b) {}
                                }
                            })
                            columns = columns.slice(columnsFixd.length)
                            this.columns = [...columnsFixd, ...columns]
                        }
                    }
                }
                this.changeColumn(this.columns)
            }
        })
    },
    beforeDestroy() {
        let arr = JSON.stringify(this.columns)
        postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
            json: arr,
            columnType: 2
        }).then(res => {
            // console.log(res)
        })
    },
    filters: {
        toPercentage(val) {
            if (val) {
                if (typeof val != 'string') {
                    return (val * 100).toFixed(2) + '%'
                } else {
                    return val
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
        //保留两位小数并且变成货币格式
        decimalsHandle(val) {
            if (val && typeof val != 'string') {
                if (val >= 0) {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0].split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return handleResult + '.' + str[1]
                } else {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0]
                        .substr(1)
                        .split('')
                        .reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return '-' + handleResult + '.' + str[1]
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
        //变成货币格式
        formatCurrency(val) {
            if ((val || val == 0) && typeof val != 'string') {
                let numberStr = val.toString()
                let str = numberStr.split('').reverse()
                for (let i = 0; i < str.length; i++) {
                    if ((i + 1) % 4 === 0) {
                        str.splice(i, 0, ',')
                    }
                }
                str.reverse()
                let handleResult = ''
                for (let j = 0; j < str.length; j++) {
                    handleResult += str[j]
                }
                return handleResult
            } else if (typeof val == 'string') {
                return val
            } else {
                return '-'
            }
        }
    }
}
</script>
<style lang="scss">
.ant-tooltip-inner,
.ant-tooltip-arrow::before {
    background-color: #fff;
    color: #333;
}
</style>
<style lang="scss" scoped>
.accountReport {
    .circul {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #32cd32;
    }
    .optionLine:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
    }
    .optionLine {
        box-sizing: border-box;
        padding: 15px 15px;
        position: relative;

        // margin: 20px 10px 15px;
        margin-bottom: 15px;

        background-color: #fff;
        // border: 1px solid #ccc;

        .optionTow {
            margin-top: 15px;
            position: relative;
            .optItem {
                display: inline-block;
                margin-right: 15px;
                span {
                    display: inline-block;
                    padding: 0 3px;
                }
            }
        }

        .btn {
            position: absolute;
            right: 0px;
            top: 0px;
            .mybtn {
                margin-left: 10px;
            }
        }
    }
}
</style>
