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

    //设置表格体滚动宽度
    ::v-deep .ant-table-body,
    .ant-table-body-inner {
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #909090;
        }

        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            background: #ededed;
        }
    }

    //解决固定列底部预留的空隙
    ::v-deep .ant-table-fixed-left,
    .ant-table-fixed-right {
        .ant-table-body-outer {
            margin-bottom: 0 !important;
        }
    }
}
</style>
<style scoped>
::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
    padding: 11px 16px;
}

.bg {
    width: 100%;
    height: 100%;
}

.bg:after {
    content: '';
    width: 110%;
    height: 110%;
    position: absolute;
    left: -5%;
    top: -5%;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
    background: rgba(0, 0, 0, 0.8);
}

.top-ul-style {
    width: 100%;
    padding-left: 0;
}

.top-ul-style li {
    height: 100px;
    border: 1px solid #f2f2f2;
    margin-bottom: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.li-cost {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: flex-end;
}

.li-cost span {
    font-size: 16px;
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}
</style>
<template>
    <div class="materialReport">
        <a-spin :spinning="spinning">
            <a-row :gutter="24" style="margin-top: 20px">

                <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>
                        <a-button
                            :loading="resetLoading"
                            type="primary"
                            @click="handleSubmit"
                        >
                            搜索
                        </a-button>
                        <a-button
                            :disabled="spinning"
                            :loading="resetLoading"
                            style="margin-left: 15px"
                            @click="resetSubmit"
                        >
                            重置
                        </a-button>
                    </div>

                </div>

                <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">
                                {{
                                    sumData.charge
                                        ? '￥' + decimalsHandle(sumData.charge, 3)
                                        : '-'
                                }}
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-card class="material-report-card">
                        <span slot="title">
                            ROI
                            <a-tooltip title="今日roi" slot="action">
                                <a-icon type="info-circle-o"/>
                            </a-tooltip>
                        </span>
                        <div class="report-card-result">
                            <div class="report-card-money">
                                {{
                                    sumData.roi
                                }}
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-card class="material-report-card">
                        <span slot="title"> 账户数 </span>
                        <span slot="extra"> </span>
                        <div class="report-card-result">
                            <div class="report-card-money">
                                {{
                                    sumData.accountNum
                                }}
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :sm="24" :md="12" :xl="6">
                    <a-spin :spinning="spinningPopularVideoList">
                        <a-card class="material-report-card">
                            <span slot="title"> 短剧数 </span>
                            <span slot="extra"> </span>
                            <div class="report-card-result">
                                <div class="report-card-money">
                                    {{
                                        sumData.playCount
                                    }}
                                </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-card style="width: 100%" title="分账户">
                    <a-table
                        size="middle"
                        :dataSource="accountList"
                        :columns="accountColumns"
                        :pagination="ipagination"
                        bordered
                        id="outTable"
                        :loading="accountLoading"

                        ref="accountTable"
                        :scroll="{  y: 400 }"
                    >

          <span slot="action" slot-scope="text, record">
             <span class="OptinItem">
                    <a-popconfirm
                        title="确定要关停此账户下所有计划吗？"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="confirm(record)"
                        @cancel="cancel"
                    >
                        <a type='primary' @click="isOkHandle">关停</a>
                    </a-popconfirm>
                 </span>
           <a-divider type="vertical"/>
          <a @click="projectLook(record)">记录</a>
          </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card style="width: 100%" title="分短剧">
                    <a-table
                        size="middle"
                        :dataSource="duanjuList"
                        :columns="duanjuColumns"
                        bordered
                        id="outTable"
                        :pagination="duanjuIpagination"
                        :loading="duanjuLoading"
                        ref="accountTable"
                        :scroll="{ y: 400 }"
                    >
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 20px">
            <a-col :xl="24">
                <a-card style="width: 100%" title="分素材">
                    <div class="option" style="justify-content: space-between">
                        <div class="option" style="padding: 0">
                            <div class="item">
                                <a-input placeholder="请输入素材名称" v-model="videoName"></a-input>
                            </div>

                            <a-button
                                :loading="resetLoading"
                                type="primary"
                                @click="seachVideo"
                            >
                                搜索
                            </a-button>

                            <a-button style="margin-left: 15px" type="primary" @click="exportExcel">导出</a-button>

                            <a-button
                                :disabled="spinning"
                                :loading="resetLoading"
                                style="margin-left: 15px"
                                @click="resetSeachVideo"
                            >
                                重置
                            </a-button>

                        </div>
                    </div>
                    <a-table
                        size="middle"
                        :dataSource="videoList"
                        :columns="videColumns"
                        bordered
                        :loading="videoLoading"
                        :pagination="videoIpagination"
                    >
                        <div slot="cover_url" slot-scope="test,records">
                            <img
                                :src="test"
                                alt
                                style="width:100px;height: 160px"
                                @click="openVideo(records.photo_url)"
                            />
                        </div>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
            <video
                @click.stop
                class="video"
                :src="videoUrl"
                controls="controls"
                style="height:600px;width:100%"
            >您的浏览器不支持 video 标签。
            </video>
        </a-modal>


        <a-modal
            :maskClosable="false"
            title="暂停记录"
            v-model="projectVisible"
            @ok="handleOkProject"
            width="800px"
            class="close-account-my-project"
            :footer="null"
        >
            <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :columns="stopColumns"
                :dataSource="stopList"
            >
            </a-table>
        </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 {downFile, downFilePost, getAction} from "@api/manage"; // 停止除当前外的其他视频播放，及停止所有视频播放的方法
var echarts = require('echarts')
import {JeecgListMixin} from "@/mixins/ipagination";


export default {
    components: {
        YoutTable,
        ChartCard,
        Trend,
    },
    data() {
        return {


            videoName: null,
            stopList: [],
            projectVisible: false,
            //是否打开视频
            Videovisible: false,
            videoUrl: '',
            sumData: {},
            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.getAccountList()
                },
            },







            tabListNoTitle: [
                {
                    key: '2',
                    tab: '快手',
                },
                {
                    key: '1',
                    tab: '头条',
                },
            ],
            noTitleKey: '2',
            active: 'cost',
            groupDisabled: false,
            timeShowEchartsStatus: true,
            signatureStatus: false,
            materialReportCardList: {},
            materialGroupData: {},
            accountIndexList: {},
            popularVideoList: {},
            materialRankValue: 0,
            designRankingValue: 1,
            accountLoading: false,
            noImg: require('@/assets/noImg.png'),
            visibleVideo: false,
            videoUrlShow: '',
            cost: '0',
            spinning: false,
            spinningChart: false,
            spinningChartPie: false,
            loading: false,
            chartList: [],
            accountList: [],
            target: '',
            order: 'descend',
            //    columns: [...columnsFixd, ...ksColumns, ...numColumns, ...aColumns], // table的表头
            dateRanges: {
                今天: [moment(), moment()],
                近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
            },

            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.getViodeoList();
                },
            },



            duanjuIpagination: {
                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.duanjuIpagination.current = current;
                    this.duanjuIpagination.pageSize = pageSize;
                    this.getDuanJuList();
                },
            },


            dateValue: [moment(), moment()],
            videoType: 0,
            labelType: 0,
            dataDimension: 'a',
            mediaDimension: 'b',
            projectId: null,
            dataDimensionValue: null,
            dataDimensionList: [],
            specificLoading: false,
            dataType: 0,
            category: 0,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            spinningPopularVideoList: false,
            duanjuList: [],
            duanjuLoading: false,
            videoList: [],
            videoLoading: false,
            accountColumns: [
                {
                    title: '账户ID',
                    align: "center",
                    dataIndex: 'accountId'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 90,
                    align: 'center',
                    scopedSlots: {
                        customRender: 'action',
                    },
                },

                {
                    title: '账户名称',
                    align: "center",
                    dataIndex: 'accountName'
                },

                {
                    title: '消耗',
                    align: "center",
                    dataIndex: 'charge'
                },

                {
                    title: 'ROI',
                    align: "center",
                    dataIndex: 'roi'
                },

                {
                    title: '付费金额',
                    align: "center",
                    dataIndex: 'event_pay_purchase_amount'
                },

                {
                    title: '曝光',
                    align: "center",
                    dataIndex: 'aclick'
                },

                {
                    title: '点击',
                    align: "center",
                    dataIndex: 'bclick'
                },

                {
                    title: 'ctr',
                    align: "center",
                    dataIndex: 'ctr'
                },

                {
                    title: 'cpc',
                    align: "center",
                    dataIndex: 'cpc'
                },

                {
                    title: 'cpm',
                    align: "center",
                    dataIndex: 'cpm'
                },

                {
                    title: '激活',
                    align: "center",
                    dataIndex: 'activation'
                },

                {
                    title: '激活成本',
                    align: "center",
                    dataIndex: 'active_cost'
                },

                {
                    title: '付费次数',
                    align: "center",
                    dataIndex: 'event_pay'
                },

                {
                    title: '付费成本',
                    align: "center",
                    dataIndex: 'pay_cost'
                },
                {
                    title: '新增付费人数',
                    align: "center",
                    dataIndex: 'event_new_user_pay'
                },
                {
                    title: '新增付费单价',
                    align: "center",
                    dataIndex: 'new_pay_cost'
                }
            ],


            duanjuColumns: [
                {
                    title: '分销商',
                    align: "center",
                    dataIndex: 'agent'
                },


                {
                    title: '剧名',
                    align: "center",
                    dataIndex: 'play_name'
                },

                {
                    title: '消耗',
                    align: "center",
                    dataIndex: 'charge'
                },

                {
                    title: 'ROI',
                    align: "center",
                    dataIndex: 'roi'
                },

                {
                    title: '付费金额',
                    align: "center",
                    dataIndex: 'event_pay_purchase_amount'
                },

                {
                    title: '曝光',
                    align: "center",
                    dataIndex: 'aclick'
                },

                {
                    title: '点击',
                    align: "center",
                    dataIndex: 'bclick'
                },

                {
                    title: 'ctr',
                    align: "center",
                    dataIndex: 'ctr'
                },

                {
                    title: 'cpc',
                    align: "center",
                    dataIndex: 'cpc'
                },

                {
                    title: 'cpm',
                    align: "center",
                    dataIndex: 'cpm'
                },

                {
                    title: '激活',
                    align: "center",
                    dataIndex: 'activation'
                },

                {
                    title: '激活成本',
                    align: "center",
                    dataIndex: 'active_cost'
                },

                {
                    title: '付费次数',
                    align: "center",
                    dataIndex: 'event_pay'
                },

                {
                    title: '付费成本',
                    align: "center",
                    dataIndex: 'pay_cost'
                },
                {
                    title: '新增付费人数',
                    align: "center",
                    dataIndex: 'event_new_user_pay'
                },
                {
                    title: '新增付费单价',
                    align: "center",
                    dataIndex: 'new_pay_cost'
                }
            ],


            videColumns: [
                {
                    title: '视频',
                    dataIndex: 'cover_url',
                    align: 'center',
                    width: 80,
                    height: 100,
                    fixed: 'left',
                    key: 'cover_url',
                    scopedSlots: {customRender: 'cover_url'}
                },

                {
                    title: '视频ID',
                    dataIndex: 'photo_id',
                    align: 'center',
                    width: 150,
                    fixed: 'left'
                },

                {
                    title: '视频名称',
                    dataIndex: 'photo_name',
                    align: 'center',
                    width: 150,
                    fixed: 'left'
                },


                {
                    title: '消耗',
                    align: "center",
                    dataIndex: 'charge'
                },

                {
                    title: 'ROI',
                    align: "center",
                    dataIndex: 'roi'
                },

                {
                    title: '付费金额',
                    align: "center",
                    dataIndex: 'event_pay_purchase_amount'
                },

                {
                    title: '曝光',
                    align: "center",
                    dataIndex: 'aclick'
                },

                {
                    title: '点击',
                    align: "center",
                    dataIndex: 'bclick'
                },

                {
                    title: 'ctr',
                    align: "center",
                    dataIndex: 'ctr'
                },

                {
                    title: 'cpc',
                    align: "center",
                    dataIndex: 'cpc'
                },

                {
                    title: 'cpm',
                    align: "center",
                    dataIndex: 'cpm'
                },

                {
                    title: '激活',
                    align: "center",
                    dataIndex: 'activation'
                },

                {
                    title: '激活成本',
                    align: "center",
                    dataIndex: 'active_cost'
                },

                {
                    title: '付费次数',
                    align: "center",
                    dataIndex: 'event_pay'
                },

                {
                    title: '付费成本',
                    align: "center",
                    dataIndex: 'pay_cost'
                },
                {
                    title: '新增付费人数',
                    align: "center",
                    dataIndex: 'event_new_user_pay'
                },
                {
                    title: '新增付费单价',
                    align: "center",
                    dataIndex: 'new_pay_cost'
                },
                {
                    title: '3s播放率',
                    align: "center",
                    dataIndex: 'play_3s_rate'
                },
                {
                    title: '5s播放率',
                    align: "center",
                    dataIndex: 'play_5s_rate'
                },
                {
                    title: '完播率',
                    align: "center",
                    dataIndex: 'play_end_rate'
                }

            ],


            stopColumns: [
                {
                    title: '账户ID',
                    dataIndex: 'accountId',
                    align: 'center',

                },

                {
                    title: '计划id',
                    dataIndex: 'campaignId',
                    align: 'center',

                },


                {
                    title: '计划名称',
                    align: "center",
                    dataIndex: 'campaignName'
                },

                {
                    title: '执行时间',
                    align: "center",
                    dataIndex: 'createTime'
                },

                {
                    title: '执行结果',
                    align: "center",
                    dataIndex: 'updateMessage'
                }


            ],


        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),


        exportExcel() {
            let fileName = '短剧报表'
            var params = {}
            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.videoName = this.videoName
            downFile('/duanju/report/exportVideoList', params).then((data) => {
                if (!data) {
                    this.$message.warning("文件下载失败")
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data]))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                }
            })
        },

        resetSeachVideo() {
            this.videoIpagination.current = 1;
            this.videoIpagination.pageSize = 10;
            this.videoName = null;
            this.getViodeoList();
        },
        seachVideo() {
            this.videoIpagination.current = 1;
            this.videoIpagination.pageSize = 10;
            this.getViodeoList();
        },

        getData() {
            this.getSumData();
            this.getAccountList();
            this.getDuanJuList();
            this.getViodeoList();

        },

        getSumData() {
            return new Promise((resolve, reject) => {
                var params = {}
                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
                this.getAction('/duanju/report/getTotalCharge', params).then((res) => {
                    if (res.success) {
                        this.sumData = res.result
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },

        getAccountList() {
            this.accountLoading = true;
            return new Promise((resolve, reject) => {
                var params = {}
                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.pageNo = this.ipagination.current, params.pageSize = this.ipagination.pageSize
                    this.getAction('/duanju/report/getAccountList', params).then((res) => {
                        if (res.success) {

                            this.accountList = res.result.list
                            this.ipagination.total = res.result.total;
                            this.accountLoading = false;
                        } else {
                            this.accountLoading = true;
                            reject(res.message)
                        }
                    })
            })
        },

        getDuanJuList() {
            this.duanjuLoading = true;
            return new Promise((resolve, reject) => {
                var params = {}
                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.pageNo = this.duanjuIpagination.current, params.pageSize = this.duanjuIpagination.pageSize,
                this.getAction('/duanju/report/getDuanJuList', params).then((res) => {
                    if (res.success) {
                        this.duanjuList = res.result.list
                        this.duanjuIpagination.total = res.result.total;
                        this.duanjuLoading = false;

                    } else {
                        this.duanjuLoading = false;
                        reject(res.message)
                    }
                })
            })
        },
        getViodeoList() {
            this.videoLoading = true;
            return new Promise((resolve, reject) => {
                var params = {}
                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.videoName = this.videoName
                params.pageNo = this.videoIpagination.current;
                params.pageSize = this.videoIpagination.pageSize;
                this.getAction('/duanju/report/getViodeoList', params).then((res) => {
                    if (res.success) {
                        this.videoLoading = false;
                        this.videoList = res.result.list;
                        this.videoIpagination.total = res.result.total;
                    } else {
                        this.videoLoading = false;
                        reject(res.message)
                    }
                })
            })
        },
        handleOkProject() {
        },
        resetSubmit() {
            this.resetLoading = true;
            this.dateValue = [moment(), moment()],
                this.getData();
            this.resetLoading = false;
        },

        handleSubmit() {
            this.resetLoading = true;
            this.getData();
            this.resetLoading = false;

        },
        confirm(e) {
            console.log(e.accountId);
            return new Promise((resolve, reject) => {
                var params = {}
                params.accountId = e.accountId
                this.getAction('/duanju/report/stopPlan', params).then((res) => {
                    if (res.success) {
                        this.videoList = res.result
                    } else {
                        reject(res.message)
                    }
                })
            })
        },

        projectLook(item) {
            var params = {}
            // params.accountId = item.accountId
            params.accountId = item.accountId
            getAction('/duanju/report/stopList', params).then((res) => {
                if (res.success) {
                    this.projectVisible = true
                    this.stopList = res.result
                }
            })
        },

        cancel(e) {
            // console.log(e);
            // this.$message.error('删除成功');
        },


        isOkHandle() {
            console.log(111111)

        },

        videoOk() {
            this.Videovisible = false
        },
        openVideo(val) {
            this.Videovisible = true
            this.videoUrl = val
        },
        disabledDate(current) {
            return current && current >= moment()
        },
        decimalsHandle(val, num) {
            if (val && typeof val != 'string') {
                if (val >= 0) {
                    val = parseFloat(val).toFixed(num)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')
                    let str0 = str[0].split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }
                    return handleResult + '.' + str[1]
                } else {
                    val = parseFloat(val).toFixed(num)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')
                    let str0 = str[0].substr(1).split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }
                    return '-' + handleResult + '.' + str[1]
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getData()
        })
    },
    activated() {
        this.$nextTick(() => {
            this.clientWidth = document.documentElement.clientWidth - 224
        })
    },
}
</script>
<style lang="less" scoped>
.materialReport {
    .material-report-card-two {
        width: 25%;

        ::v-deep * {
            border: 0;
        }
    }

    .material-report-card {
        // height: 220px;
        ::v-deep .ant-card-head {
            border: none;
        }

        ::v-deep .ant-card-body {
            padding-top: 5px;
        }

        .report-card-result {
            height: 88px;
        }

        .report-card-money {
            font-size: 30px;
            font-weight: bold;
        }

        .report-card-msg {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-top: 20px;
        }

        .report-card-line {
            width: 100%;
            height: 1px;
            margin-top: 20px;
            background: #e8e8e8;
        }

        .report-card-radio {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 14px;
        }
    }

    .option {
        background: white;
        padding: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .item {
            margin-right: 15px;
            margin-bottom: 15px;
            height: 32px;
            line-height: 32px;
            flex-shrink: 0;

            span {
                margin-right: 10px;
            }
        }
    }

    .echart {
        margin-top: 20px;
        padding: 0 20px 20px;
        background: white;

        .echart-header {
            padding: 20px 0;
            font-size: 15px;
            font-weight: 600;
        }
    }

    .tableBody {
        margin-top: 20px;
    }
}
</style>
<style>
.materialReport .card-containers {
    overflow: hidden !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
    margin-top: -16px !important;
}

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

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

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

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