<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="运营数据">
                    <a-button type="primary" @click="handleAddSale" style="margin-bottom: 15px">
                        新增运营对应关系
                    </a-button>
                    <a-button type="primary" @click="addCompensation" style="margin: 0 15px 15px"> 新增赔付 </a-button>
                    <a-button type="primary" @click="compensationShow" style="margin-bottom: 15px"> 赔付列表 </a-button>
                     <a-button type="primary" class="export" @click="exportExcel" :loading="exportLoading" style="margin-bottom: 15px;margin-left:15px"
                        >导出报表</a-button
                    >
                    <!-- :columns="columns" -->
                    <a-table
                        size="middle"
                        :dataSource="designTopList"
                        bordered
                        id="outTable"
                        :pagination="false"
                        :loading="designTopLoading"
                        ref="accountTable"
                        @change="sort"
                        :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="upTime" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ !!t ? t : '-' }}</span>
                            </template>
                        </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-column :title="onetotalCharge" data-index="totalCharge" align="center">
                        </a-table-column>
                        <a-table-column :title="oneKFCharge" data-index="KFCharge" align="center" v-if="showKf">
                        </a-table-column>
                        <a-table-column :title="oneFWCharge" data-index="FWCharge" align="center"> </a-table-column>
                        <a-table-column
                            title="框返消耗是否满足30W"
                            data-index="KFChargeIsOk"
                            align="center"
                            v-if="showKf"
                        >
                        </a-table-column>
                        <a-table-column title="管理消耗" data-index="manageCharge" align="center"> </a-table-column>
                        <a-table-column title="助理消耗" data-index="assistantCharge" align="center"> </a-table-column>
                        <a-table-column title="服务消耗提成" data-index="FWChargeCommission" align="center">
                        </a-table-column>

                        <a-table-column
                            title="框返消耗提成"
                            data-index="KFChargeCommission"
                            align="center"
                            v-if="showKf"
                        >
                        </a-table-column>
                        <a-table-column title="管理消耗提成" data-index="manageChargeCommission" align="center">
                        </a-table-column>
                        <a-table-column title="运营赔付扣罚比例" data-index="operateCompensation" align="center">
                        </a-table-column>
                        <a-table-column title="经理/总监赔付扣罚比例" data-index="manageCompensation" align="center">
                        </a-table-column>
                        <a-table-column title="是否达标" data-index="FWChargeIsOk" align="center"> </a-table-column>
                        <a-table-column title="扣减金额" data-index="compMoney" align="center"> </a-table-column>
                        <a-table-column title="是否符合发放" data-index="paySalary" align="center"> </a-table-column>
                        <a-table-column title="发放金额" data-index="putMoney" align="center"> </a-table-column>
                        <a-table-column title="发放系数" data-index="paySalaryRatio" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ !!t ? t : '-' }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="最终发放金额" data-index="finalPutMoney" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ !!t ? t : '-' }}</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="saleVisible"
            title="运营管理"
            :visible="saleVisible"
            @cancel="saleVisible = false"
            :width="1000"
            :footer="null"
        >
            <a-button type="primary" style="margin-bottom: 10px" id="mybtn" @click="addSaleInfo">新增</a-button>
            <br />
            设定对应关系后,该运营助理的消耗在结算绩效时,会根据对应人员进行统计
            <a-table
                :columns="saleInfoColumns"
                :data-source="saleInfoList"
                bordered
                tableLayout="auto"
                :pagination="false"
                :loading="saleLoading"
                style="word-break: break-all"
            >
                <div slot="operateName" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-select
                        v-else
                        show-search
                        v-model="records.saleIdContent"
                        placeholder="请选择运营"
                        option-filter-prop="children"
                        style="width: 200px"
                        :filter-option="filterOption"
                        :labelInValue="true"
                    >
                        <a-select-option
                            v-for="(item, index) in dataDimensionList"
                            :key="index"
                            :value="item.userId"
                            :disabled="
                                records.assistantIdContent ? records.assistantIdContent.key == item.userId : false
                            "
                        >
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </div>
                <div slot="assistantName" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-select
                        v-else
                        show-search
                        v-model="records.assistantIdContent"
                        placeholder="请选择运营助理"
                        option-filter-prop="children"
                        style="width: 200px"
                        :filter-option="filterOption"
                        :labelInValue="true"
                    >
                        <a-select-option
                            v-for="(item, index) in dataDimensionList"
                            :key="index"
                            :value="item.userId"
                            :disabled="records.saleIdContent ? records.saleIdContent.key == item.userId : false"
                        >
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </div>
                <div slot="time" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-month-picker v-model="records.time" v-else />
                </div>
                <div slot="action" slot-scope="text, records">
                    <div v-if="!records.edit">
                        <a @click="handleEdit(records)">编辑</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="是否确认删除?" @confirm="() => handleDelete(records)">
                            <a>删除</a>
                        </a-popconfirm>
                    </div>
                    <div v-else>
                        <a-button type="primary" @click="handleSale(records)">保存</a-button>
                        <a-button style="margin-left: 8px" @click="handleSaleCancelOne(records)">取消</a-button>
                    </div>
                </div>
            </a-table>
            <a-pagination
                style="display: flex; justify-content: flex-end; margin-top: 10px"
                :total="ipagination.total"
                :show-total="(total) => `共 ${ipagination.total} 条`"
                size="small"
                @change="handleCurrey"
            />
        </a-modal>

        <a-modal
            v-if="compensationVisible"
            title="赔付记录"
            :visible="compensationVisible"
            @cancel="compensationVisible = false"
            :width="1000"
            :footer="null"
        >
            <a-table
                :data-source="compensationList"
                bordered
                tableLayout="auto"
                :pagination="false"
                :loading="compensationLoading"
                style="word-break: break-all"
            >
                <a-table-column title="账户ID" data-index="accountId" :width="150" align="center"> </a-table-column>
                <a-table-column title="账户名称" data-index="auth_name" :width="150" align="center"> </a-table-column>
                <a-table-column title="运营" data-index="realname" align="center"> </a-table-column>
                <a-table-column title="媒体" data-index="mediaId" align="center">
                    <template slot-scope="t, r, i">
                        <span>{{ t == 1 ? '头条' : '快手' }}</span>
                    </template>
                </a-table-column>
                <a-table-column title="日期" data-index="startDate" align="center">
                    <template slot-scope="t, r, i">
                        <span>{{ t + '~' + r.endDate }}</span>
                    </template>
                </a-table-column>
                <a-table-column title="赔付金额" data-index="compMoney" align="center"> </a-table-column>
            </a-table>
            <a-pagination
                style="display: flex; justify-content: flex-end; margin-top: 10px"
                :total="ipaginationCompensation.total"
                :show-total="(total) => `共 ${ipaginationCompensation.total} 条`"
                size="small"
                @change="handleCurreyCompensation"
            />
        </a-modal>

        <a-modal
            v-if="addCompensationVisible"
            title="新增赔付"
            :visible="addCompensationVisible"
            @cancel="
                addCompensationVisible = false
                accountId = undefined
                userId = undefined
            "
            :width="1000"
            @ok="handleSubmitAdd"
        >
            <!-- @submit="handleQueryList" -->
            <a-form
                :form="form"
                :selfUpdate="true"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 19 }"
                v-if="addCompensationVisible"
            >
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="媒体">
                            <a-radio-group
                                v-decorator="[
                                    'mediaId',
                                    {
                                        rules: [{ required: true, message: '请选择项目!' }],
                                        initialValue: 2,
                                    },
                                ]"
                                @change="getAccountList"
                            >
                                <a-radio-button :value="2">快手</a-radio-button>
                                <a-radio-button :value="1">头条</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="账户名称">
                            <treeselect
                                :multiple="false"
                                :disable-branch-nodes="true"
                                :disable-fuzzy-matching="true"
                                :options="options"
                                placeholder="请选择项目以及账户"
                                v-model="accountId"
                                style="width: 100%"
                                @change="getPersonByAccountId"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="运营">
                            <a-select
                                v-model="userId"
                                style="width: 150px"
                                :mode="'default'"
                                :filterOption="filterOption"
                                showSearch
                                allowClear
                            >
                                <a-select-option
                                    v-for="(item, index) in personList"
                                    :key="index + 1"
                                    :value="item.userId"
                                >
                                    {{ item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="24">
                    <a-col :md="16" :sm="16" :xxl="16">
                        <a-form-item label="日期">
                            <a-range-picker
                                v-decorator="[
                                    'statDate',
                                    {
                                        rules: [{ required: true, message: '请选择日期!' }],
                                        initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                                    },
                                ]"
                                :ranges="dateRanges"
                                :disabled-date="disabledDate"
                                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-input-number
                                v-decorator="[
                                    'compMoney',
                                    {
                                        rules: [{ required: true, message: '赔付金额必填!' }],
                                    },
                                ]"
                                :min="0"
                                :step="0.1"
                                style="width: 250px"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>

        <a-modal
            v-if="editPuy"
            title="修改发放系数和是否符合发放"
            :visible="editPuy"
            @cancel="editPuy = false"
            :width="1000"
            @ok="handleSubmitEdit"
        >
            <!-- @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.paySalary,
                                    },
                                ]"
                                @change="getAccountList"
                            >
                                <a-radio-button value="是">是</a-radio-button>
                                <a-radio-button value="否">否</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="[
                                    'paySalaryRatio',
                                    {
                                        rules: [{ required: true, message: '发放系数必填!' }],
                                        initialValue: editData.paySalaryRatio,
                                    },
                                ]"
                                :min="0"
                                :max="1"
                                :step="0.1"
                                style="width: 250px"
                            />
                        </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 { downFile } from '@/api/manage'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
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,
            editPuy: false,
            editData: null,
            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
                },
            },
            ipaginationCompensation: {
                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.ipaginationCompensation.current = current
                    this.ipaginationCompensation.pageSize = pageSize
                },
            },
            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,
        }
    },
    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,
        editPuyData(item) {
            this.editData = item
            this.editPuy = true
        },
        handleSubmitEdit() {
            this.formEdit.validateFields((err, values) => {
                if (!err) {
                    let params = {}
                    params.userId = this.editData.userId
                    params.paySalaryRatio = values.paySalaryRatio
                    params.paySalary = values.paySalary
                    this.getAction('/kuaishou/operationReport/updateUserSalary', params).then((res) => {
                        if (res.success) {
                            this.editPuy = false
                            this.editData = null
                            this.getTableMediaList()
                        }
                    })
                }
            })
        },

        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: '请刷新重试或联系管理员查询'
                    // });
                })
        },
        //导出报表
        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/queryQuarterlyDataExcel', 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
            })
        },
        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 = 'Q1服务消耗'
                this.oneJLCharge = 'Q1激励消耗'
                this.oneKFCharge = 'Q1框返消耗'
                this.onetotalCharge = 'Q1总消耗'
            } else if (this.quarter == 2) {
                this.oneFWCharge = 'Q2服务消耗'
                this.oneJLCharge = 'Q2激励消耗'
                this.oneKFCharge = 'Q2框返消耗'
                this.onetotalCharge = 'Q2总消耗'
            } else if (this.quarter == 3) {
                this.oneFWCharge = 'Q3服务消耗'
                this.oneJLCharge = 'Q3激励消耗'
                this.oneKFCharge = 'Q3框返消耗'
                this.onetotalCharge = 'Q3总消耗'
            } else {
                this.oneFWCharge = 'Q4服务消耗'
                this.oneJLCharge = 'Q4激励消耗'
                this.oneKFCharge = 'Q4框返消耗'
                this.onetotalCharge = 'Q4总消耗'
            }

            this.getAction('/kuaishou/operationReport/queryQuarterlyData', 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
                    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%;
        ::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>
