<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-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="planeLeader"> 平面组长 </a-select-option>
                                <a-select-option value="designTeamLeader"> 设计组长 </a-select-option>
                                <a-select-option value="production"> 制片 </a-select-option>
                                <a-select-option value="plane"> 平面 </a-select-option>
                                <a-select-option value="plan"> 策划 </a-select-option>
                                <a-select-option value="shot"> 拍摄 </a-select-option>
                                <a-select-option value="clip"> 剪辑 </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="设计数据">
                     <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"
                        :scroll="{ x: scrollX }"
                    >
                        <a-table-column title="姓名" data-index="userName" :width="120" align="center" fixed="left">
                        </a-table-column>
                        <a-table-column title="岗位" data-index="roleName" :width="120" align="center" fixed="left">
                        </a-table-column>
                        <a-table-column title="状态" data-index="status" :width="120" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ t == 1 ? '正常' : '冻结' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="组别" data-index="departName" :width="120" align="center">
                        </a-table-column>
                        <a-table-column title="头条素材消耗" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.quarterCostList.length > 0
                                            ? t.userFrozen.quarterCostList[0].cost
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="快手素材消耗" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.quarterCostList.length >= 0
                                            ? t.userFrozen.quarterCostList[1].cost
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="素材总消耗" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.tatolQuarterCost >= 0
                                            ? t.userFrozen.tatolQuarterCost
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="管理消耗" align="center">
                            <template slot-scope="t, r, i">
                                <span> {{ !!t.userFrozen.leaderCost ? t.userFrozen.leaderCost : '-' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="是否达标" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        !!t.userFrozen.materialCostQualifiedFlag
                                            ? t.userFrozen.materialCostQualifiedFlag
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="爆款素材数量" align="center">
                            <template slot-scope="t, r, i">
                                <span> {{ t.userFrozen.hotVideoNum >= 0 ? t.userFrozen.hotVideoNum : '-' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="开屏爆款数量" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{ t.userFrozen.openHotVideoNum >= 0 ? t.userFrozen.openHotVideoNum : '-' }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="爆款总量" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{ t.userFrozen.hotVideoTotalNum >= 0 ? t.userFrozen.hotVideoTotalNum : '-' }}</span
                                >
                            </template>
                        </a-table-column>

                        <a-table-column title="爆款达标" align="center">
                            <template slot-scope="t, r, i">
                                <span> {{ t.userFrozen.coefficient >= 0 ? t.userFrozen.coefficient : '-' }}</span>
                            </template>
                        </a-table-column>

                        <a-table-column :title="oneFWCharge" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.commissionList.length > 0
                                            ? t.userFrozen.commissionList[0].commission
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column :title="oneJLCharge" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.commissionList.length > 0
                                            ? t.userFrozen.commissionList[1].commission
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column :title="oneKFCharge" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.commissionList.length > 0
                                            ? t.userFrozen.commissionList[2].commission
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>

                        <a-table-column title="季度提成汇总" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.totalCommission >= 0
                                            ? t.userFrozen.totalCommission
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="负责人提成" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.designerLeaderCommission >= 0
                                            ? t.userFrozen.designerLeaderCommission
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="提成发放金额" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.userHappyGetMoney >= 0
                                            ? t.userFrozen.userHappyGetMoney
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>

                        <!-- <a-table-column title="离职发放比例" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        !!t.userFrozen.userHappyGetMoney ? t.userFrozen.userHappyGetMoney : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column> -->

                        <a-table-column title="备注" align="center">
                            <template slot-scope="t, r, i">
                                <span> {{ !!t.userFrozen.remarks ? t.userFrozen.remarks : '-' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="是否发放" align="center">
                            <template slot-scope="t, r, i">
                                <span> {{ t.userFrozen.paySalary == 0 ? '否' : '是' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="最终发放金额" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.paySalary == 0
                                            ? 0
                                            : t.userFrozen.userHappyGetMoney >= 0
                                            ? t.userFrozen.userHappyGetMoney
                                            : 0
                                    }}</span
                                >
                            </template>
                        </a-table-column>
                        <a-table-column title="离职发放比例" align="center">
                            <template slot-scope="t, r, i">
                                <span>
                                    {{
                                        t.userFrozen.userHappyProbability >= 0 && t.status == 2
                                            ? t.userFrozen.userHappyProbability
                                            : '-'
                                    }}</span
                                >
                            </template>
                        </a-table-column>

                        <a-table-column title="操作" data-index="action" align="center">
                            <template slot-scope="t, r, i">
                                <a @click="editPuyData(r)">修改</a>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
        <a-modal
            v-if="editPuy"
            title="修改发放系数和是否符合发放"
            :visible="editPuy"
            @cancel="editPuy = false"
            :width="1000"
            @ok="handleSubmitEdit"
            :confirm-loading="confirmLoading"
        >
            <!-- @submit="handleQueryList" -->
            <a-form
                :form="formEdit"
                :selfUpdate="true"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 19 }"
                v-if="editPuy && !!editData"
            >
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="人员">
                            {{ editData.userName }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="是否发放">
                            <a-radio-group
                                v-decorator="[
                                    'paySalary',
                                    {
                                        rules: [{ required: true, message: '请选择项目!' }],
                                        initialValue: editData.userFrozen.paySalary,
                                    },
                                ]"
                                @change="getAccountList"
                            >
                                <a-radio-button value="1">是</a-radio-button>
                                <a-radio-button value="0">否</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="开屏爆款数量">
                            <a-input-number
                                v-decorator="[
                                    'openScreenNum',
                                    {
                                        rules: [{ required: true, message: '开屏爆款数量必填!' }],
                                        initialValue: editData.userFrozen.openHotVideoNum,
                                    },
                                ]"
                                :min="0"
                                :step="0"
                                style="width: 250px"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="备注">
                            <a-textarea
                                v-decorator="[
                                    'remarks',
                                    {
                                        initialValue: editData.userFrozen.remarks,
                                    },
                                ]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </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 Treeselect from '@riophae/vue-treeselect' // 引用树组件
import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
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 {
            editPuy: false,
            editData: null,
            confirmLoading: false,
            formEdit: this.$form.createForm(this),

            accountId: undefined,
            addCompensationVisible: false,
            form: this.$form.createForm(this),

            compensationLoading: false,
            compensationList: [],
            compensationVisible: false,

            saleLoading: false,
            saleVisible: false, //运营管理
            saleInfoList: [], // 运营关系列表
            allOperatorList: [],
            saleInfoColumns: [
                {
                    title: '运营/运营经理',
                    dataIndex: 'operateName',
                    align: 'center',
                    key: 'saleName',
                    scopedSlots: { customRender: 'operateName' },
                },
                {
                    title: '运营助理',
                    dataIndex: 'assistantName',
                    align: 'center',
                    scopedSlots: { customRender: 'assistantName' },
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    align: 'center',
                    scopedSlots: { customRender: 'time' },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            visible: false, //自定义页面的打开
            listNum: [],
            spinningMaterialGroupData: false,
            scrollX: 2500,
            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: '',
            options: [],
            personList: [],
            userId: undefined,
            exportLoading:false,
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                stopOtherVideo()
                closeAllVideoFun()
            }
        },
        accountId(n, o) {
            if (!!n) {
                this.getAction('kuaishou/operationReport/getAccountUser?accountId=' + n).then((res) => {
                    if (res.success) {
                        this.userId = res.result.user_id
                    }
                })
            } else {
            }
        },
    },
    methods: {
        moment,
        exportExcel() {
            this.exportLoading = true
            var params = {}
            params.yearTime = 2022
            params.monthTime = this.quarter
            params.role = this.post
            params.userId = !!this.person ? this.person : this.userInfo().id
            downFile('/designer/designerAchievementsController/getDesignerBasicsAndAchAndComInfoExcel', 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
                }
            )
        },
        editPuyData(item) {
            console.log(item)
            this.editData = item
            this.editPuy = true
        },
        handleSubmitEdit() {
            this.formEdit.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    let params = {}
                    params.userId = this.editData.userId
                    params.remarks = values.remarks
                    params.paySalary = values.paySalary
                    params.openScreenNum = values.openScreenNum
                    this.postDataAction(
                        '/designer/designerAchievementsController/updateUserHappyProbability',
                        params
                    ).then((res) => {
                        this.confirmLoading = false
                        if (res.success) {
                            this.editPuy = false
                            this.editData = null
                            this.$message.success('修改成功')
                            this.getTableMediaList()
                        } else {
                            this.$message.error('修改失败')
                        }
                    })
                }
            })
        },

        getPersonByAccountId(value) {
            this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=' + value).then((res) => {
                if (res.success) {
                    this.personList = res.result
                }
            })
        },
        handleSubmitAdd() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    if (!!this.accountId) {
                        let params = {}
                        params.userId = this.userId
                        params.startDate = moment(values.statDate[0]).format('YYYY-MM-DD')
                        params.endDate = moment(values.statDate[1]).format('YYYY-MM-DD')
                        params.accountId = this.accountId
                        params.compMoney = values.compMoney
                        params.mediaId = values.mediaId
                        this.postDataAction('/kuaishou/operationReport/addAccountCompensation', params).then((res) => {
                            console.log(res)
                            if (res.success) {
                                this.addCompensationVisible = false
                            }
                        })
                    } else {
                        this.$message.error('请选择项目')
                    }
                }
            })
        },
        getAccountList(e) {
            console.log(e)
            this.options = []
            this.accountId = undefined
            this.userId = undefined
            this.personList = []
            this.getParticipateList(e.target.value)
            this.getPersonByAccountId(e.target.value)
        },
        addCompensation() {
            this.addCompensationVisible = true
            this.getParticipateList(2)
            this.getPersonByAccountId(2)
        },
        compensationShow() {
            this.compensationVisible = true
            this.getCompensationList()
        },
        handleCurreyCompensation(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipaginationCompensation.current = current
            this.ipaginationCompensation.pageSize = pageSize
            this.getCompensationList()
        },
        getCompensationList() {
            let params = {}
            params.userId = this.userInfo().id
            params.pageNo = this.ipaginationCompensation.current
            params.pageSize = this.ipaginationCompensation.pageSize
            this.compensationLoading = true
            this.postDataAction('/kuaishou/operationReport/queryAccountCompensation', params)
                .then((result) => {
                    this.compensationLoading = false
                    if (result.success) {
                        this.compensationList = result.result.list || []
                        this.ipaginationCompensation.total = result.result.total || 0
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(() => {})
        },
        getParticipateList(type) {
            //我参与的
            //   toutiaoParticipateList
            var params = {}
            params.userId = this.userInfo().id

            if (type == 1) {
                params.type = 'bytedance'
            } else if (type == 2) {
                params.type = 'kuaishou'
            }
            this.options = []
            this.postDataAction('/ctop/projectMember/participateListByMediaId', params).then((res) => {
                if (res.success) {
                    this.options = res.result.map((item) => {
                        return {
                            id: item.projectId + 'projectId',
                            label:
                                item.projectName +
                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                item.advertiserName,
                            children: item.accountList
                                ? item.accountList.map((i) => {
                                      return {
                                          id: i.accountId,
                                          label:
                                              (i.userName.length == 2
                                                  ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                                                  : i.userName.length == 3
                                                  ? i.userName + '\xa0\xa0\xa0\xa0'
                                                  : i.userName) +
                                              '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                              i.accountId +
                                              '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                              i.authName,
                                      }
                                  })
                                : [],
                        }
                    })
                }
            })
        },
        handleCurrey(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.ipagination.pageSize = pageSize
            this.getSaleList()
        },
        getAllOperatorListKuaishou() {
            return new Promise((resolve, reject) => {
                this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=2').then((res) => {
                    if (res.success) {
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        getAllOperatorListToutiao() {
            return new Promise((resolve, reject) => {
                this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=1').then((res) => {
                    if (res.success) {
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        handleAddSale() {
            this.ipagination.current = 1
            this.saleVisible = true
            this.getSaleList()
            Promise.all([this.getAllOperatorListKuaishou(), this.getAllOperatorListToutiao()])
                .then((res) => {
                    this.allOperatorList = res[0].concat(res[1])
                })
                .catch((error) => {
                    this.$error({
                        title: '页面数据加载出错',
                        content: '请刷新重试或联系管理员查询',
                    })
                })
        },
        addSaleInfo() {
            this.saleInfoList.push({
                saleId: undefined,
                assistantId: undefined,
                edit: true,
                saleIdContent: undefined,
                assistantIdContent: undefined,
            })
        },
        //获取运营对应列表
        getSaleList() {
            let params = {}
            params.userId = this.userInfo().id
            params.pageNo = this.ipagination.current
            params.pageSize = this.ipagination.pageSize
            this.saleLoading = true
            this.getAction('/sys/operateRel/list', params)
                .then((result) => {
                    this.saleLoading = false
                    if (result.success) {
                        this.saleInfoList =
                            result.result.list.map((item) => {
                                return {
                                    ...item,
                                    edit: false,
                                    saleIdContent: undefined,
                                    assistantIdContent: undefined,
                                }
                            }) || []
                        this.ipagination.total = result.result.total || 0
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(() => {})
        },
        //编辑运营对应人员按钮
        handleEdit(item) {
            item.edit = true
            item.saleIdContent = { key: item.operateId, label: item.operateName }
            item.assistantIdContent = { key: item.assistantId, label: item.assistantName }
        },
        //删除运营对应人员按钮
        handleDelete(item) {
            let params = {}
            params.assistantId = item.assistantId
            params.statMonth = item.time
            this.getAction('/sys/operateRel/delete', params).then((result) => {
                if (result.success) {
                    // this.getSaleList()

                    if (this.saleInfoList.length < 2 && this.ipagination.current > 1) {
                        this.ipagination.current = this.ipagination.current - 1
                        this.getSaleList()
                    } else {
                        this.getSaleList()
                    }
                }
            })
        },
        //运营对应人员确定按钮
        handleSale(item) {
            if (item.saleIdContent && item.time) {
                let params = {}
                params.operateId = item.saleIdContent.key
                params.operateName = item.saleIdContent.label.replace(/[\r\n]/g, '').trim()
                params.assistantId = item.assistantIdContent.key
                params.assistantName = item.assistantIdContent.label.replace(/[\r\n]/g, '').trim()
                params.statMonth = moment(item.time).format('YYYY-MM')

                this.postDataAction('/sys/operateRel/add', params).then((result) => {
                    if (result.success) {
                        this.getSaleList()
                    } else {
                        this.$message.error(result.message)
                    }
                })
            } else {
                this.$message.error('请选择人员和时间')
            }
        },
        //运营对应人员取消确定按钮
        handleSaleCancelOne(item) {
            if (item.assistantId) {
                item.edit = false
                item.time = moment(item.time).format('YYYY-MM')
                this.getSaleList()
            } else {
                this.saleInfoList.pop()
            }
        },
        ...mapGetters(['userInfo']),
        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.yearTime = 2022
            params.monthTime = this.quarter
            params.role = this.post
            params.userId = !!this.person ? this.person : this.userInfo().id
            params.pageSize = this.ipagination.pageSize
            params.pageNum = this.ipagination.current

            if (this.mediaDimension === 'a') {
                this.showKf = false
            } else {
                this.showKf = true
            }
            if (this.quarter == 1) {
                this.oneFWCharge = '1月提成'
                this.oneJLCharge = '2月提成'
                this.oneKFCharge = '3月提成'
                this.onetotalCharge = 'Q1总消耗'
            } else if (this.quarter == 2) {
                this.oneFWCharge = '4月提成'
                this.oneJLCharge = '5月提成'
                this.oneKFCharge = '6月提成'
                this.onetotalCharge = 'Q2总消耗'
            } else if (this.quarter == 3) {
                this.oneFWCharge = '7月提成'
                this.oneJLCharge = '8月提成'
                this.oneKFCharge = '9月提成'
                this.onetotalCharge = 'Q3总消耗'
            } else {
                this.oneFWCharge = '10月提成'
                this.oneJLCharge = '11月提成'
                this.oneKFCharge = '12月提成'
                this.onetotalCharge = 'Q4总消耗'
            }

            this.getAction('/designer/designerAchievementsController/getDesignerBasicsAndAchAndComInfo', params).then(
                (res) => {
                    this.resetLoading = false
                    this.designTopLoading = false
                    if (res.success) {
                        this.designTopList = res.result.list || []
                        this.ipagination.total = res.result.total || 0
                    } else {
                        this.designTopList = []
                        this.designTopLoading = false
                    }
                }
            )
        },

        getProjectList() {
            this.specificLoading = true
            this.dataDimensionList = []
            this.dataDimensionValue = null
            this.person = null
            this.post = null
            return new Promise((resolve, reject) => {
                this.getAction('/designer/designerAchievementsController/getUserByRoleName', { roleName: '' }).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.ipagination.current = 1
            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%;
        ::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>
