<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-radio-group v-model="mediaDimension" @change="getProjectList">
                                <a-radio-button value="b">快手</a-radio-button>
                                <a-radio-button value="a">头条</a-radio-button>
                            </a-radio-group>
                        </div>
                        <div class="item">
                            <span>人员</span>
                            <a-select
                                v-model="person"
                                style="width: 150px; 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.userId"
                                >
                                    {{ item.userName }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div class="item">
                            <span>岗位</span>
                            <a-select
                                v-model="post"
                                style="width: 150px; margin-left: 10px"
                                :mode="'default'"
                                allowClear
                            >
                                <a-select-option value="operationAssistant"> 运营助理 </a-select-option>
                                <a-select-option value="manager"> 运营经理 </a-select-option>
                                <a-select-option value="operator"> 运营专员 </a-select-option>
                            </a-select>
                        </div>
                        <div class="item">
                            <span>季度</span>
                            <a-select v-model="quarter" style="width: 150px; margin-left: 10px" :mode="'default'">
                                <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-option :value="4"> 第四季度 </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" 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="运营数据">
                    <!-- :columns="columns" -->
                    <a-button
                        type="primary"
                        class="export"
                        @click="exportExcel"
                        :loading="exportLoading"
                        style="margin-bottom: 15px"
                        >导出报表</a-button
                    >
                    <a-table
                        size="middle"
                        :dataSource="designTopList"
                        bordered
                        id="outTable"
                        :pagination="ipagination"
                        :loading="designTopLoading"
                        ref="accountTable"
                        @change="sort"
                        :scroll="{ x: scrollX }"
                    >
                        <a-table-column title="运营" data-index="userName" :width="120" align="center">
                        </a-table-column>
                        <a-table-column title="岗位" data-index="roleName" :width="120" align="center">
                        </a-table-column>
                        <a-table-column title="晋升时间" data-index="upTime" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ !!t ? t : '-' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column :title="onetotalCharge" data-index="1totalCharge" align="center">
                        </a-table-column>
                        <a-table-column :title="twototalCharge" data-index="2totalCharge" align="center">
                        </a-table-column>
                        <a-table-column :title="threetotalCharge" data-index="3totalCharge" align="center">
                        </a-table-column>
                        <a-table-column :title="oneKFCharge" data-index="1KFCharge" align="center" v-if="showKf">
                        </a-table-column>
                        <a-table-column :title="twoKFCharge" data-index="2KFCharge" align="center" v-if="showKf">
                        </a-table-column>
                        <a-table-column :title="threeKFCharge" data-index="3KFCharge" align="center" v-if="showKf">
                        </a-table-column>
                        <a-table-column :title="oneFWCharge" data-index="1FWCharge" align="center"> </a-table-column>
                        <a-table-column :title="twoFWCharge" data-index="2FWCharge" align="center"> </a-table-column>
                        <a-table-column :title="threeFWCharge" data-index="3FWCharge" align="center"> </a-table-column>
                        <a-table-column :title="oneJLCharge" data-index="1JLCharge" align="center"> </a-table-column>
                        <a-table-column :title="twoJLCharge" data-index="2JLCharge" align="center"> </a-table-column>
                        <a-table-column :title="threeJLCharge" data-index="3JLCharge" align="center"> </a-table-column>

                        <a-table-column title="离职时间" data-index="quitTime" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ !!t ? t : '-' }}</span>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
    </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 { downFile } from '@/api/manage'
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,
    },
    data() {
        return {
            exportLoading: false,
            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',
            showKf: true,
            projectId: null,
            dataDimensionValue: null,
            quarter: null,
            person: null,
            post: null,
            operationTarget: 'charge',
            dataDimensionList: [],
            specificLoading: false,
            dataType: 0,
            accountIdKuaishou: undefined,
            accountIdToutiao: undefined,
            category: 0,
            clientWidth: 0,
            resetLoading: false,
            searchLoading: false,
            spinningPopularVideoList: false,
            oneFWCharge: '',
            oneJLCharge: '',
            oneKFCharge: '',
            onetotalCharge: '',
            twoFWCharge: '',
            twoJLCharge: '',
            twoKFCharge: '',
            twototalCharge: '',
            threeFWCharge: '',
            threeJLCharge: '',
            threeKFCharge: '',
            threetotalCharge: '',
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
    },
    methods: {
        ...mapGetters(['userInfo']),
        //导出报表
        exportExcel() {
            this.exportLoading = true
            var params = {}
            params.time = this.quarter
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.role = this.post
            params.userId = this.person
            downFile('/kuaishou/operationReport/queryMonthlyDataExcel', params).then((res) => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '绩效数据.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
                this.exportLoading = false
            })
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        getQuarter() {
            var today = new Date()
            var month = today.getMonth() + 1
            if (month >= 1 && month <= 3) {
                this.quarter = 1
            } else if (month >= 4 && month <= 6) {
                this.quarter = 2
            } else if (month >= 7 && month <= 9) {
                this.quarter = 3
            } else {
                this.quarter = 4
            }
        },
        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: '请刷新重试或联系管理员查询'
                    // });
                })
        },
        getTableMediaList(data) {
            this.designTopLoading = true
            var params = {}
            params.time = this.quarter
            params.mediaId = this.mediaDimension === 'a' ? 1 : 2
            params.role = this.post
            params.userId = this.person
            params.pageSize = this.ipagination.pageSize
            params.pageNo = this.ipagination.current

            if (this.mediaDimension === 'a') {
                this.showKf = false
            } else {
                this.showKf = true
            }
            if (this.quarter == 1) {
                this.oneFWCharge = '1月服务消耗'
                this.oneJLCharge = '1月激励消耗'
                this.oneKFCharge = '1月框返消耗'
                this.onetotalCharge = '1月总消耗'

                this.twoFWCharge = '2月服务消耗'
                this.twoJLCharge = '2月激励消耗'
                this.twoKFCharge = '2月框返消耗'
                this.twototalCharge = '2月总消耗'

                this.threeFWCharge = '3月服务消耗'
                this.threeJLCharge = '3月激励消耗'
                this.threeKFCharge = '3月框返消耗'
                this.threetotalCharge = '3月总消耗'
            } else if (this.quarter == 2) {
                this.oneFWCharge = '4月服务消耗'
                this.oneJLCharge = '4月激励消耗'
                this.oneKFCharge = '4月框返消耗'
                this.onetotalCharge = '4月总消耗'

                this.twoFWCharge = '5月服务消耗'
                this.twoJLCharge = '5月激励消耗'
                this.twoKFCharge = '5月框返消耗'
                this.twototalCharge = '5月总消耗'

                this.threeFWCharge = '6月服务消耗'
                this.threeJLCharge = '6月激励消耗'
                this.threeKFCharge = '6月框返消耗'
                this.threetotalCharge = '6月总消耗'
            } else if (this.quarter == 3) {
                this.oneFWCharge = '7月服务消耗'
                this.oneJLCharge = '7月激励消耗'
                this.oneKFCharge = '7月框返消耗'
                this.onetotalCharge = '7月总消耗'

                this.twoFWCharge = '8月服务消耗'
                this.twoJLCharge = '8月激励消耗'
                this.twoKFCharge = '8月框返消耗'
                this.twototalCharge = '8月总消耗'

                this.threeFWCharge = '9月服务消耗'
                this.threeJLCharge = '9月激励消耗'
                this.threeKFCharge = '9月框返消耗'
                this.threetotalCharge = '9月总消耗'
            } else {
                this.oneFWCharge = '10月服务消耗'
                this.oneJLCharge = '10月激励消耗'
                this.oneKFCharge = '10月框返消耗'
                this.onetotalCharge = '10月总消耗'

                this.twoFWCharge = '11月服务消耗'
                this.twoJLCharge = '11月激励消耗'
                this.twoKFCharge = '11月框返消耗'
                this.twototalCharge = '11月总消耗'

                this.threeFWCharge = '12月服务消耗'
                this.threeJLCharge = '12月激励消耗'
                this.threeKFCharge = '12月框返消耗'
                this.threetotalCharge = '12月总消耗'
            }

            this.getAction('/kuaishou/operationReport/queryMonthlyData', params).then((res) => {
                this.resetLoading = false
                if (res.success) {
                    this.designTopLoading = false
                    this.designTopList = res.result.list || []
                    this.ipagination.total = res.result.total || 0
                } else {
                    this.designTopLoading = false
                    this.designTopList = []
                    this.$message.error(res.message)
                }
            })
        },

        getProjectList() {
            this.specificLoading = true
            this.dataDimensionList = []
            this.dataDimensionValue = null
            this.person = null
            this.post = null
            return new Promise((resolve, reject) => {
                this.getAction(
                    '/kuaishou/operationReport/getAllOperatorList?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
                ).then((res) => {
                    this.specificLoading = false
                    if (res.success) {
                        this.dataDimensionList = res.result
                        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',
            //     })
            // }
        },

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

            this.ipagination.current = 1
            // this.getData()

            this.getTableMediaList()
        },
        resetSubmit() {
            this.getQuarter()
            this.mediaDimension = 'b'
            this.dataDimensionValue = null
            this.post = null
            this.person = null
            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()
                })
            }
        },

        disabledDate(current) {
            return current && current >= moment()
        },
    },
    mounted() {
        this.clientWidth = document.documentElement.clientWidth - 224
        this.$nextTick(() => {
            this.getProjectList()
            this.getQuarter()
            setTimeout(() => {
                this.getTableMediaList()
            })
        })
    },
    activated() {
        this.$nextTick(() => {
            this.clientWidth = document.documentElement.clientWidth - 224
        })
    },
}
</script>
<style lang="less" scoped>
.materialReport {
    .material-report-card-two {
        width: 25%;
        z ::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>
