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

.group-keep-ul li {
    margin-bottom: 15px;
    font-size: 16px;
}
</style>

<template>
    <div>
        <a-row :gutter="24" style="margin-bottom: 20px;">
            <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
                <a-card class="card-content echarts-card">
                    <div slot="title">
                        <span style="font-weight: bolder;">数据总览</span>
                    </div>
                    <div class="person-content-title" slot="extra">

                        <div class="content-title-acount"></div>
                        <div class="content-title-checkout">
                            <span class="title-checkout-time">
                                <a-range-picker v-model="dateEchart" :range="dateRanges" @change="dateRangesChange"/>
                            </span>
                        </div>
                    </div>

                    <div v-if="yestadyNum == 1" id="accountIndexEchartDay" ref="accountIndexEchartDay"
                         style="width: 90%;height: 315px;margin: 0 auto;"
                         :style="{ width: clientWidth * 0.75 - 48 - 24 + 'px' }">

                    </div>
                    <div v-else id="accountIndexEchart" ref="accountIndexEchart"
                         style="width: 90%;height: 315px;margin: 0 auto;"
                         :style="{ width: clientWidth * 0.75 - 48 - 24 + 'px' }">
                    </div>


                </a-card>
            </a-col>

            <a-col :sm="6" :md="6" :xl="6" class="keep-manage-col">
                <a-card class="card-content">
                    <div slot="title">
                        <span style="font-weight: bolder;">运营个人数据</span><span>({{ userName }})</span>
                    </div>
                    <div style="width: 100%;height: 315px;margin-left: 10px;">
                        <ul class="group-keep-ul">
                            <li>
                                今日消耗: <span style="font-weight: bold;">{{ todayCost | formatNum }}</span>
                            </li>
                            <li v-if="!!todayCompare">
                                <span style="margin-left:20%;" v-if="todayCompare.indexOf('-') == 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
                                         src="@/assets/greendown.png" alt="">
                                    <span style="color: green;">{{ todayCompare }}</span>

                                </span>
                                <span style="margin-left:20%;" v-else-if="todayCompare.indexOf('-') == -1">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
                                         src="@/assets/upred.png" alt="">
                                    <span style="color: red;">{{ todayCompare }}</span>
                                </span>
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>截止此时今日消耗与昨日同时刻消耗的对比</span>
                                    </template>
                                    <a-icon style="margin-left: 10px;" type="question-circle"/>
                                </a-tooltip>
                            </li>
                            <li>
                                <span style="margin-left: 28px;">消耗: </span>{{ timeCost  | formatNum }}
                            </li>
                            <li>
                                <span style="margin-left: 28px;">环比:</span>
                                <span v-if="timeCompare.indexOf('-') == 0">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
                                         src="@/assets/greendown.png" alt="">
                                    <span style="color: green;">{{ timeCompare }}</span>

                                </span>
                                <span v-else-if="timeCompare.indexOf('-') == -1">
                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
                                         src="@/assets/upred.png" alt="">
                                    <span style="color: red;">{{ timeCompare }}</span>
                                </span>
                                <a-tooltip placement="top">
                                    <template slot="title">
                                        <span>所选时间段内的消耗与相邻的同长度的时间段对比</span>
                                    </template>
                                    <a-icon style="margin-left: 10px;" type="question-circle"/>
                                </a-tooltip>
                            </li>
                            <li>
                                <span style="margin-left: 15px;">月消耗: </span>{{ monthCost | formatNum }}
                            </li>
                            <li>
                                <span style="margin-left: -16px;">月激励消耗: </span>{{ directCharged  | formatNum }}
                            </li>
                            <li>
                                <span style="margin-left: -16px;">月框返消耗: </span>{{ contractCharged  | formatNum }}
                            </li>
                            <li>
                                <span style="margin-left: -16px;">团队内排名: <span
                                    v-if="userIdRank =='暂无数据'">-</span><span
                                    v-else>{{ userIdRank }}/{{ userRankTotalNum }}</span></span>
                            </li>
                        </ul>


                    </div>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24">
            <a-col>
                <a-card>
                    <div slot="title">
                        <span style="font-weight: bolder;">{{ titleName }}</span>
                    </div>
                    <div class="person-content-title" slot="extra">
                        <div class="content-title-acount"></div>
                        <div class="content-title-checkout">
                            <span style="margin-right: 20px;">
                                <a-button type="link" @click="customColumn">
                                    自定义列
                                  </a-button>
                            </span>
                            <span style="margin-right: 20px;">
                                <a-range-picker
                                    v-model="dateMiddleProject"
                                    :ranges="dateRanges"
                                    @change="dateMiddleProjectChange"
                                />
                            </span>
                            <span>
                                <a-radio-group v-model="projectAccount" @change="projectAccountChange">
                                    <a-radio-button value="a">
                                      项目
                                    </a-radio-button>
                                    <a-radio-button value="b">
                                      账户
                                    </a-radio-button>
                                  </a-radio-group>
                            </span>
                        </div>
                    </div>

                    <a-table
                        size="middle"
                        :dataSource="echartsDataProject"
                        :columns="columnsProject"
                        bordered
                        id="outTable"
                        :pagination="echartsIpaginationProject"
                        :loading="echartsLoading"
                        ref="accountTable"
                        :scroll="{ x: scrollX }"
                        @change="sort"
                    >
                        <span slot="leave" slot-scope="leave">{{ leave | removalPercentage }}</span>
                        <a slot="projectName" slot-scope="text,record" @click="projectNameClick(record)">{{ text }}</a>
                        <a slot="accountName" slot-scope="text,record" @click="accountNameClick(record)">{{ text }}</a>
                    </a-table>

                </a-card>
            </a-col>
        </a-row>
        <customColumnProject
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />
    </div>
</template>


<script>
import keepPersonData from './new-keep-data.js';
import customColumnProject from './customColumnProject.vue'
import moment from 'moment';
// 引入基本模板
var echarts = require('echarts');
// 引入折线图组件
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');
import {mapGetters} from 'vuex'

export default {
    components: {customColumnProject},
    data() {
        return {
            visible: false,
            updateAccountEchart: '2021-12-22 8:00:00',
            dateEchart: [moment(), moment()],
            scrollX: 1500,
            dateRanges: keepPersonData.setTimeRange(),
            personData: 0,
            columnsFixd: keepPersonData.setNoDeleteColumns(),
            listNum: [],
            dateMiddleProject: [moment(), moment()],
            echartsDataProject: [],
            queryUserId: '',
            echartsLoading: false,
            projectAccount: 'a',
            target: 'cost',
            order: 'descend',
            compare: '',
            todayList: [],
            yesterdayList: [],
            timeData: [],
            lengthData: [],
            yestadyNum: 1,
            titleName: '项目列表',
            echartsIpaginationProject: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.echartsIpaginationProject.current = current
                    this.echartsIpaginationProject.pageSize = pageSize
                },
            },
            columnsProject: [
                {
                    title: '项目名称',
                    align: "center",
                    dataIndex: 'projectName',
                    scopedSlots: {customRender: 'projectName'},
                }, {
                    title: '账户数量',
                    align: "center",
                    dataIndex: 'accountNum'
                }, {
                    title: '运营人员数量',
                    align: "center",
                    dataIndex: 'userNum'
                }, {
                    title: '消耗(元)',
                    align: "center",
                    dataIndex: 'totalCost',
                    sorter: (a, b) => a.totalCost - b.totalCost,
                }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'rate'
                }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate'
                },
                {
                    title: '基建量',
                    align: "center",
                    dataIndex: 'newUnitNum'
                },


                {
                    title: '上新素材数',
                    align: "center",
                    dataIndex: 'newVideoNum'
                }, {
                    title: '有效素材数',
                    align: "center",
                    dataIndex: 'newEffectNum'
                }, {
                    title: '爆款素材数',
                    align: "center",
                    dataIndex: 'newHotNum'
                }, {
                    title: '激活数',
                    align: "center",
                    dataIndex: 'activation'
                }, {
                    title: '激活单价',
                    align: "center",
                    dataIndex: 'activationPrice'
                }, {
                    title: '行为数',
                    align: "center",
                    dataIndex: 'keyActionCost'
                },
            ],
            todayCost: '',
            timeCost: '',
            todayCompare: '',
            timeCompare: '',
            directCharged: '',
            contractCharged: '',
            userRankTotalNum: '',
            userIdRank: '',
            monthCost: '',
            userName: '',
            clientWidth: 0
        }
    },
    filters: {
        formatNum: function (value) {
            if (!value) {
                return '暂无数据'
            } else if (value == '暂无数据') {
                return '暂无数据'
            }
            return Number(value).toFixed(3).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
        },
    },
    mounted() {
        if (sessionStorage.getItem('personalUserId')) {
            this.queryUserId = sessionStorage.getItem('personalUserId')
        }
        this.clientWidth = document.documentElement.clientWidth - 224
        this.showColumn()
        this.getQueryNewlyData();
        this.personalData();
        this.getItemList();

    },
    activated() {
        this.$nextTick(() => {
            this.clientWidth = document.documentElement.clientWidth - 224
        })
    },
    methods: {
        ...mapGetters(['userInfo']),
        // 个人数据
        personalData() {
            let params = {
                mediaType: 2,
                userId: '',
                startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                endTime: this.dateEchart[1].format('YYYY-MM-DD'),
            }
            if (this.queryUserId) {
                params.userId = this.queryUserId
            } else {
                params.userId = this.userInfo().id
            }
            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShouOperateDateTotalPersonal', params).then(res => {
                if (res.code == 0) {
                    // 今日消耗
                    console.log(res.result.todayCost);
                    if (res.result.todayCost) {
                        this.todayCost = res.result.todayCost
                    } else {
                        this.todayCost = '暂无数据'
                    }
                    // 今日环比
                    if (res.result.todayCompare) {
                        this.todayCompare = res.result.todayCompare;
                    } else {
                        this.todayCompare = '暂无数据'
                    }
                    // 时间段环比
                    if (res.result.timeCompare) {
                        this.timeCompare = res.result.timeCompare;
                    } else {
                        this.timeCompare = '暂无数据'
                    }
                    // 框返
                    if (res.result.contractCharged) {
                        this.contractCharged = res.result.contractCharged
                    } else {
                        this.contractCharged = '暂无数据'
                    }
                    // 月激励
                    if (res.result.directCharged) {
                        this.directCharged = res.result.directCharged
                    } else {
                        this.directCharged = '暂无数据'
                    }
                    // 时间段消耗
                    if (res.result.timeCost) {
                        this.timeCost = res.result.timeCost
                    } else {
                        this.timeCost = '暂无数据'
                    }
                    // 排名总数
                    if (res.result.userRankTotalNum) {
                        this.userRankTotalNum = res.result.userRankTotalNum
                    } else {
                        this.userRankTotalNum = '暂无数据'
                    }
                    // 排名
                    if (res.result.userIdRank) {
                        this.userIdRank = res.result.userIdRank;
                    } else {
                        this.userIdRank = '暂无数据'
                    }
                    if (res.result.monthCost) {
                        this.monthCost = res.result.monthCost
                    } else {
                        this.monthCost = '暂无数据'
                    }
                    if (res.result.userName) {
                        this.userName = res.result.userName
                    } else {
                        this.userName = '暂无数据'
                    }
                }
            })
        },
        // 项目列表
        getItemList() {
            this.echartsLoading = true;
            let params = {
                startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
                endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
                userId: '',
                pageNum: this.echartsIpaginationProject.current,
                pageSize: this.echartsIpaginationProject.pageSize,
            }
            if (this.queryUserId) {
                params.userId = this.queryUserId
            } else {
                params.userId = this.userInfo().id
            }
            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateProjectInfo', params).then(res => {
                if (res.code == 0) {
                    this.echartsDataProject = res.result.list;
                    this.echartsIpaginationProject.total = res.result.total;
                    this.echartsLoading = false;
                }
            })
        },
        getAccountData() {
            let params = {
                startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
                endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
                userId: '',
                pageNum: this.echartsIpaginationProject.current,
                pageSize: this.echartsIpaginationProject.pageSize,
                projectId: this.projectId
            }
            if (this.queryUserId) {
                params.userId = this.queryUserId
            } else {
                params.userId = this.userInfo().id
            }
            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateAccountInfo', params).then(res => {
                if (res.code == 0) {
                    this.echartsDataProject = res.result.list;
                    this.echartsIpaginationProject.total = res.result.total;
                    this.echartsLoading = false;
                }
            })
        },
        projectNameClick(row) {
            this.titleName = '账户列表'
            this.echartsLoading = true;
            this.columnsFixd = keepPersonData.setNoActionProjectColumns();
            this.listNum = keepPersonData.setNoActionProjectColumns();
            this.columnsProject = [
                {
                    title: '账户名称',
                    align: "center",
                    dataIndex: 'accountName',
                    scopedSlots: {customRender: 'accountName'},
                }, {
                    title: '账户ID',
                    dataIndex: 'accountId',
                    scopedSlots: {customRender: 'accountId'},
                    align: 'center',
                }, {
                    title: '运营人员名称',
                    align: "center",
                    dataIndex: 'userName'
                }, {
                    title: '余额',
                    dataIndex: 'balance',
                    scopedSlots: {customRender: 'balance'},
                    align: 'center',
                }, {
                    title: '消耗(元)',
                    align: "center",
                    dataIndex: 'totalCost'
                }, {
                    title: '花费环比',
                    align: "center",
                    dataIndex: 'yearOnYear',
                }, {
                    title: '花费同比',
                    align: "center",
                    dataIndex: 'equallyRate',
                },
                {
                    title: '基建量',
                    align: "center",
                    dataIndex: 'newUnitNum'
                }

            ],
                this.projectId = row.projectId;
            this.echartsIpaginationProject.current = 1;
            this.getAccountData();
            this.projectAccount = 'b';
            this.showColumn();
        },
        accountNameClick(row) {
            sessionStorage.setItem("personalaccountId", row.accountId)
            this.$router.push({path: '/modules/stockWatch/modules/new-keepManage/account-newkeepManage'})
        },
        sort(pagination, filters, sorter, {currentDataSource}) {
            this.echartsLoading = true;

            // console.log(pagination, filters, sorter)          
            this.echartsIpaginationProject.current = pagination.current
            this.echartsIpaginationProject.pageSize = pagination.pageSize
            if (this.projectAccount == 'a') {
                //     if (sorter.order) {
                //     this.order = sorter.order ? sorter.order : 'descend'
                //     this.target = sorter.columnKey
                //     this.getItemList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
                // }
                this.getItemList();
                console.log(sorter);
            } else {
                this.getAccountData();
            }


        },
        dateMiddleProjectChange() {
            this.echartsLoading = true;
            this.echartsIpaginationProject.current = 1;
            if (this.projectAccount == 'a') {
                this.getItemList()
            } else {
                this.getAccountData();
            }
        },
        projectAccountChange(ent) {
            this.echartsLoading = true;
            if (ent.target.value == 'a') {
                this.titleName = '项目列表'
                this.columnsFixd = keepPersonData.setNoDeleteColumns();
                this.listNum = keepPersonData.setNoDeleteColumns();
                this.projectId = '';
                this.columnsProject = [
                    {
                        title: '项目名称',
                        align: "center",
                        dataIndex: 'projectName',
                        scopedSlots: {customRender: 'projectName'},
                    }, {
                        title: '账户数量',
                        align: "center",
                        dataIndex: 'accountNum'
                    }, {
                        title: '运营人员数量',
                        align: "center",
                        dataIndex: 'userNum',
                    }, {
                        title: '消耗(元)',
                        align: "center",
                        dataIndex: 'totalCost'
                    }, {
                        title: '花费环比',
                        align: "center",
                        dataIndex: 'yearOnYear',
                    }, {
                        title: '花费同比',
                        align: "center",
                        dataIndex: 'equallyRate',
                    },
                    {
                        title: '基建量',
                        align: "center",
                        dataIndex: 'newUnitNum'
                    },
                    {
                        title: '上新素材数',
                        align: "center",
                        dataIndex: 'newVideoNum',
                    }, {
                        title: '爆款素材数',
                        align: "center",
                        dataIndex: 'newHotNum',
                    }, {
                        title: '有效素材数',
                        align: "center",
                        dataIndex: 'newEffectNum',
                    }, {
                        title: '激活数',
                        align: "center",
                        dataIndex: 'activation',
                    },
                    {
                        title: '激活单价',
                        align: "center",
                        dataIndex: 'activationPrice',
                    }, {
                        title: '行为数',
                        align: "center",
                        dataIndex: 'keyActionCost'
                    },
                ],
                    this.echartsIpaginationProject.current = 1;
                this.getItemList()
            } else {
                this.titleName = '账户列表';
                this.columnsFixd = keepPersonData.setNoActionProjectColumns();
                this.listNum = keepPersonData.setNoActionProjectColumns();
                console.log(this.columnsFixd);
                this.columnsProject = [
                    {
                        title: '账户名称',
                        align: "center",
                        dataIndex: 'accountName',
                        scopedSlots: {customRender: 'accountName'},
                    }, {
                        title: '运营人员名称',
                        align: "center",
                        dataIndex: 'userName'
                    }, {
                        title: '余额',
                        dataIndex: 'balance',
                        scopedSlots: {customRender: 'balance'},
                        align: 'center',
                    }, {
                        title: '消耗(元)',
                        align: "center",
                        dataIndex: 'totalCost'
                    }, {
                        title: '花费环比',
                        align: "center",
                        dataIndex: 'yearOnYear',
                    }, {
                        title: '花费同比',
                        align: "center",
                        dataIndex: 'equallyRate',
                    },
                    {
                        title: '基建量',
                        align: "center",
                        dataIndex: 'newUnitNum'
                    },

                ],
                    this.echartsIpaginationProject.current = 1;
                this.getAccountData();
            }
            this.showColumn();
        },
        // 自定义列
        customColumn() {
            this.visible = true;
            this.listNum = [...this.columnsProject]
        },
        //自定义列相关
        closeCustomColumn() {
            this.visible = false
        },
        showColumn() {
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: this.projectAccount === 'a' ? 104 : 105,
            }).then((res) => {
                // console.log(res)
                if (res.success) {
                    // console.log(JSON.parse(res.result))
                    if (res.result) {
                        let columns = JSON.parse(res.result)
                        console.log(columns);
                        if (columns.length) {
                            if (columns.length >= this.columnsFixd.length) {
                                columns.map((item, index) => {
                                    if (index > this.columnsFixd.length - 1) {
                                        item.sorter = function (a, b) {
                                        }
                                    }
                                })
                                columns = columns.slice(this.columnsFixd.length)
                                this.columnsProject = [...this.columnsFixd, ...columns]
                            }
                            var obj = {};
                            this.columnsProject = this.columnsProject.reduce(function (item, next) {
                                obj[next.dataIndex] ? '' : obj[next.dataIndex] = true && item.push(next);
                                return item;
                            }, []);
                            // console.log(this.columns)
                            this.changeColumn(this.columnsProject)
                        }
                    } else {
                        this.changeColumn()
                    }


                }
            })
        },
        changeColumn(val) {
            this.columnsProject = [...val]
            if (this.columnsProject.length > this.columnsFixd.length && this.columnsProject.length < 8) {
                this.columnsProject.forEach((element, index) => {
                    if (index < this.columnsProject.length - 1) {

                        element.width = 'auto'
                        element.fixed = false

                    }
                })

                this.scrollX = 0
            } else if (this.columnsProject.length > 8) {
                this.columnsProject.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        if (element.dataIndex == 'accountNum') {
                            element.width = 100
                            element.fixed = 'left'
                        } else if (element.dataIndex == 'userNum') {
                            element.width = 100
                            element.fixed = 'left'
                        } else if (element.dataIndex == 'yearOnYear') {
                            element.width = 100
                            element.fixed = 'left'
                        } else if (element.dataIndex == 'equallyRate') {
                            element.width = 100
                            element.fixed = 'left'
                        } else {
                            element.width = 150
                            element.fixed = 'left'
                        }

                    } else if (this.columnsProject.length == this.columnsFixd.length) {
                        this.columnsProject.forEach((element, index) => {
                            element.width = 'auto';
                            element.fixed = false;
                        })
                        this.scrollX = false
                    } else {
                        element.width = 'auto';
                        element.fixed = false
                    }
                })

                this.scrollX = 1000 + 150 * (this.columnsProject.length - this.columnsFixd.length)
            } else {
                this.scrollX = 0
                this.columnsProject.forEach((element) => {

                    element.width = 'auto'
                    element.fixed = false

                })
            }

            let arr = JSON.stringify(this.columnsProject)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: this.projectAccount === 'a' ? 104 : 105,
            }).then((res) => {
                // console.log(res)
            })
        },
        getQueryNewlyData() {
            let params = {
                startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                endTime: this.dateEchart[1].format('YYYY-MM-DD'),
                mediaType: 2,
                userId: ''
            }
            if (this.queryUserId) {
                params.userId = this.queryUserId
            } else {
                params.userId = this.userInfo().id
            }
            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShousumDataPersonal', params).then(res => {
                if (res.code == 0) {
                    if (res.message == '查询运营个人-时报-汇总。') {

                        this.todayList = res.result.todayList.map((item) => {
                            return item.totalCost
                        })
                        this.yesterdayList = res.result.yesterdayList.map((item) => {
                            return item.totalCost
                        })


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

                    } else if (res.message == '查询运营个人-日报-汇总成功。') {

                        this.todayList = res.result.map((item) => {
                            return item.totalCost
                        })
                        this.timeData = res.result.map((itemdate) => {
                            return itemdate.dateTime
                        })
                        this.yesterdayList = [];
                        this.lengthData = ['消耗汇总'];

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

                    }

                }
            })
            // this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
        },
        dateRangesChange(e) {
            if (this.dateEchart[0].format('YYYY-MM-DD') == this.dateEchart[1].format('YYYY-MM-DD')) {
                this.yestadyNum = 1
            } else {
                this.yestadyNum = 2
            }
            this.getQueryNewlyData();
            this.personalData();
        },
        //获取echart的值
        initEchart(idName, optionName) {
            let that = this;
            const chart = this.$refs[idName]
            //   // console.log(res);(chart)
            if (chart) {
                console.log(chart);
                const myChart = echarts.init(document.getElementById(idName))
                // myChart.showLoading({
                //     text: "图表数据正在努力加载..."
                // });
                myChart.clear()
                myChart.setOption(optionName)
                window.addEventListener('resize', function () {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
        //趋势图echarts配置
        initAccountIndexEchart(todayList, yesterdayList, timeData, lengthData, series) {
            // this.clientWidth  =  document.documentElement.clientWidth - 224
            // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
            let option = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: lengthData
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true

                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timeData
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            return option
        },
        initAccountIndexEchartDay(todayList, yesterdayList, timeData, lengthData) {
            let option = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: lengthData
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true

                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timeData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '今天',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    data: todayList,
                    lineStyle: {
                        color: '#00BFFF',
                        width: 2,
                    },
                    itemStyle: {
                        color: '#00BFFF',
                        borderWidth: 2,
                        borderColor: '#00BFFF'
                    },
                }, {
                    name: '昨天',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    data: yesterdayList,
                    lineStyle: {
                        color: '#00FF7F',
                        width: 2,
                    },
                    itemStyle: {
                        color: '#00FF7F',
                        borderWidth: 2,
                        borderColor: '#00FF00'
                    },
                }]
            };
            return option
        },
    },
}
</script>
