<template>
    <div class="keep-manage-content">
        <a-spin :spinning="accountPageSpinning">
            <a-row :gutter="24">
                <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
                    <a-card title="数据趋势" class="card-content echarts-card">
                        <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"
                                        :ranges="dateRanges"
                                        :disabled-date="disabledDate"
                                        @change="setDataQuery"
                                    />
                                </span>
                                <span class="title-checkout-select">
                                    <a-select v-model="selectValue" @change="getQueryNewlyData">
                                        <a-select-option value="charge">花费</a-select-option>
                                        <a-select-option value="campaign" :disabled="checkDisabled"
                                            >新上计划数</a-select-option
                                        >
                                        <a-select-option value="unit" :disabled="checkDisabled"
                                            >新上组数</a-select-option
                                        >
                                    </a-select>
                                </span>
                            </div>
                        </div>
                        <div style="float: right; margin: 10px">更新时间：{{ updateAccountEchart || '-' }}</div>
                        <div
                            class="accountIndexEchart"
                            id="accountIndexEchart"
                            ref="accountIndexEchart"
                            :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
                        >
                            <a-empty />
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="6" :md="6" :xl="6" class="keep-manage-col">
                    <a-card class="card-content" v-if="personData">
                        <h2>
                            <span>你好！{{ personData.realName || '-' }}</span>
                            <span class="no-person">NO.{{ personData.rank || '-' }}</span>
                        </h2>
                        <div class="header-left-title">
                            <span> 今日消耗： </span>
                            <span class="left-title-radio" v-if="personData && personData.grew < 0">
                                <img class="title-radio-img" src="@/assets/up.png" alt="" />
                                {{ personData.grew + '%' }}
                            </span>
                            <!-- TODO 这个是下降的样式，后续优化  -->
                            <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
                                <img class="title-radio-img" src="@/assets/down.png" alt="" />
                                {{ personData.grew + '%' }}
                            </span>
                            <a-tooltip class="">
                                <template slot="title"> 截止此时今日与昨日的花费同比 </template>
                                <a-icon type="question-circle" />
                            </a-tooltip>
                        </div>
                        <h1>
                            <span v-if="personData">{{ personData.charge | decimalsHandle }}</span
                            ><span v-else>-</span>
                        </h1>
                        <div class="header-left-title-else">
                            <span class="title-label">账户数：</span>
                            <span>
                                {{ personData.accouuntCount }}
                            </span>
                        </div>
                        <div class="header-left-title-else">
                            <span class="title-label">本周消耗：</span>
                            <span>
                                {{ personData.weekCharge }}
                            </span>
                        </div>
                        <div class="header-left-title-else">
                            <span class="title-label">上周消耗：</span>
                            <span>
                                {{ personData.lweekCharge }}
                            </span>
                        </div>
                        <div class="header-left-title-else">
                            <span class="title-label"> 周消耗环比： </span>
                            <span class="left-title-radio" v-if="personData && personData.weekGrew < 0">
                                {{ personData.weekGrew + '%' }}
                                <img class="title-radio-img" src="@/assets/up.png" alt="" />
                            </span>
                            <!-- TODO 这个是下降的样式，后续优化  -->
                            <span class="left-title-radio-down" v-else-if="personData && personData.weekGrew >= 0">
                                {{ personData.weekGrew + '%' }}
                                <img class="title-radio-img" src="@/assets/down.png" alt="" />
                            </span>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
            <a-row :gutter="24" class="between-row">
                <a-col>
                    <a-card title="运营数据详情">
                        <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="dateMiddle"
                                        :ranges="dateRanges"
                                        :disabled-date="disabledDate"
                                        @change="getOperatingStaffDataList"
                                    />
                                </span>
                            </div>
                        </div>
                        <a-table
                            size="middle"
                            :dataSource="echartsData"
                            bordered
                            id="outTable"
                            :pagination="echartsIpagination"
                            :loading="echartsLoading"
                            ref="accountTable"
                        >
                            <a-table-column key="realName" data-index="realName" title="运营人员" align="center">
                                <template slot-scope="tags, records">
                                    <a @click="toPerson(records)">
                                        {{ tags }}
                                    </a>
                                </template>
                            </a-table-column>
                            <a-table-column
                                key="accountCount"
                                data-index="accountCount"
                                title="账户数量"
                                align="center"
                            />
                            <a-table-column key="charge" data-index="charge" title="花费" align="center" />
                            <a-table-column key="weekCharge" data-index="weekCharge" align="center">
                                <span slot="title"
                                    >本周花费
                                    <a-tooltip>
                                        <template slot="title"> 最近本周（周一到周日）广告账户花费 </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </span>
                            </a-table-column>
                            <a-table-column key="grew" data-index="grew" align="center">
                                <span slot="title"
                                    >花费环比
                                    <a-tooltip>
                                        <template slot="title"> 本周与上周的消耗环比 </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </span>
                            </a-table-column>
                            <a-table-column
                                key="effectiveCount"
                                data-index="effectiveCount"
                                title="有效素材数"
                                align="center"
                            />
                            <a-table-column key="campaignCount" data-index="campaignCount" align="center">
                                <span slot="title"
                                    >新上计划数
                                    <a-tooltip>
                                        <template slot="title"> 显示数据为昨日新建计划数 </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </span>
                            </a-table-column>
                            <a-table-column key="unitCount" data-index="unitCount" align="center">
                                <span slot="title"
                                    >新上组数
                                    <a-tooltip>
                                        <template slot="title"> 显示数据为昨日新建广告组数 </template>
                                        <a-icon type="question-circle" />
                                    </a-tooltip>
                                </span>
                            </a-table-column>
                        </a-table>
                    </a-card>
                </a-col>
            </a-row>
            <a-card :title="typeValue === 'project' ? '项目列表' : '账户列表'">
                <div class="keep-person-content" slot="extra">
                    <div class="person-content-title">
                        <div class="content-title-checkout" style="margin-right: 10px">
                            <!-- <span class="title-checkout-custom"
                                ><a @click="exportExcel" :loading="visibleLoading">导出数据</a></span
                            > -->
                        </div>
                        <div class="content-title-checkout">
                            <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
                            <span class="title-checkout-time">
                                <a-range-picker
                                    v-model="dateValue"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                    @change="getPersonList()"
                                />
                            </span>
                            <span class="title-checkout-time">
                                <a-radio-group v-model="typeValue" @change="checkOutType">
                                    <a-radio-button value="project"> 项目 </a-radio-button>
                                    <a-radio-button value="account"> 账户 </a-radio-button>
                                </a-radio-group>
                            </span>
                        </div>
                    </div>
                </div>
                <a-table
                    size="middle"
                    :columns="columns"
                    :dataSource="dataSource"
                    bordered
                    id="outTable"
                    :pagination="ipagination"
                    :scroll="{ x: scrollX }"
                    :loading="loading"
                    ref="accountTable"
                    @change="sort"
                    v-if="showChange"
                >
                    <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
                    <a slot="projectName" slot-scope="text, records" @click="toAccount(records)">{{ text }}</a>
                    <a slot="authName" slot-scope="text, records" @click="toDetail(records)">{{ text }}</a>
                    <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                    <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                    <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                    <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                    <span slot="convertMaterial" slot-scope="convertMaterial">{{
                        convertMaterial | formatCurrency
                    }}</span>
                    <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{
                        play25FeedBreak | formatCurrency
                    }}</span>
                    <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{
                        play50FeedBreak | formatCurrency
                    }}</span>
                    <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{
                        play75FeedBreak | formatCurrency
                    }}</span>
                    <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{
                        play100FeedBreak | formatCurrency
                    }}</span>
                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                    <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                    <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                    <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                    <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                    <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                    <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                    <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
                    <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
                    <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
                    <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
                    <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
                    <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
                    <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                    <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                    <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
                        eventCreditGrantLandingPage | formatCurrency
                    }}</span>
                    <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
                    <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
                        eventCreditGrantLandingPageCost | decimalsHandle
                    }}</span>
                    <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
                    <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
                        eventCreditGrantLandingPageRate | toPercentage
                    }}</span>
                    <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
                        play25FeedBreakRate | toPercentage
                    }}</span>
                    <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>

                    <span slot="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="nextDayOpenCost" slot-scope="nextDayOpenCost">{{
                        nextDayOpenCost | decimalsHandle
                    }}</span>
                    <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
                        gameAddictionCost | decimalsHandle
                    }}</span>
                    <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
                        downloadFinishCost | decimalsHandle
                    }}</span>
                    <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
                        downloadStartCost | decimalsHandle
                    }}</span>
                    <span slot="installFinishCost" slot-scope="installFinishCost">{{
                        installFinishCost | decimalsHandle
                    }}</span>
                    <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>

                    <span slot="downloadStartRate" slot-scope="downloadStartRate">{{
                        downloadStartRate | toPercentage
                    }}</span>
                    <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
                        downloadFinishRate | toPercentage
                    }}</span>
                    <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                    <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
                        activeRegisterRate | toPercentage
                    }}</span>
                    <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
                        gameAddictionRate | toPercentage
                    }}</span>
                    <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{
                        nextDayOpenRate | toPercentage
                    }}</span>
                </a-table>
            </a-card>
        </a-spin>
        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />
    </div>
</template>
<script>
import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
import { downFile, downFilePost } from '@/api/manage'
import keepPersonData from './keep-manage-data'
import { mapGetters } from 'vuex'
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')
export default {
    name: 'keep-manage',
    components: {
        customColumn,
    },
    data() {
        return {
            visibleLoading: false,
            accountPageSpinning: false,
            typeValue: 'project',
            selectValue: 'charge',
            loading: false,
            totalAll: 100,
            projectId: null,
            dataSource: [],
            showChange: true,
            url: '/etl/reportAccountHourly/projectList',
            listNum: [],
            visible: false,
            columns: [...keepPersonData.setNoDeleteProjectColumns(), ...keepPersonData.setDefaultColumns()],
            echartsColumns: [...keepPersonData.setOperateField()],
            echartsData: [],
            columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
            scrollX: 1500,
            personData: null,
            dateEchart: [moment(), moment()],
            dateMiddle: [moment(), moment()],
            dateValue: [moment(), moment()],
            dateRanges: keepPersonData.setTimeRange(),
            target: 'cost',
            order: 'descend',
            clientWidth: 0,
            updateAccountEchart: null,
            ipagination: {
                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.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                },
            },
            echartsLoading: false,
            echartsIpagination: {
                current: 1,
                pageSize: 5,
                //   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.echartsIpagination.current = current
                    this.echartsIpagination.pageSize = pageSize
                },
            },
        }
    },
    computed: {
        checkDisabled() {
            if (
                this.dateEchart.length === 2 &&
                moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')
            ) {
                return true
            } else {
                return false
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),

        sort(pagination, filters, sorter, { currentDataSource }) {
            // console.log(pagination, filters, sorter)
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize
            if (sorter.order) {
                this.order = sorter.order ? sorter.order : 'descend'
                this.target = sorter.columnKey
                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
            }
        },
        disabledDate(current) {
            return current && current > moment().endOf('day')
        },
        handleDataPicker(date, dateString) {
            console.log(date, dateString, '-------')
        },
        handleCustomClick() {
            this.visible = true
            this.listNum = [...this.columns]
        },

        onShowSizeChange(current, pageSize) {
            console.log(current, pageSize, 'current, pageSize')
        },
        handleCauseSizeChange(current, pageSize) {
            console.log(current, pageSize, 'size-size')
        },
        handleCancelClick(status) {
            this.isCustomVisible = status
        },
        //自定义列相关
        closeCustomColumn() {
            this.visible = false
        },
        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 = 0
            } else if (this.columns.length >= 8) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 150
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
            } else {
                this.scrollX = 0
                this.columns.forEach((element) => {
                    element.width = 'auto'
                    element.fixed = false
                })
            }

            let arr = JSON.stringify(this.columns)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: this.typeValue === 'project' ? 15 : 16,
            }).then((res) => {})
        },
        showColumn() {
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: this.typeValue === 'project' ? 15 : 16,
            }).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 >= 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.columns = [...this.columnsFixd, ...columns]

                                // this.tableHandle()
                            }

                            // console.log(this.columns)
                        }
                    }

                    this.changeColumn(this.columns)
                }
            })
        },
        //自定义列结束

        //获取个人绩效
        getPersonAchievements() {
            let params = {}
            params.userId = this.userInfo().id
            this.getAction('/etl/reportAccountHourly/personalAchievements', params)
                .then((res) => {
                    this.accountPageSpinning = false
                    if (res.success) {
                        this.personData = res.result
                    } else {
                        this.$message.error(res.message)
                    }
                })
                .catch((error) => {
                    this.accountPageSpinning = false
                    console.log(error, 'eeee')
                })
        },

        //切换列表账户项目选项
        checkOutType() {
            this.showChange = false
            this.projectId = null
            this.ipagination.current = 1
            if (this.typeValue === 'account') {
                this.url = '/etl/reportAccountHourly/leaderAccountPageList'
                this.columns = [...keepPersonData.setNoDeleteColumns(), ...keepPersonData.setDefaultColumns()]
                this.columnsFixd = keepPersonData.setNoDeleteColumns()
            } else {
                this.url = '/etl/reportAccountHourly/projectList'
                this.columns = [...keepPersonData.setNoDeleteProjectColumns(), ...keepPersonData.setDefaultColumns()]
                this.columnsFixd = keepPersonData.setNoDeleteProjectColumns()
            }
            this.showChange = true
            this.showColumn()
            this.getPersonList()
        },

        //点击项目查看账户
        toAccount(item) {
            this.showChange = false
            this.projectId = item.projectId
            this.ipagination.current = 1
            this.typeValue = 'account'
            this.url = '/etl/reportAccountHourly/leaderAccountPageList'
            this.columns = [...keepPersonData.setNoDeleteColumns(), ...keepPersonData.setDefaultColumns()]
            this.columnsFixd = keepPersonData.setNoDeleteColumns()
            this.showChange = true
            this.getPersonList()
        },

        //跳转个人页面
        toPerson(records) {
            let params = {}
            params.person = records.userId
            params.timeRange = this.dateMiddle
            localStorage.setItem('stockWatchUserId', JSON.stringify(params))
            this.$nextTick(() => {
                this.$router.push('/modules/stockWatch/modules/keep-person/keep-person?person=' + records.userId)
            })
        },

        //点击跳转盯盘详情页
        toDetail(item) {
            let params = {}
            params.accountId = item.accountId
            params.timeRange = this.dateValue
            localStorage.setItem('stockWatchAccountId', JSON.stringify(params))
            this.$nextTick(() => {
                this.$router.push('/modules/stockWatch/accountPage')
            })
        },

        //获取列表
        getPersonList(data) {
            this.loading = true
            let params = {}
            params.userId = this.userInfo().id
            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            params.pageNo = this.ipagination.current
            params.pageSize = this.ipagination.pageSize

            if (this.typeValue === 'account') {
                params.projectId = this.projectId
            }

            if (data) {
                params.sortCode = data.target
                if (data.order == 'descend') {
                    params.sortType = 'DESC'
                } else {
                    params.sortType = 'ASC'
                }
            } else {
                params.sortCode = this.target
                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
            }
            this.postDataAction(this.url, params).then((res) => {
                this.loading = false
                if (res.success) {
                    this.dataSource = res.result.list
                    this.ipagination.total = res.result.total
                }
            })
        },

        //获取运营人员详情列表
        getOperatingStaffDataList() {
            this.echartsLoading = true
            let params = {}
            params.startTime = this.dateMiddle.length === 2 ? moment(this.dateMiddle[0]).format('YYYY-MM-DD') : null
            params.endTime = this.dateMiddle.length === 2 ? moment(this.dateMiddle[1]).format('YYYY-MM-DD') : null
            params.pageNo = this.echartsIpagination.current
            params.pageSize = this.echartsIpagination.pageSize
            params.userId = this.userInfo().id
            // echartsData
            this.postDataAction('/etl/reportAccountHourly/operatingStaffDataList', params)
                .then((res) => {
                    this.echartsLoading = false
                    if (res.success) {
                        this.echartsData = res.result.list
                        this.echartsIpagination.total = res.result.total
                    } else {
                        this.$message.error(res.message)
                    }
                })
                .catch((error) => {
                    this.echartsLoading = false
                    console.log(error)
                })
        },

        //单日数据只查询花费判断
        setDataQuery() {
            if (
                this.dateEchart.length === 2 &&
                moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')
            ) {
                this.$message.warning('单日数据只查询花费')
                this.selectValue = 'charge'
            }
            this.getQueryNewlyData()
        },

        //趋势图数据接口
        getQueryNewlyData() {
            let params = {}
            params.userId = this.userInfo().id
            params.parameterCode = this.selectValue
            params.startTime = this.dateEchart.length === 2 ? moment(this.dateEchart[0]).format('YYYY-MM-DD') : null
            params.endTime = this.dateEchart.length === 2 ? moment(this.dateEchart[1]).format('YYYY-MM-DD') : null
            this.postDataAction('/etl/reportAccountHourly/queryNewlyData', params)
                .then((res) => {
                    if (res.success) {
                        this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result.data))
                        this.updateAccountEchart = res.result.updateTime
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        //趋势图echarts配置
        initAccountIndexEchart(data) {
            // let type='激活'
            // console.log(res);(data)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    x: this.clientWidth > 1100 ? '6%' : '8%',
                    width: '90%',
                    y: '12%',
                    bottom: '25px',
                    right: '15px',
                },
                xAxis: [
                    {
                        data: data.map((item) => {
                            if (this.checkDisabled) {
                                return (item.time >= 10 ? item.time : '0' + item.time) + ':00'
                            } else {
                                return item.time
                            }
                        }),
                        axisLine: {
                            lineStyle: {
                                color: '#ddd',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c56790',
                            },
                        },
                        boundaryGap: true,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        show: true,
                    },
                ],
                series: [
                    {
                        name:
                            this.selectValue === 'campaign'
                                ? '上新计划数'
                                : this.selectValue === 'unit'
                                ? '上新组数'
                                : '花费',
                        data: data.map((item) => {
                            return item.value
                        }),
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#007AFF',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#007AFF',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#007AFF', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }

            return option
        },
        //获取echart的值
        initEchart(idName, optionName) {
            let that = this
            const chart = this.$refs[idName]
            //   // console.log(res);(chart)
            if (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()
                })
            }
        },
    },
    watch: {
        'ipagination.current': function (n, o) {
            if (n !== o) {
                this.getPersonList()
            }
        },
        'echartsIpagination.current': function (n, o) {
            if (n !== o) {
                this.getOperatingStaffDataList()
            }
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.accountPageSpinning = true
            this.clientWidth = document.documentElement.clientWidth - 224
            this.showColumn()
            this.getPersonAchievements()
            this.getPersonList()
            this.getQueryNewlyData()
            this.getOperatingStaffDataList()
        })
    },
}
</script>
<style lang="less" scoped>
@import 'keep-manage';
</style>
