<style>
.materialReport .chart-card-content {
    display: none !important;
}
</style>
<style lang="less" scoped>
::v-deep .ant-table {
    //设置表格头部竖向滚动宽度
    ::v-deep .ant-table-header::-webkit-scrollbar {
        width: 4px;
    }

    //设置表格体滚动宽度
    ::v-deep .ant-table-body,
    .ant-table-body-inner {
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #909090;
        }
        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            background: #ededed;
        }
    }

    //解决固定列底部预留的空隙
    ::v-deep .ant-table-fixed-left,
    .ant-table-fixed-right {
        .ant-table-body-outer {
            margin-bottom: 0 !important;
        }
    }
}
</style>
<style scoped>
::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
    padding: 11px 16px;
}
.bg {
    width: 100%;
    height: 100%;
}
.bg:after {
    content: '';
    width: 110%;
    height: 110%;
    position: absolute;
    left: -5%;
    top: -5%;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
    background: rgba(0, 0, 0, 0.8);
}
.top-ul-style {
    width: 100%;
    padding-left: 0;
}
.top-ul-style li {
    height: 100px;
    border: 1px solid #f2f2f2;
    margin-bottom: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.li-cost {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: flex-end;
}
.li-cost span {
    font-size: 16px;
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}
</style>
<template>
    <div class="materialReport">
        <a-spin :spinning="spinning">
            <a-row :gutter="24" style="margin-top: 20px">
                <a-col :sm="24" :md="12" :xl="6">
                    <a-card class="material-report-card">
                        <span slot="title">
                            快手消耗
                            <a-tooltip title="今日的快手消耗" slot="action">
                                <a-icon type="info-circle-o" />
                            </a-tooltip>
                        </span>
                        <div class="report-card-result">
                            <div class="report-card-money">
                                {{
                                    materialReportCardList.kuaishou
                                        ? '￥' + decimalsHandle(materialReportCardList.kuaishou.todayCharge, 2)
                                        : '-'
                                }}
                            </div>
                            <div class="report-card-msg">
                                <span>
                                    周同比
                                    <a-icon
                                        v-if="
                                            materialReportCardList.kuaishou &&
                                            materialReportCardList.kuaishou.thisWeekCharge >
                                                materialReportCardList.kuaishou.lastWeekCharge
                                        "
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{
                                        materialReportCardList.kuaishou
                                            ? contrast(
                                                  materialReportCardList.kuaishou.thisWeekCharge,
                                                  materialReportCardList.kuaishou.lastWeekCharge
                                              )
                                            : '-'
                                    }}
                                </span>
                                <span>
                                    日环比
                                    <a-icon
                                        v-if="
                                            materialReportCardList.kuaishou &&
                                            materialReportCardList.kuaishou.todayCharge >
                                                materialReportCardList.kuaishou.yesterdayCharge
                                        "
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{
                                        materialReportCardList.kuaishou
                                            ? contrast(
                                                  materialReportCardList.kuaishou.todayCharge,
                                                  materialReportCardList.kuaishou.yesterdayCharge
                                              )
                                            : '-'
                                    }}
                                </span>
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-card class="material-report-card">
                        <span slot="title">
                            头条消耗
                            <a-tooltip title="今日的头条消耗" slot="action">
                                <a-icon type="info-circle-o" />
                            </a-tooltip>
                        </span>
                        <div class="report-card-result">
                            <div class="report-card-money">
                                {{
                                    materialReportCardList.bytedance
                                        ? '￥' + decimalsHandle(materialReportCardList.bytedance.todaycost, 2)
                                        : '-'
                                }}
                            </div>
                            <div class="report-card-msg">
                                <span>
                                    周同比
                                    <a-icon
                                        v-if="
                                            materialReportCardList.bytedance &&
                                            materialReportCardList.bytedance.thisWeekcost >
                                                materialReportCardList.bytedance.lastWeekcost
                                        "
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{
                                        materialReportCardList.bytedance
                                            ? contrast(
                                                  materialReportCardList.bytedance.thisWeekcost,
                                                  materialReportCardList.bytedance.lastWeekcost
                                              )
                                            : '-'
                                    }}
                                </span>
                                <span>
                                    日环比
                                    <a-icon
                                        v-if="
                                            materialReportCardList.bytedance &&
                                            materialReportCardList.bytedance.todaycost >
                                                materialReportCardList.bytedance.yesterdaycost
                                        "
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{
                                        materialReportCardList.bytedance
                                            ? contrast(
                                                  materialReportCardList.bytedance.todaycost,
                                                  materialReportCardList.bytedance.yesterdaycost
                                              )
                                            : '-'
                                    }}
                                </span>
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-card class="material-report-card">
                        <span slot="title"> 快手昨日素材上新数 </span>
                        <span slot="extra"> </span>
                        <div class="report-card-result">
                            <div class="report-card-money">
                                {{
                                    materialReportCardList.kuaishou
                                        ? materialReportCardList.kuaishou.kuaishouCount
                                        : '-'
                                }}
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-spin :spinning="spinningPopularVideoList">
                        <a-card class="material-report-card">
                            <span slot="title"> 头条昨日素材上新数 </span>
                            <span slot="extra"> </span>
                            <div class="report-card-result">
                                <div class="report-card-money">
                                    {{
                                        materialReportCardList.bytedance
                                            ? materialReportCardList.bytedance.bytedanceCount
                                            : '-'
                                    }}
                                </div>
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
            </a-row>
        </a-spin>
        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <!-- <a-spin :spinning="spinningChart"> -->
                <a-card style="width: 100%" title="项目数据">
                    <div class="option" style="justify-content: space-between">
                        <div class="option" style="padding: 0">
                            <div class="item">
                                <span>日期选择</span>
                                <a-range-picker
                                    v-model="dateValue"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                    style="width: 250px"
                                />
                            </div>
                            <div class="item">
                                <span>媒体维度</span>
                                <a-radio-group v-model="mediaDimension" @change="getProjectList">
                                    <a-radio-button value="b">快手</a-radio-button>
                                    <a-radio-button value="a">头条</a-radio-button>
                                </a-radio-group>
                            </div>
                            <div class="item">
                                <span>选择项目</span>
                                <a-select
                                    v-model="dataDimensionValue"
                                    style="width: 300px; margin-left: 10px"
                                    :mode="'default'"
                                    :maxTagCount="2"
                                    :loading="specificLoading"
                                    :filterOption="filterOption"
                                    showSearch
                                    allowClear
                                >
                                    <a-select-option
                                        v-if="dataDimensionList.length == 0 && specificLoading"
                                        value="no"
                                        disabled
                                    >
                                        数据请求中，请稍后。。。
                                    </a-select-option>
                                    <a-select-option
                                        v-for="(item, index) in dataDimensionList"
                                        :key="index + 1"
                                        :value="item.id"
                                    >
                                        {{ item.projectName }}
                                    </a-select-option>
                                </a-select>
                            </div>
                            <div class="item">
                                <span>类型</span>
                                <a-select
                                    v-model="dataType"
                                    style="width: 300px; margin-left: 10px"
                                    :mode="'default'"
                                    allowClear
                                >
                                    <a-select-option :value="0"> 消耗 </a-select-option>
                                    <a-select-option :value="1"> 在投客户数-项目 </a-select-option>
                                    <a-select-option :value="2"> 在投客户数-广告主主体 </a-select-option>
                                    <a-select-option :value="3"> 基建数 </a-select-option>
                                </a-select>
                            </div>
                        </div>
                        <div class="item" style="float: right">
                            <a-button
                                :loading="resetLoading"
                                :disabled="dateValue.length == 0 || (dataDimension == 'b' && !dataDimensionValue)"
                                type="primary"
                                @click="handleSubmit"
                            >
                                搜索
                            </a-button>
                            <a-button
                                :disabled="spinning"
                                :loading="resetLoading"
                                style="margin-left: 15px"
                                @click="resetSubmit"
                            >
                                重置
                            </a-button>
                        </div>
                    </div>
                    <!-- <a-tabs v-model="active" @change="callback">
                            <a-tab-pane key="cost" tab="消耗"> </a-tab-pane>
                            <a-tab-pane key="active" tab="激活数"> </a-tab-pane>
                            <a-tab-pane key="aclick" tab="曝光数"> </a-tab-pane>
                        </a-tabs> -->
                    <div class="echart">
                        <div class="echartBody">
                            <div
                                id="echart"
                                ref="echart"
                                style="height: 350px"
                                :style="{ width: (clientWidth / 24) * 24 - 48 - 24 + 'px' }"
                            ></div>
                            <a-empty
                                v-if="chartList.length == 0"
                                style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
                            />
                        </div>
                    </div>
                </a-card>
                <!-- </a-spin> -->
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="24">
                <a-card style="width: 100%" title="项目报表">
                    <div slot="extra">
                        <a-select
                            v-model="category"
                            style="width: 300px; margin-left: 10px"
                            :mode="'default'"
                            @change="getTableMediaList"
                        >
                            <a-select-option :value="0"> 全部 </a-select-option>
                            <a-select-option :value="1"> 环比-10% </a-select-option>
                        </a-select>
                    </div>
                    <a-table
                        size="middle"
                        :dataSource="designTopList"
                        :columns="columns"
                        bordered
                        id="outTable"
                        :pagination="false"
                        :loading="designTopLoading"
                        ref="accountTable"
                        :scroll="{ x: 2400, y: 800 }"
                        @change="sort"
                    >
                        <span slot="rio" slot-scope="text, records">
                            {{ text }}
                            <a-icon v-if="text && parseFloat(text) > 0" type="caret-up" style="color: #f00" />
                            <a-icon v-else type="caret-down" style="color: green" />
                        </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card style="width: 100%" title="运营数据详情">
                    <a-table
                        size="middle"
                        :dataSource="operateDetailList"
                        :columns="operateDetailColumns"
                        bordered
                        id="outTable"
                        :pagination="false"
                        :loading="operateDetailLoading"
                        ref="accountTable"
                        :scroll="{ y: 280 }"
                    >
                        <span slot="rate" slot-scope="text, records">
                            {{ text }}
                            <a-icon v-if="text && parseFloat(text) > 0" type="caret-up" style="color: #f00" />
                            <a-icon v-else type="caret-down" style="color: green" />
                        </span>
                        <span slot="average" slot-scope="text, records">
                            {{ (records.totalCost / records.accountNum).toFixed(2) }}
                        </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card style="width: 100%" title="运营组数据">
                    <a-table
                        size="middle"
                        :dataSource="operateGroupList"
                        :columns="operateGroupColumns"
                        bordered
                        id="outTable"
                        :pagination="false"
                        :loading="operateGroupLoading"
                        ref="accountTable"
                        :scroll="{ y: 280 }"
                        @change="sort"
                    >
                        <span slot="yearOnYearCost" slot-scope="text, records">
                            {{ text }}
                            <a-icon v-if="text && parseFloat(text) > 0" type="caret-up" style="color: #f00" />
                            <a-icon v-else type="caret-down" style="color: green" />
                        </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script>
import moment from 'moment'
import YoutTable from '@/components/youtTable/YoutTable'
import ChartCard from '@/components/ChartCard'
import Trend from '@/components/Trend'
import { mapGetters } from 'vuex'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
var echarts = require('echarts')
const columnsFixd = [
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        fixed: 'left',
        width: '150px',
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
        align: 'center',
    },
    // {
    //     title: '公司名称',
    //     dataIndex: 'companyName',
    //     align: 'center',
    // },
    {
        title: '销售',
        dataIndex: 'saler',
        align: 'center',
        scopedSlots: { customRender: 'saler' },
    },
    {
        title: '运营负责人',
        dataIndex: 'operater',
        align: 'center',
    },
    {
        title: '在投账户数',
        dataIndex: 'accountNum',
        align: 'center',
    },
    {
        title: '运营人数',
        dataIndex: 'operaterNum',
        align: 'center',
    },

    {
        title: '消耗',
        dataIndex: 'charge',
        align: 'center',
        scopedSlots: { customRender: 'charge' },
        sorter: () => {},
    },
    {
        title: '曝光',
        dataIndex: 'aclick',
        align: 'center',
    },
    {
        title: '点击',
        dataIndex: 'bclick',
        align: 'center',
    },
    {
        title: '与昨日消耗对比',
        dataIndex: 'rio',
        align: 'center',
        scopedSlots: { customRender: 'rio' },
    },
]
const ksColumns = [
    {
        title: '搜索广告',
        dataIndex: 'ssAd',
        align: 'center',
        scopedSlots: { customRender: 'ssAd' },
    },
    {
        title: '上下滑大屏广告',
        dataIndex: 'sxhAd',
        align: 'center',
        scopedSlots: { customRender: 'sxhAd' },
    },
    {
        title: '联盟',
        dataIndex: 'lmAd',
        align: 'center',
        scopedSlots: { customRender: 'lmAd' },
    },
    {
        title: '信息流广告',
        dataIndex: 'xxlAd',
        align: 'center',
        scopedSlots: { customRender: 'xxlAd' },
    },
    {
        title: '激励视频广告',
        dataIndex: 'jlAd',
        align: 'center',
        scopedSlots: { customRender: 'jlAd' },
    },
    {
        title: '开屏广告',
        dataIndex: 'kpAd',
        align: 'center',
        scopedSlots: { customRender: 'kpAd' },
    },
]
const numColumns = [
    {
        title: '素材上新数',
        dataIndex: 'num',
        align: 'center',
        sorter: () => {},
    },
]
const aColumns = [
    {
        title: '今日上新数',
        dataIndex: 'materialUploadMediaNum',
        align: 'center',
        scopedSlots: { customRender: 'materialUploadMediaNum' },
        sorter: () => {},
    },
    {
        title: '自定义基建数',
        dataIndex: 'yesterdayUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'yesterdayUnitNum' },
        sorter: () => {},
    },
    {
        title: '今日自定义基建数',
        dataIndex: 'newUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'newUnitNum' },
        sorter: () => {},
    },
    {
        title: '托管基建数',
        dataIndex: 'yesterdayTrushUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'yesterdayTrushUnitNum' },
    },
    {
        title: '今日托管基建数',
        dataIndex: 'newTrushUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'newTrushUnitNum' },
    },
]
const bColumns = [
    {
        title: '自定义基建数',
        dataIndex: 'unitNum',
        align: 'center',
        scopedSlots: { customRender: 'unitNum' },
        sorter: () => {},
    },
    {
        title: '托管基建数',
        dataIndex: 'trushUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'trushUnitNum' },
    },
]
const ttaColumns = [
    {
        title: '今日上新数',
        dataIndex: 'materialUploadMediaNum',
        align: 'center',
        scopedSlots: { customRender: 'materialUploadMediaNum' },
        sorter: () => {},
    },
    {
        title: '自定义基建数',
        dataIndex: 'yesterdayUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'yesterdayUnitNum' },
        sorter: () => {},
    },
    {
        title: '今日自定义基建数',
        dataIndex: 'newUnitNum',
        align: 'center',
        scopedSlots: { customRender: 'newUnitNum' },
        sorter: () => {},
    },
    {
        title: '项目基建数',
        dataIndex: 'projectNum',
        align: 'center',
        scopedSlots: { customRender: 'projectNum' },
        sorter: () => {},
    },
    
]
const ttbColumns = [
    {
        title: '自定义基建数',
        dataIndex: 'unitNum',
        align: 'center',
        scopedSlots: { customRender: 'unitNum' },
        sorter: () => {},
    },
]

export default {
    components: {
        YoutTable,
        ChartCard,
        Trend,
    },
    data() {
        return {
            spinningMaterialGroupData: false,
            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
                    this.getTableMediaList()
                },
            },
            tabListNoTitle: [
                {
                    key: '2',
                    tab: '快手',
                },
                {
                    key: '1',
                    tab: '头条',
                },
            ],
            noTitleKey: '2',
            active: 'cost',
            groupDisabled: false,
            timeShowEchartsStatus: true,
            signatureStatus: false,
            materialReportCardList: {},
            materialGroupData: {},
            accountIndexList: {},
            popularVideoList: {},
            materialRankValue: 0,
            designRankingValue: 1,
            designTopLoading: false,
            noImg: require('@/assets/noImg.png'),
            visibleVideo: false,
            videoUrlShow: '',
            cost: '0',
            spinning: false,
            spinningChart: false,
            spinningChartPie: false,
            loading: false,
            chartList: [],
            videoList: [],
            designTopList: [],
            target: '',
            order: 'descend',
            columns: [...columnsFixd, ...ksColumns, ...numColumns, ...aColumns], // table的表头
            dateRanges: {
                今天: [moment(), moment()],
                近三天: [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')],
            },
            dateValue: [moment(), moment()],
            videoType: 0,
            labelType: 0,
            dataDimension: 'a',
            mediaDimension: 'b',
            projectId: null,
            dataDimensionValue: null,
            dataDimensionList: [],
            specificLoading: false,
            dataType: 0,
            category: 0,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            spinningPopularVideoList: false,

            operateDetailList: [],
            operateDetailColumns: [
                {
                    title: '运营人员',
                    dataIndex: 'userName',
                    align: 'center',
                    scopedSlots: { customRender: 'userName' },
                },
                {
                    title: '项目数量',
                    dataIndex: 'projectNums',
                    align: 'center',
                },
                {
                    title: '账户数量',
                    dataIndex: 'accountNum',
                    align: 'center',
                },
                {
                    title: '平均账户消耗',
                    dataIndex: 'average',
                    align: 'center',
                    scopedSlots: { customRender: 'average' },
                },
                {
                    title: '消耗',
                    dataIndex: 'totalCost',
                    align: 'center',
                },
                {
                    title: '花费环比',
                    dataIndex: 'rate',
                    align: 'center',
                    scopedSlots: { customRender: 'rate' },
                },
                {
                    title: '新上计划数',
                    dataIndex: 'newCampaignNum',
                    align: 'center',
                },
                {
                    title: '新上组数',
                    dataIndex: 'newUnitNum',
                    align: 'center',
                },
                {
                    title: '项目基建数',
                    dataIndex: 'projectNum',
                    align: 'center',
                    customRender:function(t){
                        if(t){
                            return t
                        }else{
                            return '-'
                        }
                    }
                },
            ],
            operateDetailLoading: false,

            operateGroupList: [],
            operateGroupColumns: [
                {
                    title: '运营经理',
                    dataIndex: 'realname',
                    align: 'center',
                    scopedSlots: { customRender: 'realname' },
                },
                {
                    title: '运营数量',
                    dataIndex: 'operationNum',
                    align: 'center',
                },
                {
                    title: '日均消耗',
                    dataIndex: 'averageDayCost',
                    align: 'center',
                },
                {
                    title: '人均消耗',
                    dataIndex: 'averagePeopleCost',
                    align: 'center',
                },
                {
                    title: '花费',
                    dataIndex: 'totalCost',
                    align: 'center',
                },
                {
                    title: '花费环比',
                    dataIndex: 'yearOnYearCost',
                    align: 'center',
                    scopedSlots: { customRender: 'yearOnYearCost' },
                },
                {
                    title: '项目数量',
                    dataIndex: 'projectNums',
                    align: 'center',
                },
                {
                    title: '账户数量',
                    dataIndex: 'accountNum',
                    align: 'center',
                },
                {
                    title: '平均账户消耗',
                    dataIndex: 'averageAccountCost',
                    align: 'center',
                },
                {
                    title: '基建数量',
                    dataIndex: 'unitNum',
                    align: 'center',
                },                
                {
                    title: '项目基建数',
                    dataIndex: 'projectNum',
                    align: 'center',
                    customRender:function(t){
                        if(t){
                            return t
                        }else{
                            return '-'
                        }
                    }
                },
            ],
            operateGroupLoading: false,
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),
        initAccountIndexEchart(data) {
            let xData = data.videoList.length && data.videoList.map((item) => item.time)
            let yData = data.videoList.length && data.videoList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '上新数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#9907f5a6',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#9907f5a6',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#9907f5a6', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        handleEffectiveVideoEcharts(data) {
            let xData = data.effectiveList.length && data.effectiveList.map((item) => item.time)
            let yData = data.effectiveList.length && data.effectiveList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '有效数',
                        data: yData,
                        type: 'bar',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#2461F1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        handlePopularVideoEcharts(data) {
            let xData = data.hotList.length && data.hotList.map((item) => item.time)
            let yData = data.hotList.length && data.hotList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '爆款数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#2461F1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },

        getData() {
            this.spinning = true
            this.spinningChart = true
            this.active = 'cost'
            this.getProjectList()
            this.getGroupData()
            this.getDetailData()
            Promise.all([this.getSumData(), this.getChartMediaList(), this.getTableMediaList(null)])
                .then((res) => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                    this.spinningChart = false
                })
                .catch((error) => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                    // this.$error({
                    // 	title: '页面数据加载出错',
                    // 	content: '请刷新重试或联系管理员查询'
                    // });
                })
        },

        getSumData() {
            return new Promise((resolve, reject) => {
                this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/summary/report/getTotalCharge').then((res) => {
                    if (res.success) {
                        let defaultList = res.result
                        this.materialReportCardList = res.result
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        getChartMediaList() {
            var params = {}
            params.projectId = this.dataDimensionValue
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            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.type = this.dataType

            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/summary/report/getTrendCharge', params).then(
                (res) => {
                    this.resetLoading = false
                    if (res.success) {
                        let defaultList = res.result
                        // this.materialReportCardList = res.result
                        this.chartList = res.result.today
                        this.initEchart(
                            'echart',
                            this.handlerEchartOption(res.result.today, res.result.yesterday, [], [])
                        )
                    } else {
                    }
                }
            )
        },
        getTableMediaList(data) {
            const dataOne = this.dateValue[0].format('YYYY-MM-DD')
            const dataTwo = this.dateValue[1].format('YYYY-MM-DD')
            const dataThree = moment().format('YYYY-MM-DD')
            if (this.mediaDimension === 'a') {
                if (dataTwo === dataOne && dataTwo === dataThree) {
                    this.columns = [...columnsFixd, ...numColumns, ...ttaColumns]
                } else {
                    this.columns = [...columnsFixd, ...numColumns, ...ttbColumns]
                }
            } else {
                if (dataTwo === dataOne && dataTwo === dataThree) {
                    this.columns = [...columnsFixd, ...ksColumns, ...numColumns, ...aColumns]
                } else {
                    this.columns = [...columnsFixd, ...ksColumns, ...numColumns, ...bColumns]
                }
            }

            this.designTopLoading = true
            var params = {}
            params.projectId = this.dataDimensionValue
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            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
            params.category = this.category

            //  target: 'unitNum',
            // order: 'descend',
            if (data && data.target) {
                if (data.target == 'charge') {
                    params.sortCode = ''
                } else {
                    params.sortCode = data.target
                }

                if (data.order == 'descend') {
                    params.order = 'DESC'
                } else {
                    params.order = 'ASC'
                }
            } else {
                params.sortCode = null
                params.order = null
            }
            this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/summary/report/getProjectReport', params).then(
                (res) => {
                    if (res.success) {
                        this.designTopLoading = false
                        this.designTopList = res.result.list.map((item) => {
                            if (this.mediaDimension === 'a') {
                                return {
                                    ...item,
                                    charge: item.cost,
                                }
                            } else {
                                return {
                                    ...item,
                                }
                            }
                        })
                        this.ipagination.total = res.result.total
                    } else {
                    }
                }
            )
        },

        getProjectList() {
            this.specificLoading = true
            this.dataDimensionList = []
            this.dataDimensionValue = null
            return new Promise((resolve, reject) => {
                this.getAction(
                    '/ctop/project/getProjectListByMediaId?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
                ).then((res) => {
                    this.specificLoading = false
                    if (res.success) {
                        this.dataDimensionList = res.result
                        // 找到重复的数据
                        // const changeData = res.result.map(item => item.projectId);
                        // let rep = [];
                        // changeData.forEach((item,index)=>{
                        // 	if(changeData.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
                        // 		let obj = {};
                        // 		obj.key = (changeData.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标
                        // 		obj.value = item;
                        // 		rep.push(obj);
                        // 	}
                        // });
                        // console.log(rep, 'newArr--newArr');
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        sort(pagination, filters, sorter, { currentDataSource }) {
            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.getTableMediaList({
                    target: sorter.columnKey,
                    order: sorter.order ? sorter.order : 'descend',
                })
            }
        },

        getGroupData() {
            this.operateGroupLoading = true
            let that = this
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            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.userId = this.userInfo().id

            return new Promise((resolve, reject) => {
                that.getAction(process.env.VUE_APP_BASE_STARE_URL + '/summary/report/getOperateGroupInfo', params).then(
                    (res) => {
                        this.operateGroupLoading = false
                        if (res.success) {
                            this.operateGroupList = res.result.list
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        getDetailData() {
            this.operateDetailLoading = true
            let that = this
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            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.userId = this.userInfo().id
            return new Promise((resolve, reject) => {
                that.getAction(process.env.VUE_APP_BASE_STARE_URL + '/summary/report/getOperateInfo', params).then(
                    (res) => {
                        this.operateDetailLoading = false
                        if (res.success) {
                            this.operateDetailList = res.result.list
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        getPopularVideoData() {
            let that = this
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            params.dimension =
                this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
            params.userId = this.userInfo().id
            params.type = this.videoType
            if (this.dataDimension === 'a') {
                params.projects = this.dataDimensionValue
            } else if (this.dataDimension === 'b') {
                params.leaderId = this.dataDimensionValue
            } else {
                params.designerId = this.userInfo().id
            }
            this.spinningPopularVideoList = true
            return new Promise((resolve, reject) => {
                that.postDataAction(
                    process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumDataVideoHot',
                    params
                ).then((res) => {
                    this.spinningPopularVideoList = false
                    if (res.success) {
                        this.popularVideoList = res.result
                        this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result))
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        callback() {
            this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active))
        },
        getLabelDataList() {
            this.spinningChartPie = true
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            params.dimension =
                this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
            params.userId = this.userInfo().id
            params.type = this.labelType
            if (this.dataDimension === 'a') {
                params.projects = this.dataDimensionValue
            } else if (this.dataDimension === 'b') {
                params.leaderId = this.dataDimensionValue
            } else {
                params.designerId = this.userInfo().id
            }
            return new Promise((resolve, reject) => {
                this.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/labelRatio', params).then(
                    (res) => {
                        this.spinningChartPie = false
                        if (res.success) {
                            if (res.result) {
                                this.initEchart('echartCircular', this.handlerAgeOption(res.result))
                            } else {
                                const myChart = echarts.init(document.getElementById('echartCircular'))
                                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('echartCircular').innerHTML = html
                                    document.getElementById('echartCircular').removeAttribute('_echarts_instance_')
                                })
                            }
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        toDetail(md5) {
            let params = { md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2 }
            localStorage.setItem('videoInfo', JSON.stringify(params))
            this.$router.push({
                path: '/materialReport/marterialDetail',
            })
        },
        getDesignTopList() {
            this.designTopLoading = true
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            params.dimension =
                this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
            params.userId = this.userInfo().id
            params.type = this.designRankingValue
            params.pageNumber = this.ipagination.current
            params.pageSize = this.ipagination.pageSize
            if (this.dataDimension === 'a') {
                params.projects = this.dataDimensionValue
            } else if (this.dataDimension === 'b') {
                params.leaderId = this.dataDimensionValue
            } else {
                params.designerId = this.userInfo().id
            }

            // const paramsData = {
            //     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,
            //     mediaId: this.mediaDimension == 'a' ? 1 : 2,
            //     projects: this.dataDimensionValue,
            //     type: this.designRankingValue
            // }
            this.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/designTop', params).then(
                (res) => {
                    if (res.success) {
                        this.designTopLoading = false
                        this.designTopList = res.result.list
                        this.ipagination.total = res.result.total
                    } else {
                        this.designTopLoading = false
                        this.$message.error(this.message)
                    }
                }
            )
        },
        getTagProportionAnalyseList() {
            return new Promise((resolve, reject) => {
                this.postDataAction(
                    process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/tagProportionAnalyse',
                    {}
                ).then((res) => {
                    if (res.success) {
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        handleSubmit() {
            this.cancel()
            this.resetLoading = true

            this.ipagination.current = 1
            // this.getData()
            this.getChartMediaList()
            this.getTableMediaList(null)
            this.getGroupData()
            this.getDetailData()
        },
        resetSubmit() {
            this.resetLoading = true
            this.dateValue = [moment(), moment()]
            this.dataDimension = 'a'
            this.mediaDimension = 'b'
            this.dataDimensionValue = null
            this.ipagination.current = 1
            this.dataType = 0
            this.handleSubmit()
        },
        //获取echart的值
        initEchart(idName, optionName) {
            let that = this
            const chart = this.$refs[idName]
            if (chart) {
                echarts.init(document.getElementById(idName)).dispose()
                const myChart = echarts.init(document.getElementById(idName))
                myChart.setOption(optionName)
                window.addEventListener('resize', function () {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
        handlerEchartOption(todayList, yesterdayList, timeData, lengthData) {
            var that = this
            if (!!yesterdayList) {
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            if (todayList[0].time == 0) {
                                if (params.length > 1) {
                                    return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/> 
                            ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`
                                } else {
                                    return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`
                                }
                            } else {
                                return `${params[0].marker}${params[0].name}: ${params[0].value}<br/> 
                            ${params[1].marker}${params[1].name}: ${params[1].value}`
                            }
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            id: 0,
                            type: 'category',
                            boundaryGap: false,
                            data:
                                todayList.length == yesterdayList.length
                                    ? todayList.map((item) => {
                                          return item.time
                                      })
                                    : yesterdayList.map((item) => {
                                          return item.time
                                      }),
                            position: 'bottom',
                        },
                        {
                            id: 1,
                            type: 'category',
                            boundaryGap: false,
                            data: yesterdayList.map((item) => {
                                return item.time
                            }),
                            axisPointer: {
                                type: 'none',
                            },
                            position: 'bottom',
                            offset: 30,
                        },
                    ],

                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '今天',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            xAxisIndex: 0,
                            data:
                                this.mediaDimension === 'a'
                                    ? todayList.map((item) => {
                                          return item.cost
                                      })
                                    : todayList.map((item) => {
                                          return item.charge
                                      }),

                            lineStyle: {
                                color: '#00BFFF',
                                width: 2,
                            },
                            itemStyle: {
                                color: '#00BFFF',
                                borderWidth: 2,
                                borderColor: '#00BFFF',
                            },
                            id: 0,
                        },
                        {
                            id: 1,
                            name: '昨天',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            xAxisIndex: 1,
                            data:
                                this.mediaDimension === 'a'
                                    ? yesterdayList.map((item) => {
                                          return item.cost
                                      })
                                    : yesterdayList.map((item) => {
                                          return item.charge
                                      }),

                            lineStyle: {
                                color: '#00FF7F',
                                width: 2,
                            },
                            itemStyle: {
                                color: '#00FF7F',
                                borderWidth: 2,
                                borderColor: '#00FF00',
                            },
                        },
                    ],
                }
                return option
            } else {
                let optionTwo = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            // console.log(params)
                            if (
                                that.dataType == 3 &&
                                moment(that.dateValue[0]).format('YYYY-MM-DD') ==
                                    moment(that.dateValue[1]).format('YYYY-MM-DD')
                            ) {
                                return `${params[0].marker}${params[0].name}时: ${params[0].value}`
                            } else {
                                return `${params[0].marker}${params[0].name}: ${params[0].value}`
                            }
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            id: 0,
                            type: 'category',
                            boundaryGap: false,
                            data: todayList.map((item) => {
                                return item.time
                            }),
                            position: 'bottom',
                        },
                    ],

                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '今天',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            xAxisIndex: 0,
                            data:
                                this.dataType == 0
                                    ? this.mediaDimension === 'a'
                                        ? todayList.map((item) => {
                                              return item.cost
                                          })
                                        : todayList.map((item) => {
                                              return item.charge
                                          })
                                    : todayList.map((item) => {
                                          return item.count
                                      }),
                            lineStyle: {
                                color: '#00BFFF',
                                width: 2,
                            },
                            itemStyle: {
                                color: '#00BFFF',
                                borderWidth: 2,
                                borderColor: '#00BFFF',
                            },
                            id: 0,
                        },
                    ],
                }
                return optionTwo
            }
        },
        handlerAgeOption(data) {
            const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
            let that = this
            let option = {
                color: colorList,
                backgroundColor: '#fff',
                tooltip: {
                    formatter: function (params) {
                        if (that.labelType == 0) {
                            return `${params.marker}${params.name}素材数: ${params.value}<br/> 
                            ${params.marker}${params.name}素材数占比: ${params.percent}%`
                        } else {
                            return `${params.marker}${params.name}消耗: ${that.decimalsHandle(params.value, 2)}<br/> 
                            ${params.marker}${params.name}消耗占比: ${params.percent}%`
                        }
                    },
                },
                legend: {
                    orient: 'horizontal',
                    top: 'top',
                    icon: 'circle',
                    width: '100%',
                    data: ['真人', '制作', '其他'],
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '50%'],
                        data: [
                            { value: data.reality, name: '真人' },
                            { value: data.making, name: '制作' },
                            { value: data.other, name: '其他' },
                        ],
                        labelLine: {
                            length: 5,
                            length2: 5,
                        },
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold',
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        itemStyle: {
                            borderRadius: 5,
                            color: (params) => {
                                return colorList[params.dataIndex]
                            },
                        },
                    },
                ],
            }
            return option
        },
        disabledDate(current) {
            return current && current >= moment()
        },
        getDesignTeamList() {
            this.specificLoading = true
            this.dataDimensionList = []
            var params = {}
            params.mediaId = this.mediaDimension == 'a' ? 1 : 2
            params.userId = this.userInfo().id
            this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getDesignTeamList', params).then(
                (res) => {
                    this.specificLoading = false
                    if (res.success) {
                        this.dataDimensionList = res.result.map((item) => {
                            return {
                                ...item,
                                projectId: item.leaderId,
                                projectName: item.departName,
                            }
                        })
                        let data = this.dataDimensionList.filter((i) => {
                            return i.default
                        })
                        if (data.length == 1) {
                            this.dataDimensionValue = data[0].projectId
                        }
                    }
                }
            )
        },
        contrast(thisData, lastData) {
            var data
            data = (((thisData - lastData) / lastData) * 100).toFixed(2) + '%'
            return data
        },
        decimalsHandle(val, num) {
            if (val && typeof val != 'string') {
                if (val >= 0) {
                    val = parseFloat(val).toFixed(num)
                    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(num)
                    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
            }
        },
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getData()
        })
    },
    activated() {
        this.$nextTick(() => {
            this.clientWidth = document.documentElement.clientWidth - 224
        })
    },
}
</script>
<style lang="less" scoped>
.materialReport {
    .material-report-card-two {
        width: 25%;
        ::v-deep * {
            border: 0;
        }
    }

    .material-report-card {
        // height: 220px;
        ::v-deep .ant-card-head {
            border: none;
        }
        ::v-deep .ant-card-body {
            padding-top: 5px;
        }
        .report-card-result {
            height: 88px;
        }
        .report-card-money {
            font-size: 30px;
            font-weight: bold;
        }
        .report-card-msg {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-top: 20px;
        }
        .report-card-line {
            width: 100%;
            height: 1px;
            margin-top: 20px;
            background: #e8e8e8;
        }
        .report-card-radio {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 14px;
        }
    }
    .option {
        background: white;
        padding: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .item {
            margin-right: 15px;
            margin-bottom: 15px;
            height: 32px;
            line-height: 32px;
            flex-shrink: 0;
            span {
                margin-right: 10px;
            }
        }
    }
    .echart {
        margin-top: 20px;
        padding: 0 20px 20px;
        background: white;
        .echart-header {
            padding: 20px 0;
            font-size: 15px;
            font-weight: 600;
        }
    }
    .tableBody {
        margin-top: 20px;
    }
}
</style>
<style>
.materialReport .card-containers {
    overflow: hidden !important;
}
.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
    margin-top: -16px !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
    background: #fff !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
    border-color: #fff !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
    border-color: transparent !important;
    background: transparent !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
    border-color: #fff !important;
    background: #fff !important;
}
</style>
