<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-row :gutter="24">
            <a-col :xl="24">
                <div class="option" style="justify-content: space-between">
                    <div class="option" style="padding: 0">
                        <div class="item">
                            <span>日期选择</span>
                            <a-range-picker
                                v-model="dateValue"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                style="width: 250px"
                            />
                        </div>
                        <div class="item">
                            <span>媒体维度</span>
                            <a-radio-group v-model="mediaDimension" @change="getProjectList">
                                <a-radio-button value="b">快手</a-radio-button>
                                <a-radio-button value="a" disabled>头条</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div class="item">
                            <span>选择账户</span>
                            <a-select
                                v-model="dataDimensionValue"
                                style="width: 300px; margin-left: 10px"
                                :mode="'default'"
                                :maxTagCount="2"
                                :loading="specificLoading"
                                :filterOption="filterOption"
                                showSearch
                                allowClear
                            >
                                <a-select-option
                                    v-for="(item, index) in dataDimensionList"
                                    :key="index + 1"
                                    :value="item.accountId"
                                >
                                    {{ item.authName }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <!-- <div class="item">
                            <span>类型</span>
                            <a-select
                                v-model="dataType"
                                style="width: 300px; margin-left: 10px"
                                :mode="'default'"
                                allowClear
                            >
                                <a-select-option :value="0"> 消耗 </a-select-option>
                                <a-select-option :value="1"> 在投客户数-项目 </a-select-option>
                                <a-select-option :value="2"> 在投客户数-广告主主体 </a-select-option>
                                <a-select-option :value="3"> 基建数 </a-select-option>
                            </a-select>
                        </div> -->
                    </div>
                    <div class="item" style="float: right">
                        <a-button
                            :loading="resetLoading"
                            :disabled="dateValue.length == 0 || (dataDimension == 'b' && !dataDimensionValue)"
                            type="primary"
                            @click="handleSubmit"
                        >
                            搜索
                        </a-button>
                        <a-button
                            :disabled="spinning"
                            :loading="resetLoading"
                            style="margin-left: 15px"
                            @click="resetSubmit"
                        >
                            重置
                        </a-button>
                    </div>
                </div>
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="24">
                <a-card style="width: 100%" title="广告组信息">
                    <div slot="extra">
                        <a @click="customColumns">自定义列</a>
                    </div>
                    <a-table
                        size="middle"
                        :dataSource="designTopList"
                        :columns="columns"
                        bordered
                        id="outTable"
                        :pagination="false"
                        :loading="designTopLoading"
                        ref="accountTable"
                        @change="sort"
                        :scroll="{ x: scrollX }"
                    >
                        <a slot="unitName" slot-scope="text, records" @click="showEcharts(records)">
                            {{ text }}
                        </a>

                        <span slot="rio" slot-scope="text, records">
                            {{ text }}
                            <a-icon v-if="text && parseFloat(text) > 0" type="caret-up" style="color: #f00" />
                            <a-icon v-else type="caret-down" style="color: green" />
                        </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
            <a-col :xl="24">
                <a-spin :spinning="searchLoading">
                    <a-card style="width: 100%" title="操作行为对应趋势图">
                        <!-- <a-tabs v-model="active" @change="callback">
                            <a-tab-pane key="cost" tab="消耗"> </a-tab-pane>
                            <a-tab-pane key="active" tab="激活数"> </a-tab-pane>
                            <a-tab-pane key="aclick" tab="曝光数"> </a-tab-pane>
                        </a-tabs> -->
                        <a-select
                            v-model="operationTarget"
                            style="width: 300px; margin-left: 10px"
                            :mode="'default'"
                            :maxTagCount="2"
                            :loading="specificLoading"
                            :filterOption="filterOption"
                            showSearch
                            @change="changeChart"
                        >
                            <a-select-option value="charge"> 消耗 </a-select-option>
                            <a-select-option value="activation"> 激活数 </a-select-option>
                            <a-select-option value="activeCost"> 激活成本 </a-select-option>
                            <a-select-option value="eventRegister"> 注册数 </a-select-option>
                            <a-select-option value="eventRegisterCost"> 注册成本 </a-select-option>
                            <a-select-option value="eventNextDayStay"> 次留数 </a-select-option>
                            <a-select-option value="eventNextDayStayCost"> 次留成本 </a-select-option>
                            <a-select-option value="eventPayIfrstDay"> 付费数 </a-select-option>
                            <a-select-option value="eventPayIfrstDayCost"> 付费成本 </a-select-option>
                            <a-select-option value="formCount"> 表单提交 </a-select-option>
                        </a-select>
                        <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>
        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />
    </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 Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
var echarts = require('echarts')
const columnsFixd = [
    {
        title: '广告组名称',
        dataIndex: 'unitName',
        align: 'center',
        scopedSlots: { customRender: 'unitName' },
    },
    {
        title: '封面曝光数',
        dataIndex: 'photoShow',
        align: 'center',
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        align: 'center',
        scopedSlots: { customRender: 'photoClick' },
    },
    {
        title: '消耗',
        dataIndex: 'cost',
        align: 'center',
    },
]
const ksColumns = []

export default {
    components: {
        YoutTable,
        ChartCard,
        Trend,
        Treeselect,
        customColumn,
    },
    data() {
        return {
            visible: false, //自定义页面的打开
            listNum: [],
            spinningMaterialGroupData: false,
            scrollX: 0,
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.getTableMediaList()
                },
            },
            tabListNoTitle: [
                {
                    key: '2',
                    tab: '快手',
                },
                {
                    key: '1',
                    tab: '头条',
                },
            ],
            noTitleKey: '2',
            active: 'cost',
            groupDisabled: false,
            timeShowEchartsStatus: true,
            signatureStatus: false,
            materialGroupData: {},
            accountIndexList: {},
            popularVideoList: {},
            materialRankValue: 0,
            designRankingValue: 1,
            designTopLoading: false,
            noImg: require('@/assets/noImg.png'),
            visibleVideo: false,
            videoUrlShow: '',
            cost: '0',
            spinning: false,
            spinningChart: false,
            spinningChartPie: false,
            loading: false,
            chartList: [],
            videoList: [],
            designTopList: [],
            target: '',
            order: 'descend',
            columns: [...columnsFixd, ...ksColumns], // table的表头
            columnsFixd,
            dateRanges: {
                今天: [moment(), moment()],
                近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                // 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                // 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                // 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                // 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
            },
            dateValue: [moment(), moment()],
            videoType: 0,
            labelType: 0,
            dataDimension: 'a',
            mediaDimension: 'b',
            projectId: null,
            dataDimensionValue: null,
            operationTarget: 'charge',
            dataDimensionList: [],
            specificLoading: false,
            dataType: 0,
            accountIdKuaishou: undefined,
            accountIdToutiao: undefined,
            category: 0,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            spinningPopularVideoList: false,
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),

        closeCustomColumn() {
            this.visible = false
        },
        //自定义之后修改父元素表头
        changeColumn(val) {
            console.log(val)
            this.columns = [...val]
            if (this.columns.length > this.columnsFixd.length && this.columns.length <= this.columnsFixd.length) {
                this.columns.forEach((element, index) => {
                    if (index < this.columns.length - 1) {
                        element.width = 'auto'
                        element.fixed = false
                    }
                })

                // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
            } else if (this.columns.length > this.columnsFixd.length) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 200
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 200 * (this.columns.length - this.columnsFixd.length)
            } else {
                this.scrollX = 0
                this.columns.forEach((element) => {
                    element.width = 'auto'
                    element.fixed = false
                })
            }
            let arr = JSON.stringify(this.columns)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 2001,
            }).then((res) => {
                // console.log(res)
            })
        },

        initAccountIndexEchart(data) {
            let xData = data.videoList.length && data.videoList.map((item) => item.time)
            let yData = data.videoList.length && data.videoList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '上新数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#9907f5a6',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#9907f5a6',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#9907f5a6', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        handleEffectiveVideoEcharts(data) {
            let xData = data.effectiveList.length && data.effectiveList.map((item) => item.time)
            let yData = data.effectiveList.length && data.effectiveList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '有效数',
                        data: yData,
                        type: 'bar',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#2461F1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        handlePopularVideoEcharts(data) {
            let xData = data.hotList.length && data.hotList.map((item) => item.time)
            let yData = data.hotList.length && data.hotList.map((item) => item.count)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0,
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                    axisPointer: {
                        type: 'none',
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        name: '爆款数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3,
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#2461F1', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'white', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            return option
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },

        getData() {
            this.spinning = true
            this.spinningChart = true
            this.active = 'cost'
            this.getProjectList()

            Promise.all([this.getChartMediaList()])
                .then((res) => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                    this.spinningChart = false
                })
                .catch((error) => {
                    this.spinning = false
                    this.resetLoading = false
                    this.searchLoading = false
                    // this.$error({
                    // 	title: '页面数据加载出错',
                    // 	content: '请刷新重试或联系管理员查询'
                    // });
                })
        },
        showTitle(type) {
            var dataJson = {
                1: '账户',
                2: '计划',
                3: '广告组',
                4: '创意',
                5: '视频',
                6: '应用',
                7: '人群包',
                8: '',
                9: '审核',
            }
            return dataJson[type]
        },
        showEcharts(item) {
            this.getChartMediaList(item)
        },
        getChartMediaList(item) {
            this.searchLoading = true
            var params = {}
            params.unitId = item.unitId
            params.advertiserId = this.dataDimensionValue
            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            // this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            // this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null

            this.getAction(
                process.env.VUE_APP_BASE_STARE_URL +
                    '/kuaiShouOpreate/kuaiShouOperationRecordController/getKuaishouOperationRecordByUnit',
                params
            ).then((res) => {
                this.searchLoading = false
                if (res.success) {
                    let defaultList = res.result
                    this.materialReportCardList = res.result
                    this.chartList = res.result
                    this.initEchart('echart', this.handlerEchartOption(res.result))
                } else {
                }
            })
        },
        changeChart() {
            if (this.chartList.length > 0) {
                this.initEchart('echart', this.handlerEchartOption(this.chartList))
            } else {
                var html =
                    '<div class="ant-empty"><div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd"><g transform="translate(24 31.67)"><ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path></g></g></svg></div><p class="ant-empty-description">暂无数据</p></div>'
                document.getElementById('echart').innerHTML = html
                document.getElementById('echart').removeAttribute('_echarts_instance_')
            }
        },
        dateDiff(sDate1, sDate2) {
            let aDate = sDate1.split('-')
            let oDate1 = new Date(aDate[0], aDate[1], aDate[2]) // 转换为12-18-2006格式
            aDate = sDate2.split('-')
            let oDate2 = new Date(aDate[0], aDate[1], aDate[2])
            let iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数
            return iDays
        },
        getTableMediaList(data) {
            var dataMount = this.dateDiff(
                moment(this.dateValue[0]).format('YYYY-MM-DD'),
                moment(this.dateValue[1]).format('YYYY-MM-DD')
            )
            if (dataMount >= 7) {
                this.$message.error('时间范围最多选择7天')
                this.resetLoading = false
                return
            }
            this.designTopLoading = true
            var params = {}
            params.advertiserId = this.dataDimensionValue
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
            params.userId = this.userInfo().id

            this.getAction(
                process.env.VUE_APP_BASE_STARE_URL +
                    '/kuaiShouOpreate/kuaiShouOperationRecordController/getKuaishouUnitChargeTopTenByAccountId',
                params
            ).then((res) => {
                this.resetLoading = false
                if (res.success) {
                    this.designTopLoading = false
                    this.designTopList = res.result || []
                    // this.ipagination.total = res.result.total || 0
                } else {
                    this.designTopLoading = false
                }
            })
        },

        getProjectList() {
            this.specificLoading = true
            this.dataDimensionList = []
            this.dataDimensionValue = null
            return new Promise((resolve, reject) => {
                this.getAction(
                    process.env.VUE_APP_BASE_STARE_URL +
                        '/kuaiShouOpreate/kuaiShouOperationRecordController/getAllSubordinateAccountByUserId?mediaId=' +
                        (this.mediaDimension == 'a' ? 1 : 2) +
                        '&userId=' +
                        this.userInfo().id
                ).then((res) => {
                    this.specificLoading = false
                    if (res.success) {
                        this.dataDimensionList = res.result
                        // 找到重复的数据
                        // const changeData = res.result.map(item => item.projectId);
                        // let rep = [];
                        // changeData.forEach((item,index)=>{
                        // 	if(changeData.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
                        // 		let obj = {};
                        // 		obj.key = (changeData.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标
                        // 		obj.value = item;
                        // 		rep.push(obj);
                        // 	}
                        // });
                        // console.log(rep, 'newArr--newArr');
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        sort(pagination, filters, sorter, { currentDataSource }) {
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize

            // if (sorter.order) {
            //     this.order = sorter.order ? sorter.order : 'descend'
            //     this.target = sorter.columnKey
            //     this.getTableMediaList({
            //         target: sorter.columnKey,
            //         order: sorter.order ? sorter.order : 'descend',
            //     })
            // }
        },

        callback() {
            this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active))
        },

        handleSubmit() {
            this.cancel()
            this.resetLoading = true

            this.ipagination.current = 1
            // this.getData()
            if (!!this.dataDimensionValue) {
                this.getTableMediaList()
            } else {
                this.$message.error('请选择账户')
                this.resetLoading = false
            }
        },
        resetSubmit() {
            this.resetLoading = true
            this.dateValue = [moment(), moment()]
            this.dataDimension = 'a'
            this.mediaDimension = 'b'
            this.dataDimensionValue = null
            this.ipagination.current = 1
            this.dataType = 0
            this.handleSubmit()
        },
        //获取echart的值
        initEchart(idName, optionName) {
            let that = this
            const chart = this.$refs[idName]
            if (chart) {
                echarts.init(document.getElementById(idName)).dispose()
                const myChart = echarts.init(document.getElementById(idName))
                myChart.setOption(optionName)
                window.addEventListener('resize', function () {
                    that.clientWidth = document.documentElement.clientWidth - 224
                    myChart.resize()
                })
            }
        },
        handlerEchartOption(todayList, yesterdayList, timeData, lengthData) {
            var that = this
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var data,
                            str = ''
                        data = todayList.find((item) => {
                            return item.statDate + ' ' + item.statHour == params[0].axisValueLabel
                        })

                        if (!!data && !!data.operationList && data.operationList.length > 0) {
                            for (let i = 0; i < data.operationList.length; i++) {
                                if (data.operationList[i].content_log.length > 0) {
                                    str += `${data.operationList[i].content_log[0].field_name}${
                                        data.operationList[i].operation_type == 1 ? '新增' : '修改'
                                    }前:${data.operationList[i].content_log[0].original_data}<br/>
                                        ${data.operationList[i].content_log[0].field_name}${
                                        data.operationList[i].operation_type == 1 ? '新增' : '修改'
                                    }后:${data.operationList[i].content_log[0].update_data}
                                        <br/>
                                        `
                                } else {
                                    str = '操作: 未知操作'
                                }
                            }
                            return `${params[0].marker}${params[0].name}: ${params[0].value}<br/>
                            ${str}`
                        } else {
                            return `${params[0].marker}${params[0].name}: ${params[0].value}<br/>
                            操作: 无操作`
                        }
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        id: 0,
                        type: 'category',
                        boundaryGap: false,
                        data: todayList.map((item) => {
                            return item.statDate + ' ' + item.statHour
                        }),

                        position: 'bottom',
                    },
                ],

                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '今天',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        xAxisIndex: 0,
                        data: todayList.map((item) => {
                            if (!!item[this.operationTarget]) {
                                return item[this.operationTarget]
                            } else {
                                return 0
                            }
                        }),

                        lineStyle: {
                            color: '#00BFFF',
                            width: 2,
                        },
                        itemStyle: {
                            color: '#00BFFF',
                            borderWidth: 2,
                            borderColor: '#00BFFF',
                        },
                        id: 0,
                    },
                ],
            }
            return option
        },

        disabledDate(current) {
            return current && current >= moment()
        },
        //弹出框打开，自定义列
        customColumns() {
            this.visible = true
            this.listNum = [...this.columns]
            console.log(this.listNum, 'this.listNum-this.listNum')
        },
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getProjectList()
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: 2001,
            }).then((res) => {
                // console.log(res)
                if (res.success) {
                    // console.log(JSON.parse(res.result))
                    if (!!res.result) {
                        let columns = JSON.parse(res.result)
                        if (columns.length) {
                            if (columns.length >= columnsFixd.length) {
                                columns.map((item, index) => {
                                    if (index > columnsFixd.length - 1) {
                                        item.sorter = function (a, b) {}
                                    }
                                })
                                columns = columns.slice(columnsFixd.length)
                                this.columns = [...columnsFixd, ...columns]
                            }

                            this.changeColumn(this.columns)
                        }
                    } else {
                        this.changeColumn(this.columns)
                    }
                }
            })
        })
    },
    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>
