<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"
                                    type="bytedance"
                                    :limit="2"
                                />
                            </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.discountCost | 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">{{ clickLink.photoClick | formatCurrency }}</span>
                    <!-- <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ clickLink.photoClick | 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">{{ showNumLink.photoShow | formatCurrency }}</span>
                    <!-- <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ showNumLink.photoShow | 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">{{ convertNumLink.convert | formatCurrency }}</span>
                    <!-- <span class="green" v-if="dateValue[0].format('YYYY-MM-DD') == dateValue[1].format('YYYY-MM-DD')"
                        ><span class="huanbi">环比: </span> {{ convertNumLink.convert | 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="click" tab="点击数"> </a-tab-pane>
                <a-tab-pane key="showNum" 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 ||tableData.length == 0"
                    :loading="exportLoading"
                    >导出报表</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="form" slot-scope="form">{{ form | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="activePayAmount" slot-scope="activePayAmount">{{ activePayAmount | formatCurrency }}</span>
                <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
                    play25FeedBreakRate | toPercentage
                }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | 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="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</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="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>
            </a-table>
        </div>
        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="1"
            @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',
        scopedSlots: { customRender: 'cost' },
        align: 'center',
        sorter: (a, b) => {}
    },
    {
        title: '点击数',
        dataIndex: 'click',
        align: 'center',
        scopedSlots: { customRender: 'click' },
        sorter: (a, b) => {}
        // (a, b) => a.clickMaterial - b.clickMaterial
    },
    {
        title: '点击率',
        dataIndex: 'ctr',
        align: 'center',
        scopedSlots: { customRender: 'ctr' },
        sorter: (a, b) => {}
    },

    {
        title: '展示数',
        dataIndex: 'show',
        align: 'center',

        scopedSlots: { customRender: 'show' },
        sorter: (a, b) => {}
    },
    {
        title: '平均千次展现费用(元)',
        dataIndex: 'avgShowCost',
        tip: '广告平均每一千次展现所付出的费用，计算公式是：总花费/展示数*1000',
        align: 'center',

        scopedSlots: { customRender: 'avgShowCost' },
        sorter: (a, b) => {}
    },
    {
        title: '平均点击单价(元)',
        dataIndex: 'avgClickCost',
        tip: '广告主为每次点击付出的费用成本，计算公式是：总花费/点击数',
        align: 'center',
        scopedSlots: { customRender: 'avgClickCost' },
        sorter: (a, b) => {}
    }
]

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

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

    data() {
        return {
            moment,
            exportLoading:false,
            //账户的数据
            accountId: [],
            mediaId: '', //媒体类型
            //折扣数值
            discountSelect: 1.0,
            discountDisabled: false,
            //返点比例
            rebateProp: 1.0,
            rebatePropDisabled: false,
            discount: 1,
            left: 0,
            //treeselect的参数
            treeValue: [],
            treeData: [],
            SHOW_PARENT,
            //top区域数据
            discountCostLink: {},
            showNumLink: {},
            clickLink: {},
            costLink: {},
            convertNumLink: {},
            //日期矿打开
            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: {},
            tabKey: 'cost',
            sectionOption: JSON.parse(JSON.stringify(sectionOption)),
            tabCost: {},
            tabClick: {},
            tabShowNum: {},
            tabDiscountCost: {},
            tabconvertNum: {},
            //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 + '/material/report/getProjectAccountByUserId',
            accountListUrl: process.env.VUE_APP_BASE_REPORT_URL + '/account/bytedance/report/bytedance/list',
            charUrl: process.env.VUE_APP_BASE_REPORT_URL + '/account/bytedance/report/bytedance/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()
            this.tabKey = 'cost'
            const paramsData = this.form.getFieldsValue()
            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 - 3; 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 - 1].statDate = '昨日总计(相对)'

                                this.tableData = res.result
                                length = this.tableData.length - 2
                            } 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')
                    })
                this.discountCostLink = {}
                this.showNumLink = {}
                this.clickLink = {}
                this.costLink = {}
                this.convertNumLink = {}

                this.tabCost = {}
                this.tabClick = {}
                this.tabShowNum = {}
                this.tabDiscountCost = {}
                this.tabconvertNum = {}

                postAction(this.charUrl, { ...paramsData, mediaId: 1 }).then(res => {
                    if (res.success) {
                        if (res.result.sumData.convertLink) {
                            this.discountCostLink = res.result.sumData.discountCostLink
                            this.showNumLink = res.result.sumData.photoShowLink
                            this.clickLink = res.result.sumData.photoClickLink
                            this.costLink = res.result.sumData.costLink
                            this.convertNumLink = res.result.sumData.convertLink
                        }

                        // 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))

                        this.tabCost = JSON.parse(JSON.stringify(initDay))
                        this.tabClick = JSON.parse(JSON.stringify(initDay))
                        this.tabShowNum = JSON.parse(JSON.stringify(initDay))
                        this.tabDiscountCost = JSON.parse(JSON.stringify(initDay))
                        this.tabconvertNum = 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.tabClick.yesterday.y.push(item.photoClick)
                                    this.tabCost.yesterday.y.push(item.cost)
                                    this.tabShowNum.yesterday.y.push(item.photoShow)
                                    this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                    this.tabconvertNum.yesterday.y.push(item.convert)

                                    this.tabClick.x.push(item.statHour)
                                    this.tabCost.x.push(item.statHour)
                                    this.tabShowNum.x.push(item.statHour)
                                    this.tabDiscountCost.x.push(item.statHour)
                                    this.tabconvertNum.x.push(item.statHour)

                                    if (item.afterData) {
                                        this.tabClick.yesterday.y.push(item.afterData.photoClick)
                                        this.tabCost.yesterday.y.push(item.afterData.cost)
                                        this.tabShowNum.yesterday.y.push(item.afterData.photoShow)
                                        this.tabDiscountCost.yesterday.y.push(item.afterData.discountCost)
                                        this.tabconvertNum.yesterday.y.push(item.afterData.convert)
                                        //环比
                                        this.tabClick.huanbi.y.push(item.afterData.photoClickProportion)
                                        // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
                                        this.tabCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabShowNum.huanbi.y.push(item.afterData.showProportion)
                                        this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)
                                        this.tabconvertNum.huanbi.y.push(item.afterData.convertNumProportion)
                                    } else {
                                        this.tabClick.today.y.push(0)
                                        this.tabCost.today.y.push(0)
                                        this.tabShowNum.today.y.push(0)
                                        this.tabDiscountCost.today.y.push(0)
                                        this.tabconvertNum.today.y.push(0)

                                        this.tabClick.huanbi.y.push(0)
                                        this.tabCost.huanbi.y.push(0)
                                        this.tabShowNum.huanbi.y.push(0)
                                        this.tabDiscountCost.huanbi.y.push(0)
                                        this.tabconvertNum.huanbi.y.push(0)
                                    }
                                } else {

                                        this.tabClick.yesterday.y.push(item.photoClick)
                                        this.tabCost.yesterday.y.push(item.cost)
                                        this.tabShowNum.yesterday.y.push(item.photoShow)
                                        this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                        this.tabconvertNum.yesterday.y.push(item.convert)

                                        this.tabClick.x.push(item.statHour)
                                        this.tabCost.x.push(item.statHour)
                                        this.tabShowNum.x.push(item.statHour)
                                        this.tabDiscountCost.x.push(item.statHour)
                                        this.tabconvertNum.x.push(item.statHour)
                                    
                                }
                            } else if (item.stat_datetime) {
                                //  console.log('date')

                                this.tabClick.yesterday.y.push(item.photoClick)
                                this.tabCost.yesterday.y.push(item.cost)
                                this.tabShowNum.yesterday.y.push(item.photoShow)
                                this.tabDiscountCost.yesterday.y.push(item.discountCost)
                                this.tabconvertNum.yesterday.y.push(item.convert)

                                let data =
                                    ('' + item.stat_datetime).substr(0, 4) +
                                    '-' +
                                    ('' + item.stat_datetime).substr(4, 2) +
                                    '-' +
                                    ('' + item.stat_datetime).substr(6, 2)

                                this.tabClick.x.push(data)
                                this.tabCost.x.push(data)
                                this.tabShowNum.x.push(data)
                                this.tabDiscountCost.x.push(data)
                                this.tabconvertNum.x.push(data)
                            }
                        })
                        this.callback(this.tabKey)
                    }else{
                        this.getEchartData('sectionChart', {})
                    }
                })
            } 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
        },

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

                window.addEventListener('resize', function() {
                    myChart.resize()
                })
                this.myChart = myChart
            }
        },

        //tab切换页的事件
        callback(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}
                      `
                    }
                } 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 == 'click') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabClick.x
                    this.sectionOption.series[0].data = this.tabClick.today.y
                    this.sectionOption.series[0].name = this.tabClick.today.name
                    this.sectionOption.series[1].data = this.tabClick.yesterday.y
                    this.sectionOption.series[1].name = this.tabClick.yesterday.name
                    this.sectionOption.series[2].data = this.tabClick.huanbi.y
                    this.sectionOption.series[2].name = this.tabClick.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}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['点击数']
                    this.sectionOption.xAxis[0].data = this.tabClick.x
                    this.sectionOption.series[0].data = this.tabClick.yesterday.y
                    this.sectionOption.series[0].name = '点击数'
                }
            } else if (key == 'showNum') {
                if (this.dateValue[0].format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
                    this.sectionOption.legend.data = ['今天', '昨天']
                    this.sectionOption.xAxis[0].data = this.tabShowNum.x
                    this.sectionOption.series[0].data = this.tabShowNum.today.y
                    this.sectionOption.series[0].name = this.tabShowNum.today.name
                    this.sectionOption.series[1].data = this.tabShowNum.yesterday.y
                    this.sectionOption.series[1].name = this.tabShowNum.yesterday.name
                    this.sectionOption.series[2].data = this.tabShowNum.huanbi.y
                    this.sectionOption.series[2].name = this.tabShowNum.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}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['展示数']
                    this.sectionOption.xAxis[0].data = this.tabShowNum.x
                    this.sectionOption.series[0].data = this.tabShowNum.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}
                      `
                    }
                } 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.tabconvertNum.x
                    this.sectionOption.series[0].data = this.tabconvertNum.today.y
                    this.sectionOption.series[0].name = this.tabconvertNum.today.name
                    this.sectionOption.series[1].data = this.tabconvertNum.yesterday.y
                    this.sectionOption.series[1].name = this.tabconvertNum.yesterday.name
                    this.sectionOption.series[2].data = this.tabconvertNum.huanbi.y
                    this.sectionOption.series[2].name = this.tabconvertNum.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}
                      `
                    }
                } else {
                    this.sectionOption.legend.data = ['转化数']
                    this.sectionOption.xAxis[0].data = this.tabconvertNum.x
                    this.sectionOption.series[0].data = this.tabconvertNum.yesterday.y
                    this.sectionOption.series[0].name = '转化数'
                }
            }
            this.getEchartData('sectionChart', this.sectionOption)
        },

        //导出报表
        exportExcel() {
            let column = this.columns.map((item, index) => {
                return item.dataIndex
            })
            let columns = column.splice(3)
            this.exportLoading = true
            // console.log(columns)
            downFilePost(process.env.VUE_APP_BASE_REPORT_URL + '/account/bytedance/report/bytedance/excelV2', {
                mediaId: this.mediaId,
                discount: this.discount,
                accountIds: this.getFormData('accountIds'),
                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,
                userId: this.userInfo().id,
                columns
            }).then(res => {
                this.exportLoading = false
                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]
            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 + 200 * (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: 17
            }).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)
        // })
        new Promise((resolve, reject) => {
            this.getEchartData('sectionChart', this.sectionOption)
            resolve()
        }).then(() => {
            this.myChart.clear()
        })
        postAction('/toutiao/videoReportDaily/getColumnJson', {
            columnType: 17
        }).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: 17
        }).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 '0'
            }
        }
    }
}
</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>
