<template>
    <div class="policy-management-content">
        <div class="control-con-title">
            <div>
                <span class="policy-export-btn">销售政策列表</span>
            </div>
            <div>
                <span v-if="userInfo().roleName !== '财务'" class="add-acount-policy-btn">
                    <a-button type="primary" @click="handleAddAccountPolicy">新增政策</a-button>
                </span>
            </div>
        </div>
        <div class="control-con-header">
            <a-form
                class="grid-form"
                layout="inline"
                :form="searchForm"
                hide-required-mark
            >
                <a-row class="grid-form-options">
                    <a-form-item
                        class="grid-form-item"
                        label="公司名称："
                        :colon="false"
                    >
                        <a-input v-model="configForm.companyName" placeholder="请输入公司名称" allow-clear/>
                    </a-form-item>
                    <a-form-item
                        class="grid-form-item"
                        label="广告主名称："
                        :colon="false"
                    >
                        <a-input v-model="configForm.adverName" placeholder="请输入广告主名称" allow-clear/>
                    </a-form-item>
                    <a-form-item
                        class="grid-form-item"
                        label="产品名称："
                        :colon="false"
                    >
                        <a-input v-model="configForm.productName" placeholder="请输入产品名称" allow-clear/>
                    </a-form-item>
                    <a-form-item label="媒体：">
                        <a-select
                            v-model="configForm.creativeMedia"
                            style="width: 100px"
                            allow-clear
                        >
                            <a-select-option
                                v-for="item in creativeMediaOptions"
                                :key="item.id"
                                :value="item.id"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="返点类型：">
                        <a-select
                            v-model="configForm.creativeRebate"
                            style="width: 140px"
                            allow-clear
                        >
                            <a-select-option
                                v-for="item in creativeRebateOptions"
                                :key="item.id"
                                :value="item.id"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-row>
                <a-row>
                    <a-form-item
                        class="grid-form-item"
                        label="垫付公司名称："
                        :colon="false"
                    >
                        <a-input v-model="configForm.creativeAdvance" placeholder="请输入垫付公司名称"/>
                    </a-form-item>
                    <a-form-item label="销售：">
                        <a-select
                            v-model="configForm.creativeSale"
                            style="width: 100px"
                            :filter-option="handleFilterOption"
                            show-search
                            allow-clear
                        >
                            <a-select-option
                                v-for="item in allSaleListOption"
                                :key="item.userId"
                                :value="item.userName"
                            >
                                {{ item.userName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="运营方式：">
                        <a-select
                            v-model="configForm.creativeOperate"
                            style="width: 100px"
                            allow-clear
                        >
                            <a-select-option value="no">不限</a-select-option>
                            <a-select-option :value="0">自运营</a-select-option>
                            <a-select-option :value="1">代运营</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="时间：" :colon="false">
                        <a-range-picker
                            v-model="configForm.time"
                            format="YYYY-MM-DD"
                            @change="handleLaunchData"
                        />
                    </a-form-item>
                    <a-form-item label="状态：">
                        <a-select
                            v-model="configForm.searchStatus"
                            style="width: 100px"
                            allow-clear
                        >
                            <a-select-option
                                v-for="item in searchStatusOptions"
                                :key="item.id"
                                :value="item.id"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="form-handle-btn">
                        <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
                        <a-button type="primary" @click="handleQueryList">搜索</a-button>
                    </a-form-item>
                </a-row>
            </a-form>
        </div>
        <div class="control-con-table">
            <a-table
                ref="table"
                size="middle"
                bordered
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
                :loading="controlLoading"
                :scroll="{x: 3000}"
            >
                <span slot="advertiserName" slot-scope="text">
                    <span>{{ text }}</span>
                </span>
                <span slot="updatePolicyProductName" slot-scope="text">
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>{{ text }}</span>
                        </template>
                        <span>{{ text }}</span>
                    </a-tooltip>
                </span>
                <span slot="promotionType" slot-scope="text">
                    <span>{{ text === 0 ? '自运营' : '代运营' }}</span>
                </span>
                <span slot="advancePay" slot-scope="text">
                    <span>{{ text === 0 ? '否' : '是' }}</span>
                </span>
                <span slot="isDianPay" slot-scope="text">
                    <span>{{ calculationScope(text) }}</span>
                </span>
                <span slot="updateApprovedStatus" slot-scope="text">
                    <a>{{ text }}</a>
                </span>
                <span slot="dianPayCompanyName" slot-scope="text">
                    <span>{{ text ? text : '-' }}</span>
                </span>
                <span slot="dianPayCompanyRebateRate" slot-scope="text">
                    <span>{{ text ? text + '%' : '-' }}</span>
                </span>
                <span slot="accountingPeriod" slot-scope="text">
                    <span>{{ text ? text + '天' : '-' }}</span>
                </span>
                <span slot="rebateRate" slot-scope="text">
                    <span>{{ text ? text + '%' : '-' }}</span>
                </span>
                <span slot="policyStartDate" slot-scope="text, record">
                    <span>{{ text }} 至 {{ record.policyEndDate }}</span>
                </span>
                <span slot="remarks" slot-scope="text">
                    <span>{{ text ? text : '-' }}</span>
                </span>
                <span slot="action" slot-scope="text, record">
                    <a v-if="record.updateOperation.includes('查看')" @click="handleDetail(record)">查看</a>
                    <a-divider v-if="record.updateOperation.includes('提交审核')" type="vertical"/>
                    <a v-if="record.updateOperation.includes('提交审核')" @click="handleSubmitReview(record)">提交审核</a>
                    <a-divider v-if="record.updateOperation.includes('编辑')" type="vertical"/>
                    <a v-if="record.updateOperation.includes('编辑')" @click="handleEditTable(record)">编辑</a>
                    <a-divider v-if="record.updateOperation.includes('审核通过')" type="vertical"/>
                    <a v-if="record.updateOperation.includes('审核通过')" @click="handleAuditSure(record)">审核通过</a>
                    <a-divider v-if="record.updateOperation.includes('审核拒绝')" type="vertical"/>
                    <a v-if="record.updateOperation.includes('审核拒绝')" @click="handleAuditCancel(record)">审核拒绝</a>
                </span>
                <span slot="reason" slot-scope="text, record">
                    <a @click="handleRejectionReason(record)" :disabled="record.approvedStatus !== 4">被拒原因</a>
                </span>
            </a-table>
            <a-pagination
                class="pagin-table-class"
                :total="totalAll"
                :show-total="total => `共 ${totalAll} 条`"
                size="small"
                show-size-changer
                show-quick-jumper
                @change="handleOnShowSizeChange"
                @showSizeChange="handleOnShowSizeChange"
            />
        </div>
        <!-- 被拒理由 -->
        <a-modal
            v-if="rejectionReasonStatus"
            title="审核不通过"
            dialog-class="rejection-reason-class"
            :visible="rejectionReasonStatus"
            :footer="null"
            :closable="false"
        >
            <div>
                <span class="audit-policy-icon" @click="handleModeCancel"><a-icon type="close"/></span>
                <div class="reason-class-header">审核不通过的理由:</div>
                <div class="reason-class-content">{{ rejectionReasonList.approvalContent }}</div>
                <div solt="footer" class="audit-policy-footer">
                    <div></div>
                    <div>
                        <a-button type="default" class="cancel-btn" @click="handleModeCancel">取消</a-button>
                    </div>
                </div>
            </div>
        </a-modal>
        <!-- 查看详情 -->
        <a-modal
            v-if="auditPolicyStatus"
            title="审核政策"
            dialog-class="audit-policy-class"
            :visible="auditPolicyStatus"
            :closable="false"
            :footer="null"
        >
            <div>
                <span class="audit-policy-icon" @click="handleCloseAuditPolicy"><a-icon type="close"/></span>
                <div class="policy-line-quen">
                    <div class="line-quen-left">
                        <div class="policy-line-left">
                            <span class="line-left-spn">公司名称：</span>
                            <span class="line-right-spn">{{ queryByIdList.companyName || '-' }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">广告主：</span>
                            <span class="line-right-spn">{{ queryByIdList.advertiserName || '-' }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">产品名称：</span>
                            <div style="width: 200px;">
                                <div
                                    class="line-right-spn"
                                    v-for="(item, index) in queryByIdList.policyProductName"
                                    :key="index + 1"
                                >
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">媒体：</span>
                            <span class="line-right-spn">{{ queryByIdList.updateMediaType }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">销售：</span>
                            <span class="line-right-spn">{{ queryByIdList.createUserName }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">区域：</span>
                            <span class="line-right-spn">{{ queryByIdList.areaInfo }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">我司主体：</span>
                            <span class="line-right-spn">{{ queryByIdList.companySubjectName }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">运营方式：</span>
                            <span class="line-right-spn">{{ queryByIdList.promotionType === 0 ? '自运营' : '代运营' }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">集团简称：</span>
                            <span class="line-right-spn">{{ queryByIdList.groupAbbreviation || '-' }}</span>
                        </div>
                    </div>
                    <div class="line-quen-right">
                        <div class="policy-line-right">
                            <span class="line-left-spn">是否预付：</span>
                            <span class="line-right-spn">{{ queryByIdList.advancePay === 0 ? '否' : '是' }}</span>
                        </div>
                        <div class="policy-line-right">
                            <span class="line-left-spn">返点类型：</span>
                            <span class="line-right-spn">{{ queryByIdList.updateRebateType }}</span>
                        </div>
                        <div class="policy-line-right">
                            <span class="line-left-spn">返点比例：</span>
                            <span class="line-right-spn">{{ queryByIdList.rebateRate + '%' }}</span>
                        </div>
                        <div v-if="queryByIdList.advancePay === 0">
                            <div class="policy-line-right">
                                <span class="line-left-spn">账期：</span>
                                <span class="line-right-spn">{{ queryByIdList.accountingPeriod && queryByIdList.accountingPeriod + '天' }}</span>
                            </div>
                            <div class="policy-line-right">
                                <span class="line-left-spn">是否第三方垫付：</span>
                                <span class="line-right-spn">{{ queryByIdList.isDianPay === 0 ? '否' : '是' }}</span>
                            </div>
                            <div v-if="queryByIdList.isDianPay === 1">
                                <div class="policy-line-right">
                                    <span class="line-left-spn">垫付公司：</span>
                                    <span class="line-right-spn">{{ queryByIdList.dianPayCompanyName }}</span>
                                </div>
                                <div class="policy-line-right">
                                    <span class="line-left-spn">垫付返点：</span>
                                    <span class="line-right-spn">{{ queryByIdList.dianPayCompanyRebateRate && queryByIdList.dianPayCompanyRebateRate + '%' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="policy-line-right">
                            <span class="line-left-spn">政策起止时间：</span>
                            <span class="line-right-spn">{{ queryByIdList.policyStartDate }} 至 {{ queryByIdList.policyEndDate }}</span>
                        </div>
                        <div class="policy-line-right">
                            <span class="line-left-spn">备注：</span>
                            <span class="line-right-spn">{{ queryByIdList.remarks || '-' }}</span>
                        </div>
                    </div>
                </div>
                <div v-if="queryByIdList.updateOperation.includes('审核拒绝')" solt="footer" class="audit-policy-footer">
                    <div></div>
                    <div>
                        <a-button type="default" class="cancel-btn" @click="handleAuditCancel">审核拒绝</a-button>
                        <a-button type="primary" @click="handleAuditSure">审核通过</a-button>
                    </div>
                </div>
            </div>
        </a-modal>
        <!-- 审核拒绝 -->
        <a-modal
            v-if="rejectAuditStatus"
            title="审核不通过"
            dialog-class="rejection-reason-class"
            :visible="rejectAuditStatus"
            @ok="handleRejectSure"
            @cancel="handleRejectCancel"
        >
            <div>
                <div class="reason-class-header">请输入审核不通过的理由:</div>
                <a-form-model
                    ref="rejectRuleForm"
                    :model="reasonForm"
                    :rules="reasonRules"
                >
                    <a-form-model-item label="" prop="desc">
                        <a-input
                            class="rejection-textarea-msg"
                            v-model="reasonForm.desc"
                            type="textarea"
                            placeholder="请输入至少五个字符"
                        />
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
        <!-- 新增、编辑政策 -->
        <a-modal
            v-if="policyOperationStatus"
            dialog-class="policy-operation-class"
            :title="addType === 'add' ? '新增政策' : '编辑政策'"
            :visible="policyOperationStatus"
            :confirmLoading="confirmLoading"
            @ok="handlePolicyOperationSure"
            @cancel="handlePolicyOperationCancel"
        >
            <div>
                <a-form-model
                    class="policy-operation-form"
                    ref="policyOperationForm"
                    :model="policyOperationForm"
                    :rules="policyOperationRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-row class="policy-operation-form-left">
                        <a-form-model-item label="公司名称" prop="companyName">
                            <a-input
                                v-model="policyOperationForm.companyName"
                                placeholder="请输入公司名称"
                                allow-clear
                            />
                        </a-form-model-item>
                        <a-form-model-item label="广告主" prop="advertiserName">
                            <a-input
                                v-model="policyOperationForm.advertiserName"
                                placeholder="请输入广告主"
                                allow-clear
                            />
                        </a-form-model-item>
                        <div
                            class="product-name-class"
                            v-for="(item, index) in policyOperationForm.defaultFormList"
                            :key="item.id"
                        >
                            <a-form-model-item
                                :label="index === 0 ? '产品名称' : ''"
                                :class="{'isActive': index > 0 }"
                                :prop="'defaultFormList.' + index + '.value'"
                                :rules="changeRules"
                            >
                                <a-input
                                    class="input-common-short"
                                    v-model="item.value"
                                    placeholder="请输入"
                                    allow-clear
                                />
                                <a-icon
                                    v-if="index === 0"
                                    class="circle-icon-class circle-icon-plus"
                                    type="plus-circle"
                                    @click="handleAddOrigin"
                                />
                                <a-icon
                                    v-if="policyOperationForm.defaultFormList.length > 1 && index === 0" class="circle-icon-class circle-icon-minus"
                                    type="minus-circle"
                                    @click="handleDelOrigin(item)"
                                />
                                <a-icon
                                    v-if="policyOperationForm.defaultFormList.length > 1 && index > 0" class="circle-icon-class circle-icon-plus"
                                    type="minus-circle"
                                    @click="handleDelOrigin(item)"
                                />
                            </a-form-model-item>
                        </div>
                        <a-form-model-item label="媒体" prop="mediaType">
                            <a-select
                                v-model="policyOperationForm.mediaType"
                                placeholder="请选择投放媒体"
                                allow-clear
                            >
                                <a-select-option :value="1">头条</a-select-option>
                                <a-select-option :value="2">快手</a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="销售" prop="createUserId">
                            <a-select
                                v-model="policyOperationForm.createUserId"
                                style="width: 100px"
                                show-search
                                allow-clear
                                :filter-option="handleFilterOption"
                            >
                                <a-select-option
                                    v-for="item in saleShowOption"
                                    :key="item.userId"
                                    :value="item.userId"
                                >
                                    {{ item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="区域" prop="areaInfo">
                            <a-select
                                v-model="policyOperationForm.areaInfo"
                                placeholder="请选择区域"
                                allow-clear
                            >
                                <a-select-option
                                    v-for="item in addAreaList"
                                    :key="item"
                                    :value="item"
                                >
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="我司主体" prop="companySubjectName">
                            <a-select
                                v-model="policyOperationForm.companySubjectName"
                                placeholder="请选择我司主体"
                                show-search
                                allow-clear
                                :filter-option="handleFilterOption"
                            >
                                <a-select-option
                                    v-for="item in addSubjectList"
                                    :key="item.companySubjectName"
                                    :value="item.companySubjectName"
                                >
                                    {{ item.companySubjectName }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item
                            class="promotion-type-class"
                            label="运营方式"
                            prop="promotionType"
                        >
                            <a-radio-group v-model="policyOperationForm.promotionType" button-style="solid">
                                <a-radio-button :value="0">自运营</a-radio-button>
                                <a-radio-button :value="1">代运营</a-radio-button>
                            </a-radio-group>
                            <a-tooltip>
                                <template slot="title">自运营是客户自己运营，代运营由我们帮助客户运营账户</template>
                                <a-icon class="settlement-header-icon" type="question-circle"/>
                            </a-tooltip>
                        </a-form-model-item>
                        <div class="group-abbreviation-class">
                            <a-tooltip>
                                <template slot="title">由销售人员自行定义的集团系列产品简称</template>
                                <a-icon class="settlement-header-icon" type="question-circle"/>
                            </a-tooltip>
                            <a-form-model-item label="集团简称">
                                <a-input
                                    v-model="policyOperationForm.groupAbbreviation"
                                    placeholder="请输入集团简称"
                                    allow-clear
                                    @change="handleGroupAbbreviationChange"
                                />
                            </a-form-model-item>
                            <div v-if="subTitleMsgStatus" style="color: #f00;margin-left: 140px">只能输入30个汉字</div>
                        </div>
                    </a-row>
                    <a-row class="policy-operation-form-right">
                        <a-form-model-item label="是否预付" prop="advancePay">
                            <a-radio-group
                                v-model="policyOperationForm.advancePay"
                                button-style="solid"
                                @change="handlePrepaidNotChange"
                            >
                                <a-radio-button :value="1">是</a-radio-button>
                                <a-radio-button :value="0">否</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item label="返点类型：" prop="rebateType">
                            <a-select
                                v-model="policyOperationForm.rebateType"
                                placeholder="请选择返点类型"
                                allow-clear
                            >
                                <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>
                        </a-form-model-item>
                        <a-form-model-item label="返点比例" prop="rebateRate">
                            <a-input-number
                                v-model="policyOperationForm.rebateRate"
                                :step="0.01"
                                :precision="2"
                            /> %
                        </a-form-model-item>
                        <a-form-model-item
                            v-if="policyOperationForm.advancePay === 0"
                            label="账期"
                            prop="accountingPeriod"
                        >
                            <a-input-number v-model="policyOperationForm.accountingPeriod" :precision="0"/> 天
                        </a-form-model-item>
                        <div v-if="policyOperationForm.advancePay === 0">
                            <a-form-model-item label="是否第三方垫付" prop="isDianPay">
                                <a-radio-group
                                    v-model="policyOperationForm.isDianPay"
                                    button-style="solid"
                                    @change="handleIsDianPayChange"
                                >
                                    <a-radio-button :value="1">是</a-radio-button>
                                    <a-radio-button :value="0">否</a-radio-button>
                                </a-radio-group>
                            </a-form-model-item>
                            <div v-if="policyOperationForm.isDianPay === 1">
                                <a-form-model-item label="垫付公司" prop="dianPayCompanyName">
                                    <a-input
                                        v-model="policyOperationForm.dianPayCompanyName"
                                        placeholder="请输入垫付公司"
                                        allow-clear
                                    />
                                </a-form-model-item>
                                <a-form-model-item label="垫付返点" prop="dianPayCompanyRebateRate">
                                    <a-input-number
                                        v-model="policyOperationForm.dianPayCompanyRebateRate"
                                        :step="0.01"
                                        :precision="2"
                                    />
                                </a-form-model-item>
                            </div>
                        </div>
                        <a-form-model-item label="政策起止时间" prop="addTimes">
                            <a-range-picker
                                v-model="policyOperationForm.addTimes"
                                format="YYYY-MM-DD"
                                @change="handleAddTimesChange"
                            />
                        </a-form-model-item>
                        <a-form-model-item label="备注">
                            <a-input
                                v-model="policyOperationForm.remarks"
                                placeholder="请输入备注"
                                allow-clear
                                @change="handleRemarksChange"
                            />
                        </a-form-model-item>
                        <div v-if="remarksStatus" style="color: #f00;margin-left: 140px">只能输入100个汉字</div>
                    </a-row>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment';

import {getAction, postAction} from '@/api/manage';
import {mapGetters} from 'vuex';
import {urlAcount} from './policy-management-server.js';

export default {
    name: 'policy-management',
    data() {
        let handleCharacterLen30 = (rule, value, callback) => {
            this.handleExportRules(value, 1, 30, callback);
        };
        let handleCharacterLen100 = (rule, value, callback) => {
            this.handleDescRules(value, 5, 100, callback);
        };
        return {
            confirmLoading: false,
            controlLoading: false,
            allSaleListOption: [],
            creativeMediaOptions: [
                {
                    id: 'no',
                    name: '不限'
                },
                {
                    id: 1,
                    name: '头条'
                },
                {
                    id: 2,
                    name: '快手'
                }
            ],
            creativeRebateOptions: [
                {
                    id: 'no',
                    name: '不限'
                },
                {
                    id: 0,
                    name: '返现'
                },
                {
                    id: 1,
                    name: '返货'
                },
                {
                    id: 2,
                    name: '返现+返货'
                }
            ],
            searchStatusOptions: [
                {
                    id: 'no',
                    name: '不限'
                },
                {
                    id: 1,
                    name: '待审核'
                },
                {
                    id: 2,
                    name: '审核中'
                },
                {
                    id: 3,
                    name: '审核通过'
                },
                {
                    id: 4,
                    name: '审核拒绝'
                }
            ],
            subTitleMsgStatus: false,
            remarksStatus: false,
            changeRules: [
                {required: true, message: '请输入产品名称', trigger: 'blur'},
                {validator: handleCharacterLen30, trigger: 'blur'}
            ],
            addType: 'add',
            labelCol: {span: 7},
            wrapperCol: {span: 14},
            rejectAuditStatus: false,
            rejectionReasonStatus: false,
            auditPolicyStatus: false,
            policyOperationStatus: false,
            totalAll: 0,
            policyOperationForm: {
                defaultFormList: [
                    {
                        id: 1,
                        value: ''
                    }
                ],
                companyName: '',
                advancePay: 0,
                advertiserName: '',
                rebateType: undefined,
                mediaType: 2,
                createUserId: undefined,
                areaInfo: undefined,
                companySubjectName: undefined,
                promotionType: 1,
                groupAbbreviation: '',
                rebateRate: '',
                accountingPeriod: '',
                isDianPay: 0,
                dianPayCompanyName: '',
                dianPayCompanyRebateRate: '',
                addTimes: [],
                remarks: ''
            },
            reasonForm: {
                desc: ''
            },
            policyOperationRules: {
                companyName: [
                    {required: true, message: '请输入公司名称', trigger: 'blur'},
                    {validator: handleCharacterLen30, trigger: 'blur'}
                ],
                advertiserName: [
                    {required: true, message: '请输入广告主名称', trigger: 'blur'},
                    {validator: handleCharacterLen30, trigger: 'blur'}
                ],
                rebateType: [{required: true, message: '请选择返点类型', trigger: 'change'}],
                mediaType: [{required: true, message: '请选择投放媒体', trigger: 'change'}],
                createUserId: [{required: true, message: '请选择所属销售', trigger: 'change'}],
                areaInfo: [{required: true, message: '请选择区域', trigger: 'change'}],
                companySubjectName: [{required: true, message: '请选择我司主体', trigger: 'change'}],
                rebateRate: [{required: true, message: '请输入返点比例', trigger: 'blur'}],
                accountingPeriod: [{required: true, message: '请输入账期', trigger: 'blur'}],
                dianPayCompanyName: [
                    {required: true, message: '请输入垫付公司', trigger: 'blur'},
                    {validator: handleCharacterLen30, trigger: 'blur'}
                ],
                dianPayCompanyRebateRate: [{required: true, message: '请输入垫付返点', trigger: 'blur'}],
                addTimes: [{required: true, message: '请选择时间', trigger: 'change'}]
            },
            reasonRules: {
                desc: [
                    {required: true, message: '请输入审核拒绝理由', trigger: 'blur'},
                    {validator: handleCharacterLen100, trigger: 'blur'}
                ]
            },
            dataSource: [],
            columns: [
                {
                    title: '公司名称',
                    align: 'center',
                    dataIndex: 'companyName',
                    width: 180
                },
                {
                    title: '广告主',
                    align: 'center',
                    dataIndex: 'advertiserName',
                    width: 180,
                    scopedSlots: {customRender: 'advertiserName'}
                },
                {
                    title: '产品',
                    align: 'center',
                    dataIndex: 'updatePolicyProductName',
                    ellipsis: true,
                    width: 190,
                    scopedSlots: {customRender: 'updatePolicyProductName'}
                },
                {
                    title: '媒体',
                    align: 'center',
                    dataIndex: 'updateMediaType',
                    width: 150
                },
                {
                    title: '销售',
                    dataIndex: 'createUserName',
                    align: 'center',
                    width: 150
                },
                {
                    title: '状态',
                    dataIndex: 'updateApprovedStatus',
                    align: 'center',
                    width: 150,
                    scopedSlots: {customRender: 'updateApprovedStatus'}
                },
                {
                    title: '是否预付',
                    dataIndex: 'advancePay',
                    width: 180,
                    align: 'center',
                    scopedSlots: {customRender: 'advancePay'}
                },
                {
                    title: '账期',
                    dataIndex: 'accountingPeriod',
                    align: 'center',
                    width: 150,
                    scopedSlots: {customRender: 'accountingPeriod'}
                },
                {
                    title: '返点类型',
                    align: 'center',
                    dataIndex: 'updateRebateType',
                    width: 150
                },
                {
                    title: '返点比例',
                    align: 'center',
                    dataIndex: 'rebateRate',
                    width: 150,
                    scopedSlots: {customRender: 'rebateRate'}
                },
                {
                    title: '是否垫付',
                    align: 'center',
                    dataIndex: 'isDianPay',
                    width: 150,
                    scopedSlots: {customRender: 'isDianPay'}
                },
                {
                    title: '垫付公司',
                    align: 'center',
                    dataIndex: 'dianPayCompanyName',
                    width: 150,
                    scopedSlots: {customRender: 'dianPayCompanyName'}
                },
                {
                    title: '垫付公司返点',
                    align: 'center',
                    dataIndex: 'dianPayCompanyRebateRate',
                    width: 150,
                    scopedSlots: {customRender: 'dianPayCompanyRebateRate'}
                },
                {
                    title: '运营方式',
                    align: 'center',
                    dataIndex: 'promotionType',
                    width: 150,
                    scopedSlots: {customRender: 'promotionType'}
                },
                {
                    title: '政策日期',
                    align: 'center',
                    dataIndex: 'policyStartDate',
                    width: 220,
                    scopedSlots: {customRender: 'policyStartDate'}
                },
                {
                    title: '备注',
                    align: 'center',
                    dataIndex: 'remarks',
                    width: 190,
                    scopedSlots: {customRender: 'remarks'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: 250,
                    fixed: 'right',
                    scopedSlots: {customRender: 'action'}
                },
                {
                    title: '审核理由',
                    dataIndex: 'reason',
                    align: 'center',
                    width: 150,
                    fixed: 'right',
                    scopedSlots: {customRender: 'reason'}
                }
            ],
            configForm: {
                companyName: undefined,
                adverName: undefined,
                productName: undefined,
                creativeMedia: 'no',
                creativeRebate: 'no',
                creativeAdvance: undefined,
                creativeSale: undefined,
                creativeOperate: 'no',
                time: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
                searchStatus: 'no'
            },
            tablePag: {
                page: 1,
                size: 10
            },
            addAreaList: [],
            saleShowOption: [],
            addSubjectList: [],
            rejectionReasonList: {},
            tableOnlyId: ''
        };
    },
    created() {
        this.searchForm = this.$form.createForm(this);
    },
    mounted() {
        this.handleInitTable();
        this.handleGetAllSaleList();
        this.handleAddGetArea();
    },
    methods: {
        ...mapGetters(['userInfo']),
        moment,
        calculationScope(data) {
            let defaultScope = '';
            switch (data) {
                case 0:
                    defaultScope = '否';
                    break;
                case 1:
                    defaultScope = '是';
                    break;
                default:
                    defaultScope = '-';
            }
            return defaultScope;
        },
        handleLaunchData(date, dateString) {
            this.configForm.time = dateString;
        },
        handleFilterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        handleAddTimesChange(date, dateString) {
            this.policyOperationForm.addTimes = dateString;
        },
        handleAddGetArea(data) {
            const paramsData = {
                userId: this.userInfo().id
            };
            getAction(urlAcount + '/finance/cwjsPolicyInfo/queryAeraByUserId', paramsData).then(result => {
                if (result.code === 0) {
                    const defaultList = result.result[0].UserCompany;
                    this.saleShowOption = defaultList;
                    this.addAreaList = defaultList[0].nickName.split(',');
                    this.addSubjectList = result.result[0].companySubjects;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleExamineAll(data) {
            const paramsData = {
                id: data.id,
                type: data.type,
                userId: this.userInfo().id,
                approvalContent: data.value
            };
            getAction(urlAcount + '/finance/cwjsPolicyInfo/policyApproval', paramsData).then(result => {
                if (result.code === 0) {
                    this.rejectAuditStatus = false;
                    this.auditPolicyStatus = false;
                    this.handleInitTable();
                    this.$message.success(result.message);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 获取所有的媒体 枚举值
        handleGetAllSaleList() {
            const paramsData = {
                userId: this.userInfo().id
            };
            getAction(urlAcount + '/finance/cwjsPolicyInfo/getAllSaleList', paramsData).then(result => {
                if (result.code === 200) {
                    this.allSaleListOption = result.result || [];
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        // 获取默认的列表数据
        handleInitTable() {
            this.controlLoading = true;
            const paramsData = {
                userId: this.userInfo().id,
                companyName: this.configForm.companyName,
                advertiserName: this.configForm.adverName,
                productName: this.configForm.productName,
                mediaType: this.configForm.creativeMedia === 'no' ? '' : this.configForm.creativeMedia,
                rebateType: this.configForm.creativeRebate === 'no' ? '' : this.configForm.creativeRebate,
                dianPayCompanyName: this.configForm.creativeAdvance,
                createUserName: this.configForm.creativeSale === 'no' ? '' : this.configForm.creativeSale,
                promotionType: this.configForm.creativeOperate === 'no' ? '' : this.configForm.creativeOperate,
                approvedStatus: this.configForm.searchStatus === 'no' ? '' : this.configForm.searchStatus,
                startTime: this.configForm.time[0],
                endTime: this.configForm.time[1],
                pageNo: this.tablePag.page,
                pageSize: this.tablePag.size
            };
            getAction(urlAcount + '/finance/cwjsPolicyInfo/list', paramsData).then(result => {
                if (result.code === 0) {
                    let defaultList = result.result.list;
                    defaultList.forEach(item => {
                        item.updatePolicyProductName = item.policyProductName.join('，');
                        item.updateOperation = item.operation.split('|');
                        item.updateMediaType = this.creativeMediaOptions.filter(val => val.id === item.mediaType)[0].name;
                        item.updateRebateType = this.creativeRebateOptions.filter(val => val.id === item.rebateType)[0].name;
                        item.updateApprovedStatus = this.searchStatusOptions.filter(val => val.id === item.approvedStatus)[0].name;
                    });
                    this.dataSource = defaultList;
                    this.totalAll = result.result.total;
                }
                else {
                    this.dataSource = [];
                    this.totalAll = 0;
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            }).finally(() => {
                this.controlLoading = false;
            });
        },
        handleRemarksChange(e) {
            const targetVal = e.target.value;
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let length = 0;
            let strArr = targetVal.split('');
            strArr.forEach(item => {
                if (cnReg.test(item)) {
                    length += 2;
                }
                else {
                    length += 1;
                }
            });
            if (1 <= length && length <= 200) {
                this.remarksStatus = false;
            }
            else {
                this.remarksStatus = true;
            }
        },
        handleGroupAbbreviationChange(e) {
            const targetVal = e.target.value;
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let length = 0;
            let strArr = targetVal.split('');
            strArr.forEach(item => {
                if (cnReg.test(item)) {
                    length += 2;
                }
                else {
                    length += 1;
                }
            });
            if (1 <= length && length <= 60) {
                this.subTitleMsgStatus = false;
            }
            else {
                this.subTitleMsgStatus = true;
            }
        },
        disabledDate(current) {
            return current > moment().subtract(1, 'day');
        },
        handleAddOrigin() {
            const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
            this.policyOperationForm.defaultFormList.push({
                id: randomNum,
                value: ''
            });
        },
        handleDelOrigin(list) {
            if (this.policyOperationForm.defaultFormList.length === 1) {
                return;
            }
            let formData = this.policyOperationForm.defaultFormList;
            this.policyOperationForm.defaultFormList = formData.filter(item => list.id !== item.id);
        },
        handleIsDianPayChange(e) {
            if (e.target.value === 0) {
                this.policyOperationForm.dianPayCompanyName = '';
                this.policyOperationForm.dianPayCompanyRebateRate = 0;
            }
        },
        handlePrepaidNotChange(e) {
            if (e.target.value === 1) {
                this.policyOperationForm.accountingPeriod = '';
                this.policyOperationForm.dianPayCompanyName = '';
                this.policyOperationForm.dianPayCompanyRebateRate = 0;
                this.policyOperationForm.isDianPay = undefined;
            }
            else if (e.target.value === 0) {
                this.policyOperationForm.isDianPay = 0;
            }
        },
        handleExportRules(value, min, max, callback) {
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let length = 0;
            let strArr = value.split('');
            strArr.forEach(item => {
                if (cnReg.test(item)) {
                    length += 2;
                }
                else {
                    length += 1;
                }
            });
            if (min * 2 <= length && length <= max * 2) {
                callback();
            }
            else {
                callback(`只能输入${min}-${max}个汉字`);
            }
        },
        handleDescRules(value, min, max, callback) {
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let length = 0;
            let strArr = value.split('');
            strArr.forEach(item => {
                if (cnReg.test(item)) {
                    length += 2;
                }
                else {
                    length += 1;
                }
            });
            if (min <= length && length <= max) {
                callback();
            }
            else {
                callback(`只能输入${min}-${max}个字符`);
            }
        },
        // 分页操作按钮
        handleOnShowSizeChange(current, pageSize) {
            this.tablePag = {
                page: current,
                size: pageSize
            };
            this.handleInitTable();
        },
        // 编辑按钮操作
        handleEditTable(list) {
            this.addType = 'edit';
            this.policyOperationStatus = true;
            this.queryByIdList = list;
            let changeProductName = [];
            this.queryByIdList.policyProductName.forEach(item => {
                const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
                changeProductName.push({
                    id: randomNum,
                    value: item
                });
            });
            const originChange = {
                defaultFormList: changeProductName,
                addTimes: [list.policyStartDate, list.policyEndDate]
            };
            this.policyOperationForm = Object.assign({}, list, originChange);
        },
        // 新增政策按钮
        handleAddAccountPolicy() {
            this.addType = 'add';
            this.policyOperationForm.createUserId = this.saleShowOption[0].userId || '';
            this.policyOperationStatus = true;
        },
        // 新增政策确定按钮
        handlePolicyOperationSure() {
            const {companyName, advancePay, advertiserName, rebateType, mediaType, defaultFormList, addTimes, createUserId, areaInfo, companySubjectName, promotionType, groupAbbreviation, rebateRate, accountingPeriod, isDianPay, dianPayCompanyName, dianPayCompanyRebateRate, remarks, id} = this.policyOperationForm;
            const paramsData = {
                policyProductName: defaultFormList.map(item => item.value),
                policyStartDate: addTimes[0],
                policyEndDate: addTimes[1],
                companyName,
                advancePay,
                advertiserName,
                rebateType,
                mediaType,
                createUserId,
                areaInfo,
                companySubjectName,
                promotionType,
                groupAbbreviation,
                rebateRate,
                accountingPeriod,
                isDianPay,
                dianPayCompanyName,
                dianPayCompanyRebateRate,
                remarks,
                createUserName: this.saleShowOption[0].userName || ''
            };
            this.$refs.policyOperationForm.validate(valid => {
                if (valid) {
                    this.confirmLoading = true;
                    if (this.addType === 'add') {
                        this.handleAddSureBtn(paramsData, '/finance/cwjsPolicyInfo/add');
                    }
                    else {
                        this.handleAddSureBtn({...paramsData, id}, '/finance/cwjsPolicyInfo/edit');
                    }
                }
                else {
                    return false;
                }
            });
        },
        handleAddSureBtn(data, url) {
            postAction(urlAcount + url, data).then(result => {
                if (result.code === 200) {
                    this.$message.success(result.message);
                    this.handlePolicyOperationCancel();
                    this.handleInitTable();
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            }).finally(() => {
                this.confirmLoading = false;
            });
        },
        // 新增政策取消按钮
        handlePolicyOperationCancel() {
            this.policyOperationForm = {
                defaultFormList: [
                    {
                        id: 1,
                        value: ''
                    }
                ],
                companyName: '',
                advancePay: 0,
                advertiserName: '',
                rebateType: undefined,
                mediaType: 2,
                createUserId: undefined,
                areaInfo: undefined,
                companySubjectName: undefined,
                promotionType: 1,
                groupAbbreviation: '',
                rebateRate: '',
                accountingPeriod: '',
                isDianPay: 0,
                dianPayCompanyName: '',
                dianPayCompanyRebateRate: '',
                addTimes: [],
                remarks: ''
            },
            this.policyOperationStatus = false;
        },
        // 审核拒绝确定按钮
        handleRejectSure() {
            this.$refs.rejectRuleForm.validate(valid => {
                if (valid) {
                    const params = {
                        id: this.tableOnlyId || this.queryByIdList.id,
                        type: 3,
                        value: this.reasonForm.desc
                    };
                    this.handleExamineAll(params);
                    this.handleRejectCancel();
                }
                else {
                    return false;
                }
            });
        },
        // 审核拒绝取消按钮
        handleRejectCancel() {
            this.reasonForm.desc = '';
            this.rejectAuditStatus = false;
        },
        // 查看的按钮
        handleDetail(list) {
            this.auditPolicyStatus = true;
            this.queryByIdList = list;
        },
        // 查看的取消按钮
        handleCloseAuditPolicy() {
            this.auditPolicyStatus = false;
        },
        // 查看-审核政策-审核通过-按钮
        handleAuditSure(list) {
            let that = this;
            this.$confirm({
                title: '提示',
                content: '确认该政策审核通过',
                onOk() {
                    const params = {
                        id: list.id || that.queryByIdList.id,
                        type: 2,
                        value: ''
                    };
                    that.handleExamineAll(params);
                }
            });
        },
        // 查看-审核政策-审核拒绝-按钮
        handleAuditCancel(data) {
            this.rejectAuditStatus = true;
            this.tableOnlyId = data.id;
        },
        // 提交审核弹窗
        handleSubmitReview(list) {
            let that = this;
            this.$confirm({
                title: '提示',
                content: '是否确认重新提交政策审核',
                onOk() {
                    const params = {
                        id: list.id,
                        type: 1,
                        value: ''
                    };
                    that.handleExamineAll(params);
                }
            });
        },
        // 被拒理由的操作
        handleRejectionReason(val) {
            this.rejectionReasonList = val;
            this.rejectionReasonStatus = true;
        },
        // 被拒理由确定按钮
        handleModeSure() {
            this.rejectionReasonStatus = false;
        },
        // 被拒理由取消按钮
        handleModeCancel() {
            this.rejectionReasonStatus = false;
        },
        // 搜索按钮
        handleQueryList() {
            this.tablePag = {
                page: 1,
                size: 10
            };
            this.handleInitTable();
        },
        // 重置搜索
        handleResetList() {
            this.configForm = {
                companyName: undefined,
                adverName: undefined,
                productName: undefined,
                creativeMedia: 'no',
                creativeRebate: 'no',
                creativeAdvance: undefined,
                creativeSale: undefined,
                creativeOperate: 'no',
                time: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
                searchStatus: 'no'
            };
            this.tablePag = {
                page: 1,
                size: 10
            };
            this.handleInitTable();
        }
    }
};
</script>
<style lang="less" scoped>
    @import "policy-management";
</style>
