<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" v-model="tabKey" @change="callbackAll">
                <a-tab-pane key="2">
                    <span slot="tab"><a-icon type="unordered-list"/>快手</span>
                </a-tab-pane>
                <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="item">
                    <!-- <span>日期选择</span>
                    <a-range-picker
                      v-model="dateValue"
                      :ranges="dateRanges"
                      :disabled-date="disabledDate"
                      style="width: 250px; float: right"
                      @change="getSumData"
                    /> -->
                </div>
                <div class="item" style="float: right">
                    <span>日期选择</span>
                    <a-range-picker
                        v-model="dateValue"
                        :ranges="dateRanges"
                        :disabled-date="disabledDate"
                        style="width: 250px; float: right"
                        @change="getSumData"
                    />
                </div>
                <a-spin :spinning="spinning" style="width: 100%">
                    <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.totalCharge
                                        ? allMoney(materialReportCardList.totalCharge, 2)
                                        : "-"
                                        }}
                                    </div>
                                </div>
                            </a-card>
                        </a-col>
                        <a-col :sm="24" :md="12" :xl="6">
                            <a-card class="material-report-card">
                <span slot="title">
                  总素材量
                  <a-tooltip title="当前筛选条件内的总素材量" slot="action">
                    <a-icon type="info-circle-o"/>
                  </a-tooltip>
                </span>
                                <div class="report-card-result">
                                    <div class="report-card-money">
                                        {{
                                        materialReportCardList.helpInfo
                                        ? materialReportCardList.helpInfo.totalCount
                                        : "-"
                                        }}
                                    </div>
                                </div>
                                <div class="report-card-line"></div>
                                <div class="report-card-radio">
                  <span
                  >真人量：{{
                      materialReportCardList.helpInfo
                        ? materialReportCardList.helpInfo.liveVideoCount
                        : "-"
                    }}</span
                  >
                                    <span
                                    >剪辑量：{{
                      materialReportCardList.helpInfo
                        ? materialReportCardList.helpInfo.clipVideoCount
                        : "-"
                    }}</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">
                                        {{
                                        materialReportCardList.pushMediaCount
                                        ? materialReportCardList.pushMediaCount
                                        : "-"
                                        }}
                                    </div>
                                </div>
                                <div class="report-card-radio"></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="筛选时段内产生消耗的数量" slot="action">
                      <a-icon type="info-circle-o"/>
                    </a-tooltip>
                  </span>
                                    <div class="report-card-result">
                                        <div class="report-card-money">
                                            {{
                                            materialReportCardList.firstChargeCount
                                            ? materialReportCardList.firstChargeCount
                                            : "-"
                                            }}
                                        </div>
                                    </div>
                                    <div class="report-card-line"></div>
                                    <div class="report-card-radio">
                    <span
                    >有效量：{{
                        materialReportCardList.effectCount
                          ? materialReportCardList.effectCount
                          : "-"
                      }}</span
                    >
                                    </div>
                                </a-card>
                            </a-spin>
                        </a-col>
                    </a-row>
                </a-spin>
            </div>
        </div>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="24">
                <a-spin :spinning="spinningChart">
                    <a-card title="数据趋势" style="width: 100%" :bordered="false">
                        <div slot="extra">
                            <div class="item">
                                <span style="margin-right: 15px">日期选择</span>
                                <a-range-picker
                                    v-model="dateValueEcharts"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                    style="width: 250px"
                                    @change="getChartDataList"
                                />
                            </div>
                        </div>
                        <a-tabs v-model="echartsKey" @change="callback">
                            <a-tab-pane key="1" tab="总消耗"></a-tab-pane>
                            <a-tab-pane key="2" tab="素材制作量"></a-tab-pane>
                            <a-tab-pane key="3" tab="推送媒体量"></a-tab-pane>
                            <a-tab-pane key="4" tab="产生消耗量"></a-tab-pane>
                            <a-tab-pane key="5" tab="有效素材量"></a-tab-pane>
                        </a-tabs>
                        <div class="echart">
                            <div class="echartBody">
                                <div
                                    id="echart"
                                    ref="echart"
                                    style="height: 350px"
                                    :style="{ width: (clientWidth / 24) * 24 - 48 - 24 + 'px' }"
                                ></div>
                                <a-empty
                                    v-if="chartList.length == 0"
                                    style="
                    width: 100%;
                    height: 350px;
                    position: absolute;
                    top: 30%;
                    z-index: 100;
                    left: 0;
                  "
                                />
                            </div>
                        </div>
                    </a-card>
                </a-spin>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card title="分项目列表" style="width: 100%" :bordered="false">
                    <div slot="extra">
                        <div class="item">
                            <span style="margin-right: 15px">日期选择</span>
                            <a-range-picker
                                v-model="dateValueProject"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                style="width: 250px"
                                @change="
                  ipagination.current = 1;
                  getDesignTopList();
                "
                            />
                        </div>
                    </div>
                    <a-radio-group
                        v-model="designRankingValue"
                        style="margin-bottom: 15px"
                        @change="handleDesignRanking"
                        v-if="
              userInfo().roleName == '剪辑' ||
              userInfo().roleName == '拍摄' ||
              userInfo().roleName == '策划'
            "
                    >
                        <a-radio-button value="clip">剪辑</a-radio-button>
                        <a-radio-button value="shot">摄像</a-radio-button>
                        <a-radio-button value="plan">编导</a-radio-button>
                    </a-radio-group>
                    <a-table
                        :columns="columns"
                        :data-source="designTopList"
                        :loading="designTopLoading"
                        :pagination="false"
                        bordered
                        size="middle"
                        :scroll="{ y: 500 }"
                    >
            <span slot="cost" slot-scope="text, records">{{
              text | decimalsHandle
            }}</span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row
            :gutter="24"
            style="margin-top: 20px"
            v-if="
          userInfo().id == '4aba62011120ac565c7f2b9f8f4aa96b'||
          userInfo().id == 'b161b7d9793942f980dbfe8c931cd1b0'||
          userInfo().id == '228c45f913924639bf20c79ce5dadb16'||
          userInfo().id == 'a6abfea0f27843bf8595a234410afb04'||
          userInfo().id == 'e9d527b2b6854a1ea0cc3167fc6a27d0'||
          userInfo().id == 'e9ca23d68d884d4ebb19d07889727dae'||
          userInfo().id == 'cf91a54ef9064624a0a819f4b28bdaa6'
      "
        >
            <a-col :xl="24">
                <a-card title="分团队列表" style="width: 100%" :bordered="false">
                    <div slot="extra">
                        <div class="item">
                            <span style="margin-right: 15px">日期选择</span>
                            <a-range-picker
                                v-model="dateValueTeam"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                style="width: 250px"
                                @change="
                  teamIpagination.current = 1;
                  getTeamList();
                "
                            />
                        </div>
                    </div>
                    <a-table
                        :columns="columnsTeam"
                        :data-source="teamList"
                        :loading="teamLoading"
                        :pagination="teamIpagination"
                        bordered
                        size="middle"
                    >
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card title="分成员列表" style="width: 100%" :bordered="false">
                    <div slot="extra">
                        <div class="item">
                            <span style="margin-right: 15px">日期选择</span>
                            <a-range-picker
                                v-model="dateValuePerson"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                style="width: 250px"
                                @change="
                  personIpagination.current = 1;
                  getPersonList();
                "
                            />
                        </div>
                    </div>
                    <a-radio-group
                        v-model="personRole"
                        style="margin-bottom: 15px"
                        @change="handleDesignRanking($event, 'person')"
                    >
                        <a-radio-button value="clip">剪辑</a-radio-button>
                        <a-radio-button value="shot">摄像</a-radio-button>
                        <a-radio-button value="plan">编导</a-radio-button>
                    </a-radio-group>
                    <a-table
                        :columns="columnsPerson"
                        :data-source="personList"
                        :loading="personLoading"
                        :pagination="personIpagination"
                        bordered
                        size="middle"
                    >
            <span slot="cost" slot-scope="text, records">{{
              text | decimalsHandle
            }}</span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card title="视频数据列表" style="width: 100%" :bordered="false">
                    <div slot="extra">
                        <div class="item">
                            <span style="margin-right: 15px">日期选择</span>
                            <a-range-picker
                                v-model="dateValueVideo"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                style="width: 250px"
                                @change="
                  videoIpagination.current = 1;
                  getVideoList();
                "
                            />
                        </div>
                    </div>
                    <a-radio-group
                        v-model="videoRole"
                        style="margin-bottom: 15px"
                        @change="handleDesignRanking($event, 'video')"
                        v-if="
              userInfo().roleName == '剪辑' ||
              userInfo().roleName == '拍摄' ||
              userInfo().roleName == '策划'
            "
                    >
                        <a-radio-button value="clip">剪辑</a-radio-button>
                        <a-radio-button value="shot">摄像</a-radio-button>
                        <a-radio-button value="plan">编导</a-radio-button>
                    </a-radio-group>
                    <a-table
                        :columns="videoColumns"
                        :data-source="videoList"
                        :loading="videoLoading"
                        :pagination="videoIpagination"
                        bordered
                        :scroll="{ x: 2000 }"
                        size="middle"
                    >
            <span slot="coverUrl" slot-scope="text, record">
              <img
                  :src="text"
                  alt=""
                  style="width: 100%; height: auto"
                  @click="
                  videoUrlShow = record.videoUrl;
                  visibleVideo = true;
                "
              />
            </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"; // 停止除当前外的其他视频播放，及停止所有视频播放的方法
    import refuseDataCreatNewVue from "../refuseDataCreatNew.vue";

    var echarts = require("echarts");
    const designCoumns = [
        {
            title: "项目名称",
            dataIndex: "projectName",
            align: "center",
        },
    ];

    const projectAddCoumns = [
        {
            title: "平均消耗",
            dataIndex: "totalAverageCost",
            align: "center",
        },
        {
            title: "真人消耗",
            dataIndex: "realPersonCost",
            align: "center",
        },
        {
            title: "arpu(真人)",
            dataIndex: "realPersonAverageCost",
            align: "center",
        },
        {
            title: "剪辑消耗",
            dataIndex: "clipCost",
            align: "center",
        },

        {
            title: "arpu(剪辑)",
            dataIndex: "clipAverageCost",
            align: "center",
        },
    ];

    const columnsFixd = [
        {
            title: "总消耗",
            dataIndex: "totalCharge",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "总制作量",
            dataIndex: "totalCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "真人量",
            dataIndex: "liveVideoCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "剪辑量",
            dataIndex: "clipVideoCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "推送媒体量",
            dataIndex: "pushMediaCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "产生消耗量",
            dataIndex: "firstChargeCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "有效量",
            dataIndex: "effectCount",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
    ];
    const teamColumns = [
        {
            title: "公司",
            dataIndex: "companyName",
            align: "center",
        },
        {
            title: "部门",
            dataIndex: "deptName",
            align: "center",
        },

        {
            title: "部门leader",
            dataIndex: "leaderName",
            align: "center",
        },
    ];
    const videoColumns = [
        {
            title: "视频",
            dataIndex: "coverUrl",
            align: "center",
            width: 100,
            scopedSlots: {customRender: "coverUrl"},
        },
        {
            title: "公司",
            dataIndex: "companyName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },

        {
            title: "项目",
            dataIndex: "projectName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "leader",
            dataIndex: "leaderName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "剪辑",
            dataIndex: "clipName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "拍摄",
            dataIndex: "shotName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "编导",
            dataIndex: "planName",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "唯一标识",
            dataIndex: "signature",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "视频名称",
            dataIndex: "videoName",
            align: "center",
            width: 300,
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "消耗",
            dataIndex: "totalCharge",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "曝光",
            dataIndex: "totalShow",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
        {
            title: "点击",
            dataIndex: "totalClick",
            align: "center",
            customRender: function (t) {
                if (t) {
                    return t;
                } else {
                    return "-";
                }
            },
        },
    ];

    export default {
        components: {
            YoutTable,
            ChartCard,
            Trend,
        },
        data() {
            return {
                tabKey: "2",
                echartsKey: "1",
                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: "clip",
                personRole: "clip",
                videoRole: "clip",
                designTopLoading: false,
                noImg: require("@/assets/noImg.png"),
                visibleVideo: false,
                videoUrlShow: "",
                cost: "0",
                spinning: false,
                spinningChart: false,
                spinningChartPie: false,
                teamLoading: false,
                loading: false,
                chartList: [],
                videoList: [],
                designTopList: [],
                teamList: [],
                teamIpagination: {
                    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.teamIpagination.current = current;
                        this.teamIpagination.pageSize = pageSize;
                        this.getTeamList();
                    },
                },
                personLoading: false,
                personList: [],
                personIpagination: {
                    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.personIpagination.current = current;
                        this.personIpagination.pageSize = pageSize;
                        this.getPersonList();
                    },
                },
                videoLoading: false,
                videoList: [],
                videoIpagination: {
                    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.videoIpagination.current = current;
                        this.videoIpagination.pageSize = pageSize;
                        this.getVideoList();
                    },
                },
                columns: [...designCoumns, ...columnsFixd,...projectAddCoumns], // table的表头
                columnsFixd,
                columnsTeam: [...teamColumns, ...columnsFixd],
                videoColumns,
                columnsPerson: [
                    ...teamColumns,
                    {
                        title: "成员",
                        dataIndex: "userName",
                        align: "center",
                    },
                    ...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")],
                dateValueEcharts: [moment().subtract(7, "days"), moment().subtract(1, "days")],
                dateValueProject: [moment().subtract(7, "days"), moment().subtract(1, "days")],
                dateValueTeam: [moment().subtract(7, "days"), moment().subtract(1, "days")],
                dateValuePerson: [moment().subtract(7, "days"), moment().subtract(1, "days")],
                dateValueVideo: [moment().subtract(1, "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"]),

            handleDesignRanking(e, type) {
                if (type == "person") {
                    this.personRole = e.target.value;
                    this.personIpagination.current = 1;
                    this.getPersonList();
                } else if (type == "viedo") {
                    this.videoRole = e.target.value;
                    this.videoIpagination.current = 1;
                    this.getVideoList();
                } else {
                    this.designRankingValue = e.target.value;
                    this.ipagination.current = 1;
                    this.getDesignTopList();
                }
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text
                        .toLowerCase()
                        .indexOf(input.toLowerCase()) >= 0
                );
            },
            getData() {
                this.spinning = true;
                this.active = "cost";

                this.getDesignTopList();
                this.getTeamList();
                this.getPersonList();
                this.getVideoList();
                Promise.all([this.getSumData(), this.getChartDataList()])
                    .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: '请刷新重试或联系管理员查询'
                        // });
                    });
            },

            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 = {};
                if (this.dateValue.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.spinning = true;
                    params.mediaId = this.tabKey;
                    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;

                    return new Promise((resolve, reject) => {
                        that
                            .getAction(
                                process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getTotalData",
                                params
                            )
                            .then((res) => {
                                this.spinning = false;
                                if (res.code == 200) {
                                    this.materialReportCardList = res.data;
                                    resolve(res.data);
                                } else {
                                    reject(res.message);
                                }
                            });
                    });
                }
            },
            callbackAll() {
                this.getData();
            },
            callback() {
                this.getChartDataList();
                //   this.initEchart("echart", this.handlerEchartOption(this.chartList, this.echartsKey));
            },
            getChartDataList() {
                var that = this;
                let params = {};
                if (this.dateValueEcharts.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.spinningChart = true;
                    params.mediaId = this.tabKey;
                    params.startDate =
                        this.dateValueEcharts.length === 2
                            ? moment(this.dateValueEcharts[0]).format("YYYY-MM-DD")
                            : null;
                    params.endDate =
                        this.dateValueEcharts.length === 2
                            ? moment(this.dateValueEcharts[1]).format("YYYY-MM-DD")
                            : null;
                    params.userId = this.userInfo().id;
                    params.type = this.echartsKey;
                    return new Promise((resolve, reject) => {
                        that
                            .getAction(
                                process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getChartData",
                                params
                            )
                            .then((res) => {
                                this.spinningChart = false;
                                if (res.code == 200) {
                                    this.chartList = res.data;
                                    if (res.data.length == 0) {
                                        const myChart = echarts.init(document.getElementById("echart"));
                                        myChart.dispose();
                                    } else {
                                        this.initEchart("echart", this.handlerEchartOption(res.data, "cost"));
                                    }
                                    resolve(res.data);
                                } else {
                                    reject(res.message);
                                }
                            });
                    });
                }
            },
            getDesignTopList() {
                let params = {};
                if (this.dateValueProject.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.designTopLoading = true;
                    params.mediaId = this.tabKey;
                    params.startDate =
                        this.dateValueProject.length === 2
                            ? moment(this.dateValueProject[0]).format("YYYY-MM-DD")
                            : null;
                    params.endDate =
                        this.dateValueProject.length === 2
                            ? moment(this.dateValueProject[1]).format("YYYY-MM-DD")
                            : null;
                    params.userId = this.userInfo().id;
                    params.role =
                        this.userInfo().roleName == "剪辑" ||
                        this.userInfo().roleName == "拍摄" ||
                        this.userInfo().roleName == "策划"
                            ? this.designRankingValue
                            : null;
                    params.pageNo = this.ipagination.current;
                    params.pageSize = this.ipagination.pageSize;

                    this.getAction(
                        process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getProjectData",
                        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);
                        }
                    });
                }
            },

            getTeamList() {
                let params = {};
                if (this.dateValueTeam.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.teamLoading = true;
                    params.mediaId = this.tabKey;
                    params.startDate =
                        this.dateValueTeam.length === 2
                            ? moment(this.dateValueTeam[0]).format("YYYY-MM-DD")
                            : null;
                    params.endDate =
                        this.dateValueTeam.length === 2
                            ? moment(this.dateValueTeam[1]).format("YYYY-MM-DD")
                            : null;
                    params.userId = this.userInfo().id;
                    params.pageNo = this.teamIpagination.current;
                    params.pageSize = this.teamIpagination.pageSize;

                    this.getAction(
                        process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getTeamData",
                        params
                    ).then((res) => {
                        if (res.success) {
                            this.teamLoading = false;
                            this.teamList = res.result.list;
                            this.teamIpagination.total = res.result.total;
                        } else {
                            this.designTopLoading = false;
                            this.$message.error(this.message);
                        }
                    });
                }
            },
            getPersonList() {
                let params = {};
                if (this.dateValuePerson.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.personLoading = true;
                    params.mediaId = this.tabKey;
                    params.startDate =
                        this.dateValuePerson.length === 2
                            ? moment(this.dateValuePerson[0]).format("YYYY-MM-DD")
                            : null;
                    params.endDate =
                        this.dateValuePerson.length === 2
                            ? moment(this.dateValuePerson[1]).format("YYYY-MM-DD")
                            : null;
                    params.userId = this.userInfo().id;
                    params.role = this.personRole;

                    params.pageNo = this.personIpagination.current;
                    params.pageSize = this.personIpagination.pageSize;

                    this.getAction(
                        process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getUserData",
                        params
                    ).then((res) => {
                        if (res.success) {
                            this.personLoading = false;
                            this.personList = res.result.list;
                            this.personIpagination.total = res.result.total;
                        } else {
                            this.designTopLoading = false;
                            this.$message.error(this.message);
                        }
                    });
                }
            },
            getVideoList() {
                let params = {};
                if (this.dateValueVideo.length != 2) {
                    this.$message.error("请选择时间");
                } else {
                    this.videoLoading = true;
                    params.mediaId = this.tabKey;
                    params.startDate =
                        this.dateValueVideo.length === 2
                            ? moment(this.dateValueVideo[0]).format("YYYY-MM-DD")
                            : null;
                    params.endDate =
                        this.dateValueVideo.length === 2
                            ? moment(this.dateValueVideo[1]).format("YYYY-MM-DD")
                            : null;
                    params.userId = this.userInfo().id;
                    params.role =
                        this.userInfo().roleName == "剪辑" ||
                        this.userInfo().roleName == "拍摄" ||
                        this.userInfo().roleName == "策划"
                            ? this.videoRole
                            : null;
                    params.pageNo = this.videoIpagination.current;
                    params.pageSize = this.videoIpagination.pageSize;

                    this.getAction(
                        process.env.VUE_APP_BASE_MATERIAL_URL + "/materialData/getVideoData",
                        params
                    ).then((res) => {
                        if (res.success) {
                            this.videoLoading = false;
                            this.videoList = res.result.list;
                            this.videoIpagination.total = res.result.total;
                        } else {
                            this.designTopLoading = false;
                            this.$message.error(this.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) {
                var that = this;
                let option = {
                    noDataLoadingOption: {
                        text: "暂无数据",
                        effect: "bubble",
                        effectOption: {
                            effect: {
                                n: 0,
                            },
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function (params) {
                            if (that.echartsKey == "2") {
                                var index = data.findIndex((item) => {
                                    return item.help_time == params[0].name;
                                });
                                return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}
              <br/> 真人量:${data[index].liveVideoCount}
              <br/>剪辑量:${data[index].clipVideoCount}`;
                            } 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.date ? item.date : item.help_time;
                        }),
                        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:
                                this.echartsKey == "1"
                                    ? "总消耗"
                                    : this.echartsKey == "2"
                                    ? "素材制作量"
                                    : this.echartsKey == "3"
                                        ? "推送媒体量"
                                        : this.echartsKey == "4"
                                            ? "产生消耗量"
                                            : "有效素材量",
                            type: "line",
                            stack: "总量",
                            data: data.map((item) => {
                                switch (this.echartsKey) {
                                    case "1":
                                        return item.totalCharge.toFixed(3);
                                        break;
                                    case "2":
                                        return item.totalCount;
                                        break;
                                    case "3":
                                        return item.pushMediaCount;
                                        break;
                                    case "4":
                                        return item.firstChargeCount;
                                        break;
                                    case "5":
                                        return item.effectCount;
                                        break;
                                }
                            }),
                            symbol: "circle",
                            symbolSize: 6,
                            lineStyle: {
                                normal: {
                                    width: 2,
                                },
                            },
                            itemStyle: {
                                borderColor: "#ffffff",
                                borderWidth: 0,
                            },
                        },
                    ],
                };
                return option;
            },
            disabledDate(current) {
                return current && current > moment().subtract(1, "days");
            },
        },
        mounted() {
            this.clientWidth = document.documentElement.clientWidth - 224;
            this.$nextTick(() => {
                console.log(this.userInfo().roleName);
                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>
