<style>
.materialReport .chart-card-content {
    display: none !important;
}
</style>
<style scoped>
.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">
        <div class="card-containers">
            <a-tabs type="card">
                <a-tab-pane key="1">
                    <span slot="tab"><a-icon type="unordered-list" />素材大盘</span>
                </a-tab-pane>
            </a-tabs>
            <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="mediaDimensionChange">
                            <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-radio-group v-model="dataDimension" @change="changeDataDimension">
                            <a-radio-button value="a">项目</a-radio-button>
                            <a-radio-button value="b" :disabled="groupDisabled">设计组</a-radio-button>
                            <a-radio-button value="c">设计人</a-radio-button>
                        </a-radio-group>
                        <a-select
                            v-if="dataDimension != 'c'"
                            v-model="dataDimensionValue"
                            style="width: 300px; margin-left: 10px"
                            :mode="dataDimension === 'a' ? 'multiple' : '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.projectId"
                            >
                                {{ item.projectName }}{{ item.leaderId ? '-' + item.leaderName : '' }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
                <div class="item" style="float: right">
                    <a-button
                        :loading="searchLoading"
                        :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>
        </div>
        <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.costTotal ? '￥' + materialReportCardList.costTotal : '-' }}
                            </div>
                            <div class="report-card-msg">
                                <span>
                                    同比
                                    <a-icon
                                        v-if="materialReportCardList.yearOnYearCompare >= 0"
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
                                </span>
                                <span>
                                    日环比
                                    <a-icon
                                        v-if="materialReportCardList.chainCompare >= 0"
                                        type="caret-up"
                                        style="color: #f00"
                                    />
                                    <a-icon v-else type="caret-down" style="color: green" />
                                    {{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
                                </span>
                            </div>
                        </div>
                        <div class="report-card-line"></div>
                        <div class="report-card-radio">
                            <span
                                >昨日消耗：{{
                                    materialReportCardList.yesterdayCost
                                        ? '￥' + materialReportCardList.yesterdayCost
                                        : '-'
                                }}</span
                            >
                        </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">{{ accountIndexList.videoTotal | formatCurrency }}</div>
                            <div
                                v-if="timeShowEchartsStatus"
                                id="accountIndexEchart"
                                class="accountIndexEchart"
                                style="width:100%; height:50px; margin:0 auto;"
                                ref="accountIndexEchart"
                                :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
                            ></div>
                        </div>
                        <div class="report-card-line"></div>
                        <div class="report-card-radio">
                            <span
                                >素材使用率：{{
                                    accountIndexList.useCompare
                                        ? Number(accountIndexList.useCompare * 100).toFixed(2)
                                        : '0.00'
                                }}%</span
                            >
                        </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="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
                                <a-icon type="info-circle-o" />
                            </a-tooltip>
                        </span>
                        <span slot="extra">
                            <a @click="getMoreVideoList('materialQuality')">更多</a>
                        </span>
                        <!-- <span slot="extra">
                            <a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
                                <a-icon type="info-circle-o" />
                            </a-tooltip>
                        </span> -->
                        <div class="report-card-result">
                            <div class="report-card-money">{{ accountIndexList.effectiveTotal | formatCurrency }}</div>
                            <div
                                v-if="timeShowEchartsStatus"
                                class="accountIndexEchart"
                                id="effectiveVideoEcharts"
                                style="width:100%; height:50px; margin:0 auto;"
                                ref="effectiveVideoEcharts"
                                :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
                            ></div>
                        </div>
                        <div class="report-card-line"></div>
                        <div class="report-card-radio">
                            <span
                                >素材有效率：{{
                                    accountIndexList.effectiveCompare
                                        ? Number(accountIndexList.effectiveCompare * 100).toFixed(2)
                                        : '0.00'
                                }}%</span
                            >
                        </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">
                                爆款视频
                                <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
                                    <a-icon type="info-circle-o" />
                                </a-tooltip>
                            </span>
                            <span slot="extra">
                                <a @click="getMoreVideoList('materialType')">更多</a>
                            </span>
                            <div class="report-card-result">
                                <div class="report-card-money">{{ popularVideoList.hotTotal | formatCurrency }}</div>
                                <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width:100%; height:50px; margin:0 auto;"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
                                ></div>
                            </div>
                            <div class="report-card-line"></div>
                            <div class="report-card-radio">
                                <span> </span>
                                <span>
                                    <a-radio-group v-model="videoType" @change="getPopularVideoData">
                                        <a-radio-button :value="0">不限</a-radio-button>
                                        <a-radio-button :value="1">制作</a-radio-button>
                                        <a-radio-button :value="2">真人</a-radio-button>
                                    </a-radio-group>
                                </span>
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
            </a-row>
        </a-spin>
        <a-spin :spinning="spinningMaterialGroupData">
            <a-row
                :gutter="24"
                style="margin-top: 20px"
                v-if="dataDimension == 'b' && materialGroupData.avgCost != null"
            >
                <a-col :sm="24" style="display:flex;">
                    <a-card class="material-report-card-two" :bordered="false">
                        <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">
                                {{ '￥' + decimalsHandle(materialGroupData.avgCost, 2) }}
                            </div>
                        </div>
                        <div class="report-card-line"></div>
                    </a-card>

                    <a-card class="material-report-card-two" :bordered="false">
                        <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">{{ materialGroupData.peopleWork }}</div>
                        </div>
                        <div class="report-card-line"></div>
                    </a-card>

                    <a-card class="material-report-card-two" :bordered="false">
                        <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">{{ materialGroupData.innovativeVideoCount }}</div>
                        </div>
                        <div class="report-card-line"></div>
                    </a-card>

                    <a-card
                        class="material-report-card-two"
                        :bordered="false"
                        v-if="materialGroupData.innovativeVideoCost != null"
                    >
                        <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">
                                {{ '￥' + decimalsHandle(materialGroupData.innovativeVideoCost, 2) }}
                            </div>
                        </div>
                        <div class="report-card-line"></div>
                    </a-card>
                    <a-card
                        class="material-report-card-two"
                        :bordered="false"
                        v-if="materialGroupData.avgMaterialCost != null"
                    >
                        <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">
                                {{ '￥' + decimalsHandle(materialGroupData.avgMaterialCost, 2) }}
                            </div>
                        </div>
                        <div class="report-card-line"></div>
                    </a-card>
                </a-col>
            </a-row>
        </a-spin>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="18">
                <a-spin :spinning="spinningChart">
                    <a-card title="数据趋势" style="width: 100%" :bordered="false">
                        <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-tab-pane key="play_duration_3s" tab="3S播放率">
							</a-tab-pane> -->
                        </a-tabs>
                        <div class="echart">
                            <div class="echartBody">
                                <div
                                    id="echart"
                                    ref="echart"
                                    style="height: 350px"
                                    :style="{ width: (clientWidth / 24) * 18 - 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-col :xl="6">
                <a-spin :spinning="spinningChartPie">
                    <a-card style="width: 100%" :bordered="false">
                        <span slot="title">
                            标签占比
                            <a-radio-group
                                v-model="labelType"
                                @change="getLabelDataList"
                                size="small"
                                style="margin-left:10px"
                            >
                                <a-radio-button :value="0">素材数</a-radio-button>
                                <a-radio-button :value="1">消耗</a-radio-button>
                            </a-radio-group>
                        </span>
                        <a-tabs v-model="active" @change="callback" style="visibility:hidden;">
                            <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-tab-pane key="play_duration_3s" tab="3S播放率"> </a-tab-pane>
                        </a-tabs>
                        <div class="echart">
                            <div class="echartBody">
                                <!-- <a-empty style="height: 350px; position: relative" /> -->
                                <div
                                    id="echartCircular"
                                    ref="echartCircular"
                                    style="height: 350px"
                                    :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
                                >
                                    <a-empty
                                        style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
                                    />
                                </div>
                            </div>
                        </div>
                    </a-card>
                </a-spin>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="12">
                <a-card title="top素材排行榜" style="width: 100%; min-height: 720px" :bordered="false">
                    <a-radio-group
                        v-if="mediaDimension === 'b'"
                        v-model="materialRankValue"
                        style="margin-bottom: 15px;"
                        @change="handleMaterialRanking"
                    >
                        <a-radio-button :value="0">内部</a-radio-button>
                        <a-radio-button :value="1">素造</a-radio-button>
                    </a-radio-group>
                    <a slot="extra" @click="getMoreVideoList">查看更多</a>
                    <div v-if="!signatureStatus && videoList.length > 0">
                        <ul class="top-ul-style">
                            <li v-for="(item, index) in videoList" :key="item.signature">
                                <div style="display: flex; position: relative; width: 80%; cursor: pointer">
                                    <span
                                        style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px"
                                    >
                                        <img
                                            :src="require('./image/' + (index + 1) + '.png')"
                                            alt=""
                                            style="width: 25px; height: auto"
                                        />
                                    </span>
                                    <div
                                        style="
										width: 25%;
										height: 100%;
										text-align: center;
										background: #f2f2f2;
										margin-left: 40px;
										border-radius: 5px;
										position: relative;
										"
                                    >
                                        <div
                                            :style="{
                                                backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
                                                backgroundSize: 'cover',
                                                backgroundRepeat: 'no-repeat',
                                                backgroundPosition: 'center center',
                                                overflow: 'hidden',
                                                position: 'absolute',
                                                top: '0',
                                                zIndex: '0'
                                            }"
                                            class="showShare bg"
                                            @click="
                                                visibleVideo = true
                                                videoUrlShow = item.url
                                            "
                                        ></div>
                                        <img
                                            :src="item.coverUrl || noImg"
                                            style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
                                            srcset=""
                                            @click="
                                                visibleVideo = true
                                                videoUrlShow = item.url
                                            "
                                        />
                                    </div>
                                    <div
                                        style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
                                        @click.stop="toDetail(item.material_id)"
                                    >
                                        <p style="margin-left: 10px; color: #1890ff">
                                            {{ item.materialName ? item.materialName : '无素材名称' }}
                                        </p>
                                        <p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
                                            <a-tag
                                                v-for="(items, val) in item.tag.split(',')"
                                                :key="val + 1"
                                                style="margin-right: 5px"
                                                v-if="val <= 3"
                                            >
                                                {{ items }}
                                            </a-tag>
                                        </p>
                                    </div>
                                </div>
                                <div class="li-cost">
                                    <span>消耗</span>
                                    <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%" />
                    <div v-else style="height: 200px;line-height: 200px;text-align: center;">
                        <a-spin />
                    </div>
                    <a-pagination size="small" :total="50" v-if="designTopList.length > 0" style="visibility:hidden;" />
                </a-card>
            </a-col>
            <a-col :xl="12">
                <a-card title="top设计排行榜" style="width: 100%; min-height: 720px" :bordered="false">
                    <a-radio-group
                        v-model="designRankingValue"
                        style="margin-bottom: 15px;"
                        @change="handleDesignRanking"
                    >
                        <a-radio-button :value="1">摄像</a-radio-button>
                        <a-radio-button :value="2">剪辑</a-radio-button>
                        <a-radio-button :value="3">编导</a-radio-button>
                    </a-radio-group>
                    <a-table
                        :columns="columns"
                        :data-source="designTopList"
                        :loading="designTopLoading"
                        :pagination="ipagination"
                        bordered
                        size="middle"
                    >
                        <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
            <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
                您的浏览器不支持 video 标签。
            </video>
        </a-modal>
    </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: 'number',
        align: 'center'
    },
    {
        title: '设计人员',
        dataIndex: 'userName',
        align: 'center'
    },
    {
        title: '角色',
        dataIndex: 'roleName',
        align: 'center'
    },
    {
        title: '消耗(元)',
        dataIndex: 'cost',
        align: 'center',
        scopedSlots: { customRender: 'cost' }
    }
]
const columnsTt = [
    {
        title: '排名',
        dataIndex: 'number',
        align: 'center'
    },
    {
        title: '设计人员',
        dataIndex: 'userName',
        align: 'center'
    },

    {
        title: '消耗(元)',
        dataIndex: 'cost',
        align: 'center',
        scopedSlots: { customRender: 'cost' }
    },
    {
        title: '爆款视频数',
        dataIndex: 'videoHotCount',
        align: 'center'
    }
]

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.getDesignTopList()
                }
            },
            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: [],
            columns: [...columnsFixd], // table的表头
            columnsFixd,
            dateRanges: {
                昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
            },
            dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
            videoType: 0,
            labelType: 0,
            dataDimension: 'a',
            mediaDimension: 'b',
            dataDimensionValue: [],
            dataDimensionList: [],
            specificLoading: false,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            spinningPopularVideoList: false
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        }
    },
    methods: {
        ...mapGetters(['userInfo']),

        handleMaterialRanking(e) {
            this.materialRankValue = e.target.value
            this.getVideoTopList()
        },
        handleDesignRanking(e) {
            this.designRankingValue = e.target.value
            this.ipagination.current = 1
            this.getDesignTopList()
        },
        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.getVideoTopList()
            this.getDesignTopList()
            this.getLabelDataList()

            this.getChartDataList()
            if (this.dataDimension == 'b') {
                this.getGroupData()
            }
            Promise.all([this.getSumData(), this.getAccountIndexData(), this.getPopularVideoData()])
                .then(res => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                })
                .catch(error => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                    // this.$error({
                    // 	title: '页面数据加载出错',
                    // 	content: '请刷新重试或联系管理员查询'
                    // });
                })
        },
        getProjectList() {
            this.specificLoading = true
            return new Promise((resolve, reject) => {
                this.postDataAction(
                    process.env.VUE_APP_BASE_MATERIAL_URL +
                        '/overView/V2/getProjects?userId=' +
                        this.userInfo().id +
                        '&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)
                    }
                })
            })
        },
        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
            }
        },
        getSumData() {
            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
            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) => {
                that.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumData', params).then(
                    res => {
                        if (res.success) {
                            let defaultList = res.result
                            if (this.mediaDimension === 'b') {
                                defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 3)
                                defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 3)
                            } else {
                                defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 2)
                                defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 2)
                            }
                            this.materialReportCardList = res.result
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        getGroupData() {
            if (this.dataDimension == 'b') {
                this.spinningMaterialGroupData = true
                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.userId = this.userInfo().id
                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) => {
                    that.postDataAction(
                        process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getDesignerAvgData',
                        params
                    ).then(res => {
                        this.spinningMaterialGroupData = false
                        if (res.success) {
                            // let defaultList = res.result
                            // if (this.mediaDimension === 'b') {
                            //     defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 3)
                            //     defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 3)
                            // } else {
                            //     defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 2)
                            //     defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 2)
                            // }
                            this.materialGroupData = res.result
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    })
                })
            }
        },
        getAccountIndexData() {
            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
            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) => {
                that.postDataAction(
                    process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumDataVideoNewEffective',
                    params
                ).then(res => {
                    if (res.success) {
                        this.accountIndexList = res.result
                        this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result))
                        this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result))
                        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)
                        }
                    }
                )
            })
        },
        getChartDataList() {
            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
            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/chartData', params).then(
                    res => {
                        this.spinningChart = false
                        if (res.success) {
                            this.chartList = res.result
                            if (res.result.length == 0) {
                                const myChart = echarts.init(document.getElementById('echart'))
                                myChart.dispose()
                            } else {
                                this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'))
                            }
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        getVideoTopList() {
            this.videoList = []
            this.signatureStatus = 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.channelType = this.materialRankValue
            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/materialTop', params)
                    .then(res => {
                        this.signatureStatus = false
                        if (res.success) {
                            this.videoList = res.result || []
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    })
                    .catch(error => {
                        this.signatureStatus = false
                    })
            })
        },
        getMoreVideoList(data) {
            localStorage.removeItem('TtmaterialParams')
            localStorage.removeItem('materialParams')
            var params = {
                mediaId: this.mediaDimension == 'a' ? 1 : 2,
                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,
                dataDimension: this.dataDimension,
                mediaDimension: this.mediaDimension,
                dateValue: this.dateValue,
                dataDimensionValue: this.dataDimensionValue,
                innovative: '',
                materialType: '',
                materialQuality: ''
            }
            if (data == 'materialQuality') {
                params.materialQuality = 1
            } else if (data == 'materialType') {
                params.materialQuality = 0
                params.materialType = this.videoType == 0 ? '' : this.videoType
            }
            params = JSON.stringify(params)
            if (this.mediaDimension == 'a') {
                localStorage.setItem('TtmaterialParams', params)
                this.$router.push({ path: '/materialReport/marterialTtList' })
            } else {
                localStorage.setItem('materialParams', params)
                this.$router.push({ path: '/materialReport/marterialList' })
            }
        },
        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.spinning = true
            this.searchLoading = true
            const dataOne = new Date(this.dateValue[0]).getTime()
            const dataTwo = new Date(this.dateValue[1]).getTime()
            if (dataTwo === dataOne) {
                this.timeShowEchartsStatus = false
            } else {
                this.timeShowEchartsStatus = true
            }
            if (this.mediaDimension === 'b') {
                this.columns = [...columnsFixd]
            } else {
                this.columns = [...columnsTt]
            }
            this.videoType = 0
            this.labelType = 0
            this.designRankingValue = 1
            this.ipagination.current = 1
            this.getData()
        },
        resetSubmit() {
            this.resetLoading = true
            this.dateValue = [moment().subtract(7, 'days'), moment()]
            this.dataDimension = 'a'
            this.mediaDimension = 'b'
            this.dataDimensionValue = []
            this.videoType = 0
            this.labelType = 0
            this.designRankingValue = 1
            this.ipagination.current = 1
            this.getData()
        },
        //获取echart的值
        initEchart(idName, optionName) {
            let that = this
            const chart = this.$refs[idName]
            if (chart) {
                const myChart = echarts.init(document.getElementById(idName))
                myChart.setOption(optionName)
                window.addEventListener('resize', function() {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
        handlerEchartOption(data, typeShow) {
            let option = {
                noDataLoadingOption: {
                    text: '暂无数据',
                    effect: 'bubble',
                    effectOption: {
                        effect: {
                            n: 0
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                    // formatter: function(params) {
                    // 	if(typeShow == 'play_duration_3s'){
                    // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
                    // 	}else{
                    // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
                    // 	}

                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    icon: 'circle',
                    top: '5%',
                    right: '5%',
                    itemWidth: 6,
                    itemGap: 20,
                    textStyle: {
                        color: '#556677'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => {
                        return item.statDate
                    }),
                    boundaryGap: false,
                    // 坐标轴线
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#e5e5e5'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#e5e5e5'
                        }
                    }
                },
                series: [
                    {
                        smooth: true,
                        name:
                            typeShow == 'cost'
                                ? '消耗'
                                : typeShow == 'aclick'
                                ? '曝光数'
                                : typeShow == 'active'
                                ? '激活数'
                                : '3S播放率',
                        type: 'line',
                        stack: '总量',
                        data: data.map(item => {
                            switch (typeShow) {
                                case 'cost':
                                    return item.cost.toFixed(3)
                                    break
                                case 'aclick':
                                    return item.aclick
                                    break
                                case 'active':
                                    return item.active
                                    break
                                case 'play_duration_3s':
                                    return item.play_duration_3s.slice(0, item.play_duration_3s.length - 1)
                                    break
                            }
                        }),
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        itemStyle: {
                            borderColor: '#ffffff',
                            borderWidth: 0
                        }
                    }
                ]
            }
            return option
        },
        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().subtract(1, 'days')
        },
        changeDataDimension(e) {
            this.materialGroupData = {}
            if (e.target.value == 'c') {
                this.dataDimensionValue = undefined
            } else if (e.target.value == 'b') {
                this.dataDimensionValue = ''
                this.getDesignTeamList()
            } else if (e.target.value == 'a') {
                this.dataDimensionList = []
                this.dataDimensionValue = []
                this.getProjectList()
            }
        },
        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
                        }
                    }
                }
            )
        },
        mediaDimensionChange(e) {
            this.dataDimensionValue = undefined
            if (e.target.value === 'b') {
                this.materialRankValue = 0
            } else {
                this.materialRankValue = ''
            }
            if (this.dataDimension == 'b') {
                this.getDesignTeamList()
            } else {
                this.dataDimensionList = []
                this.dataDimensionValue = []
                this.getProjectList()
            }
        }
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getRole', {
                userId: this.userInfo().id
            }).then(res => {
                if (res.success) {
                    this.groupDisabled = !res.result.permissions
                } else {
                    this.groupDisabled = true
                }
            })
            this.getProjectList()
            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>
