<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">
            <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">
                            <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"
                            :filterOption="filterOption"
                            showSearch
                            allowClear
                            :disabled="disabledValue"
                            @change="groupValue = undefined"
                        >
                            <a-select-option
                                v-for="(item, index) in dataDimensionList"
                                :key="index + 1"
                                :value="item.companyId"
                            >
                                {{ item.companyName }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="item" v-if="dataDimensionValue == 'd57fecdcf7a94d009736d9c850731582'">
                        <span>运营组</span>
                        <a-select
                            v-model="groupValue"
                            style="width: 300px; margin-left: 10px"
                            :filterOption="filterOption"
                            showSearch
                            allowClear
                        >
                            <a-select-option :value="1"> 运营组一部 </a-select-option>
                            <a-select-option :value="2"> 运营组二部 </a-select-option>
                        </a-select>
                    </div> -->
                </div>
                <div class="item" style="float: right">
                    <a-button :loading="searchLoading" 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="8">
                    <a-card class="material-report-card">
                        <span slot="title">
                            {{ mediaDimension == 'b' ? '快手' : '头条' }}消耗
                            <!-- <a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
                                <a-icon type="info-circle-o" />
                            </a-tooltip> -->
                        </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" v-if="accountIndexList.totalCharge">
                                {{ accountIndexList.totalCharge | decimalsHandle }}
                            </div>
                            <div v-else>-</div>
                            <div
                                v-if="accountIndexList.totalCharge"
                                class="accountIndexEchart"
                                id="effectiveVideoEcharts"
                                style="width: 100%; height: 50px; margin: 0 auto"
                                ref="effectiveVideoEcharts"
                                :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                            ></div>
                        </div>
                        <div class="report-card-line"></div>
                        <div class="report-card-radio">
                            <span>环比：{{ accountIndexList.chargeRoi ? accountIndexList.chargeRoi : '-' }}</span>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="8">
                    <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" v-if="accountIndexList.platformCharge">
                                {{ Number(accountIndexList.platformCharge) | decimalsHandle }}
                            </div>
                            <div v-else>-</div>
                            <div
                                v-if="accountIndexList.platformCharge"
                                id="accountIndexEchart"
                                class="accountIndexEchart"
                                style="width: 100%; height: 50px; margin: 0 auto"
                                ref="accountIndexEchart"
                                :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                            ></div>
                        </div>
                        <div class="report-card-line"></div>
                        <div class="report-card-radio">
                            <span
                            >环比：{{
                                    accountIndexList.platformChargeRoi ? accountIndexList.platformChargeRoi : '-'
                                }}</span
                            >
                        </div>
                    </a-card>
                </a-col>

                <a-col :sm="24" :md="12" :xl="8">
                    <a-spin :spinning="spinningPopularVideoList">
                        <a-card class="material-report-card">
                            <span slot="title">
                                {{ showElseTitle ? '今日消耗/元' : '运营组一部' }}
                                <!-- <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
                                    <a-icon type="info-circle-o" />
                                </a-tooltip> -->
                            </span>

                            <div class="report-card-result" v-if="showElseTitle">
                                <div class="report-card-money">
                                    {{ Number(popularVideoList.totalCharge) | decimalsHandle }}
                                </div>
                                <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div>
                            </div>
                            <div class="report-card-result" v-else>
                                <div class="report-card-money">
                                    {{ Number(popularVideoList.oneCharge) | decimalsHandle }}
                                </div>
                                <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div>
                            </div>
                            <div class="report-card-line"></div>
                            <div class="report-card-radio">
                                <span
                                >消耗环比：{{
                                        showElseTitle ? popularVideoList.chargeRoi : popularVideoList.oneChargeRoi
                                    }}</span
                                >
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 20px">
                <a-col :sm="24" :md="12" :xl="8">
                    <a-spin :spinning="spinningPopularVideoList">
                        <a-card class="material-report-card">
                            <span slot="title">
                                {{ showElseTitle ? '本月现金消耗/元' : '运营组二部' }}
                                <!-- <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
                                    <a-icon type="info-circle-o" />
                                </a-tooltip> -->
                            </span>

                            <div class="report-card-result" v-if="showElseTitle">
                                <div class="report-card-money">
                                    {{ Number(popularVideoList.realCharged) | decimalsHandle }}
                                </div>
                                <!-- <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div> -->
                            </div>
                            <div class="report-card-result" v-else>
                                <div class="report-card-money" style="display: flex">
                                    <span style="flex: 1">
                                        {{ Number(popularVideoList.twoCharge) | decimalsHandle }}
                                    </span>
                                    <span style="flex: 1">
                                        {{ Number(popularVideoList.twoCharge2) | decimalsHandle }}
                                    </span>
                                </div>
                                <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div>
                            </div>
                            <div class="report-card-line"></div>

                            <div class="report-card-radio" style="display: flex">
                                <span style="flex:1"
                                >消耗环比：{{
                                        showElseTitle ? popularVideoList.realChargedRoi : popularVideoList.twoChargeRoi
                                    }}</span
                                >
                                <span style="flex:1" v-if="!showElseTitle">消耗环比：{{
                                        popularVideoList.twoChargeRoi2
                                    }}</span>
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
                <a-col :sm="24" :md="12" :xl="8">
                    <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>

                            <div class="report-card-result">
                                <div class="report-card-money">
                                    {{ Number(popularVideoList.monthCharge) | decimalsHandle }}
                                </div>

                                <a-progress
                                    type="line"
                                    :percent="`${
                                        Number(popularVideoList.monthCharge)
                                            ? (
                                                  (Number(popularVideoList.monthCharge) /
                                                      Number(popularVideoList.monthlyGoalValue)) *
                                                  100
                                              ).toFixed(2)
                                            : 0
                                    }`"
                                    style="margin-top: 10px"
                                />
                                <!-- <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div> -->
                            </div>
                            <div class="report-card-line"></div>
                            <div class="report-card-radio">
                                <!-- <span>：{{ popularVideoList.chargeRoi }}</span> -->
                                <div>
                                    <span>目标金额：</span>
                                    <span v-if="popularVideoList.monthlyGoalValueVisible"
                                    >{{
                                            popularVideoList.monthlyGoalValue
                                                ? popularVideoList.monthlyGoalValue
                                                : '暂未填写'
                                        }}
                                        <a-icon
                                            type="edit"
                                            @click="popularVideoList.monthlyGoalValueVisible = false"
                                        ></a-icon>
                                    </span>
                                    <a-space v-else>
                                        <a-input-number v-model:value="popularVideoList.monthlyGoalValue"/>
                                        <a-button type="primary" @click="okValue(popularVideoList, 'month')"
                                        >确定
                                        </a-button
                                        >
                                    </a-space>
                                </div>
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
                <a-col :sm="24" :md="12" :xl="8">
                    <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>

                            <div class="report-card-result">
                                <div class="report-card-money">
                                    {{ Number(popularVideoList.weekCharge) | decimalsHandle }}
                                </div>
                                <a-progress
                                    :percent="`${
                                        Number(popularVideoList.weekCharge)
                                            ? (
                                                  (Number(popularVideoList.weekCharge) /
                                                      Number(popularVideoList.weeklyGoalValue)) *
                                                  100
                                              ).toFixed(2)
                                            : 0
                                    }`"
                                    style="margin-top: 10px"
                                />
                                <!-- <div
                                    v-if="timeShowEchartsStatus"
                                    class="accountIndexEchart"
                                    id="popularVideoEcharts"
                                    style="width: 100%; height: 50px; margin: 0 auto"
                                    ref="popularVideoEcharts"
                                    :style="{ width: (clientWidth / 24) * 8 - 48 - 24 + 'px' }"
                                ></div> -->
                            </div>
                            <div class="report-card-line"></div>
                            <div class="report-card-radio">
                                <div>
                                    <span>目标金额：</span>
                                    <span v-if="popularVideoList.weeklyGoalValueVisible"
                                    >{{
                                            popularVideoList.weeklyGoalValue
                                                ? popularVideoList.weeklyGoalValue
                                                : '暂未填写'
                                        }}
                                        <a-icon
                                            type="edit"
                                            @click="popularVideoList.weeklyGoalValueVisible = false"
                                        ></a-icon>
                                    </span>
                                    <a-space v-else>
                                        <a-input-number v-model:value="popularVideoList.weeklyGoalValue"/>
                                        <a-button type="primary" @click="okValue(popularVideoList, 'week')"
                                        >确定
                                        </a-button
                                        >
                                    </a-space>
                                    <!-- <a-input
                                        style="margin-top: -25px; margin-left: 24%"
                                        v-model="popularVideoList.weeklyGoalValue"
                                        v-else
                                    >
                                        <a slot="addonAfter" @click="okValue(popularVideoList, 'week')"
                                            >确定</a
                                        >
                                    </a-input> -->
                                </div>
                            </div>
                        </a-card>
                    </a-spin>
                </a-col>
            </a-row>
        </a-spin>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="24">
                <a-spin :spinning="signatureStatus">
                    <a-card title="项目消耗排行榜" style="width: 100%" :bordered="false">
                        <a-button type="primary" @click="exportExcel" slot="extra" :loading="downloadLoading"
                        >下载
                        </a-button
                        >

                        <a-table
                            bordered
                            :columns="columns"
                            :data-source="accountList"
                            size="middle"
                            :pagination="ipagination"
                        >
                        </a-table>
                    </a-card>
                </a-spin>
            </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' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import {downFilePost, downFile} from '@/api/manage'

var echarts = require('echarts')
const columnsFixd = [
    {
        title: '排名',
        dataIndex: 'number',
        align: 'center',
    },
    {
        title: '项目',
        dataIndex: 'projectName',
        align: 'center',
    },
    {
        title: '运营负责人',
        dataIndex: 'operateName',
        align: 'center',
    },
    {
        title: '销售',
        dataIndex: 'saleName',
        align: 'center',
    },
    {
        title: '消耗(元)',
        dataIndex: 'charge',
        align: 'center',
        scopedSlots: {customRender: 'charge'},
    },
    {
        title: '消耗环比',
        dataIndex: 'chargeRoi',
        align: 'center',
        scopedSlots: {customRender: 'chargeRoi'},
    },

    {
        title: '基建数',
        dataIndex: 'newUnitNum',
        align: 'center',
        scopedSlots: {customRender: 'newUnitNum'},
    },

    {
        title: '现金消耗',
        dataIndex: 'realCharge',
        align: 'center',
        scopedSlots: {customRender: 'realCharge'},
    },
    {
        title: '激励消耗',
        dataIndex: 'jlCharge',
        align: 'center',
        scopedSlots: {customRender: 'jlCharge'},
    },
]

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.getVideoTopList()
                },
            },
            accountList: [],
            downloadLoading: false,
            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(), moment()],
            videoType: 0,
            labelType: 0,
            dataDimension: 'a',
            mediaDimension: 'b',
            dataDimensionValue: undefined,
            groupValue: undefined,
            dataDimensionList: [],
            disabledValue: false,
            specificLoading: false,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            showElseTitle: true,
            spinningPopularVideoList: false,
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),

        handleMaterialRanking(e) {
            this.materialRankValue = e.target.value
            this.getVideoTopList()
        },
        initAccountIndexEchart(data) {
            let yData = data.map((item) => {
                return item.charge
            })
            let xData = data.map((item) => {
                if (item.statDate) {
                    return item.statDate
                } else {
                    return item.hour
                }
            })
            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: false,
                        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 yData = data.map((item) => {
                return item.charge
            })
            let xData = data.map((item) => {
                if (item.statDate) {
                    return item.statDate
                } else {
                    if (item.hour > 10) {
                        return item.hour + ':00'
                    } else {
                        return '0' + item.hour + ':00'
                    }
                }
            })
            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.getAccountIndexData()   快手头条消耗查询
            // this.getPopularVideoData()   本日本周本月消耗集合
            Promise.all([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.getAction(
                    process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/getCompany?userId=' + this.userInfo().id
                ).then((res) => {
                    this.specificLoading = false
                    if (res.success) {
                        this.dataDimensionList = res.result
                        // this.dataDimensionValue = res.result[0].companyId
                        // if (this.dataDimensionValue == 'd57fecdcf7a94d009736d9c850731582') {
                        //     this.showElseTitle = false
                        // } else {
                        //     this.showElseTitle = true
                        // }
                        console.log(this.userInfo())
                        if (
                            this.userInfo().id != 'b161b7d9793942f980dbfe8c931cd1b0' &&
                            this.userInfo().id != '228c45f913924639bf20c79ce5dadb16'
                        ) {
                            if (this.userInfo().roleName != '管理员' && this.userInfo().roleName != '销售AM') {
                                this.disabledValue = true
                            } else {
                                this.disabledValue = false
                            }
                        } else {
                            this.disabledValue = false
                        }

                        // 找到重复的数据
                        // 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
            }
        },


        getAccountIndexData() {
            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
            // params.companyId = this.dataDimensionValue
            return new Promise((resolve, reject) => {
                that.getAction(process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/getHomeCharges', params).then(
                    (res) => {
                        if (res.success) {
                            this.accountIndexList = res.result
                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result.list))
                            this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result.list))
                            resolve(res.result)
                        } else {
                            this.$message.error(res.message)
                            this.accountIndexList = {}
                            reject(res.message)
                        }
                    }
                )
            })
        },
        okValue(data, type) {
            var that = this
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.userId = this.userInfo().id
            // params.companyId = this.dataDimensionValue
            if (type == 'week') {
                params.weeklyGoalValue = Number(data.weeklyGoalValue)
            } else {
                params.monthlyGoalValue = Number(data.monthlyGoalValue)
            }
            this.postDataAction(
                process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/setUpManagerSaleValue',
                params
            ).then((res) => {
                this.$nextTick(() => {
                    if (res.code == 200) {
                        that.getPopularVideoData()
                    } else {
                        that.$message.error('设置失败')
                        if (type == 'week') {
                            data.weeklyGoalValueVisible = true
                        } else {
                            data.monthlyGoalValueVisible = true
                        }
                    }
                })
            })
        },
        getPopularVideoData() {
            this.spinningPopularVideoList = true

            let that = this
            let params = {}
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.userId = this.userInfo().id
            // params.companyId = this.dataDimensionValue
            // params.operate = this.groupValue

            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
            return new Promise((resolve, reject) => {
                that.getAction(
                    process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/getDayAndMonthlyCharges',
                    params
                ).then((res) => {
                    this.spinningPopularVideoList = false
                    if (res.success) {
                        this.popularVideoList = {
                            ...res.result,
                            monthlyGoalValueVisible: true,
                            weeklyGoalValueVisible: true,
                        }
                        // this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result))
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        callback() {
            this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active))
        },

        getVideoTopList() {
            this.accountList = []
            this.signatureStatus = true
            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
            params.pageNo = this.ipagination.current
            params.pageSize = this.ipagination.pageSize
            return new Promise((resolve, reject) => {
                this.getAction(process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/getProjectChargeTop', params)
                    .then((res) => {
                        this.signatureStatus = false
                        if (res.success) {
                            this.accountList = res.result.list || []
                            this.ipagination.total = res.result.total || 0
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    })
                    .catch((error) => {
                        this.signatureStatus = false
                    })
            })
        },

        toDetail(md5) {
            let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2}
            localStorage.setItem('videoInfo', JSON.stringify(params))
            this.$router.push({
                path: '/materialReport/marterialDetail',
            })
        },
        getTagProportionAnalyseList() {
            return new Promise((resolve, reject) => {
                this.postDataAction(process.env.VUE_APP_BASE_STARE_URL + '/overView/V2/tagProportionAnalyse', {}).then(
                    (res) => {
                        if (res.success) {
                            resolve(res.result)
                        } else {
                            reject(res.message)
                        }
                    }
                )
            })
        },
        exportExcel() {
            this.downloadLoading = true
            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
            // params.operate = this.groupValue

            // params.companyId = this.dataDimensionValue
            downFile(process.env.VUE_APP_BASE_STARE_URL + '/manager/sale/getProjectChargeExcel', params).then((res) => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                })
                this.downloadLoading = false
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download =
                    this.dateValue[0].format('YYYY-MM-DD') +
                    '-' +
                    this.dateValue[1].format('YYYY-MM-DD') +
                    '项目消耗排行.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },
        handleSubmit() {
            this.spinning = true
            this.searchLoading = true
            this.ipagination.current = 1
            // if (this.dataDimensionValue == 'd57fecdcf7a94d009736d9c850731582') {
            //     this.showElseTitle = false
            // } else {
            //     this.showElseTitle = true
            // }
            this.getData()
        },
        resetSubmit() {
            this.resetLoading = true
            this.dateValue = [moment(), moment()]
            this.dataDimension = 'a'
            this.mediaDimension = 'b'
            this.ipagination.current = 1
            // this.dataDimensionValue = this.dataDimensionList[0].companyId
            // this.groupValue = undefined
            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()
        },
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getProjectList().then((res) => {
                this.getData()
            })
        })
    },
    activated() {
        this.$nextTick(() => {
            this.clientWidth = document.documentElement.clientWidth - 224
            this.getProjectList().then((res) => {
                this.getData()
            })
        })
    },
}
</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>
