<style scoped>
::v-deep .ant-steps-dot .ant-steps-item-content {
    width: auto;
}
::v-deep .ant-steps-dot .ant-steps-item-active .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    background: rgb(11, 190, 135);
    width: 15px;
    height: 15px;
    /* margin-top: 5px; */
    margin-left: 2px;
}
::v-deep .endStatus .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    background: #1890ff !important;
    width: 15px;
    height: 15px;
    /* margin-top: 5px; */
    /* margin-left: 2px; */
}
::v-deep .ant-steps-dot .ant-steps-item-icon {
    width: 15px;
    height: 15px;
    margin-top: 5px;
    margin-left: -4px;
}
</style>
<template>
    <div class="policy-management-content">
        <div class="control-con-title">
            <div>
                <span class="policy-export-btn">报销记录</span>
            </div>
            <div>
                <span class="add-acount-policy-btn">
                    <a-button @click="handleAddSale">快递信息</a-button>
                </span>
                <span class="add-acount-policy-btn">
                    <a-button @click="exportPolicy" :loading="exportLoading">报销导出</a-button>
                </span>
                <span 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-select
                            v-model="configForm.companyId"
                            style="width: 200px; margin-left: 10px"
                            :filterOption="filterOption"
                            showSearch
                            allowClear
                        >
                            <a-select-option
                                v-for="(item, index) in dataDimensionList"
                                :key="index + 1"
                                :value="item.companyId"
                            >
                                {{ item.companyName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="人员名称：" :colon="false">
                        <a-input v-model="configForm.userName" placeholder="请输入人员名称" allow-clear />
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="媒体：" :colon="false">
                        <a-select
                            v-model="configForm.media"
                            style="width: 200px; margin-left: 10px"
                            :filterOption="filterOption"
                            showSearch
                            allowClear
                            placeholder="请选择媒体"
                        >
                            <a-select-option value="快手"> 快手 </a-select-option>
                            <a-select-option value="聚星"> 聚星 </a-select-option>
                            <a-select-option value="磁力金牛"> 磁力金牛 </a-select-option>
                            <a-select-option value="头条"> 头条 </a-select-option>
                            <a-select-option value="头条千川"> 头条千川 </a-select-option>
                            <a-select-option value="公共费用"> 公共费用 </a-select-option>

                            <a-select-option value="快手服务商"> 快手服务商 </a-select-option>
                            <a-select-option value="货盘"> 货盘 </a-select-option>
                            <a-select-option value="素造"> 素造 </a-select-option>
                            <a-select-option value="管理职能"> 管理职能 </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="部门：" :colon="false">
                        <j-tree-select
                            v-model="configForm.departId"
                            placeholder="请选择部门"
                            dict="sys_depart,depart_name,id"
                            pidField="parent_id"
                            style="width: 200px; margin-left: 10px"
                        >
                        </j-tree-select>
                    </a-form-item>

                    <a-form-item class="grid-form-item" label="报销类别：" :colon="false">
                        <a-select
                            v-model="configForm.type"
                            style="width: 200px; margin-left: 10px"
                            :filterOption="filterOption"
                            showSearch
                            allowClear
                            placeholder="请选择报销类别"
                        >
                            <a-select-option value="报销"> 报销 </a-select-option>
                            <a-select-option value="核销备用金"> 核销备用金 </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="申请时间：" :colon="false">
                        <el-date-picker
                            v-model="configForm.time"
                            type="monthrange"
                            range-separator="~"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                        >
                        </el-date-picker>
                    </a-form-item>

                    <a-form-item label="状态：">
                        <a-select v-model="configForm.status" 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"
            >
                <span slot="status" slot-scope="text, records">
                    <a @click="showLog(records)">{{
                        text === '1'
                            ? '待审核'
                            : text === '2'
                            ? '审核通过'
                            : text === '3'
                            ? '审核拒绝'
                            : text === '4'
                            ? '审核中'
                            : text === '5'
                            ? '部分拒绝'
                            : '-'
                    }}</a>
                </span>
                <span slot="amount" slot-scope="text,record">
                    {{(+text).toFixed(2)}}
                </span>
                <span slot="lookImage" slot-scope="text, record">
                    <a @click="lookImageClick(record)">查看</a>
                </span>
                <span slot="action" slot-scope="text, record">
                    <a @click="handleSubmitReview(record)">查看</a>
                    <a-divider
                        type="vertical"
                        v-if="record.userId == userInfo().id && (record.status == '3' || record.status == '5')"
                    />
                    <!-- record.status == '1' ||  -->
                    <a
                        @click="handleSubmitEdit(record)"
                        v-if="record.userId == userInfo().id && (record.status == '3' || record.status == '5')"
                        >编辑</a
                    >
                    <!-- <a-divider type="vertical" v-if="record.userId == userInfo().id && record.status == '1'" />
                    <a
                        @click="handleSubmitEditStatus(record)"
                        v-if="record.userId == userInfo().id && record.status == '1'"
                        >提交审核</a
                    > -->
                </span>
            </a-table>
            <a-pagination
                class="pagin-table-class"
                :total="totalAll"
                :show-total="(total) => `共 ${totalAll} 条`"
                size="small"
                show-size-changer
                show-quick-jumper
                v-model="tablePag.page"
                @change="handleOnShowSizeChange"
                @showSizeChange="handleOnShowSizeChange"
            />
        </div>

        <a-modal
            v-if="lookImageVisible"
            title="查看图片"
            :visible="lookImageVisible"
            :footer="null"
            @cancel="lookImageVisible = false"
        >
            <a-carousel arrows v-if="lookImageData">
                <div v-for="(item, index) in lookImageData" :key="index" class="content">
                    <div style="display: flex !important; justify-content: space-around">
                        <div style="display: flex; flex-direction: column; align-items: center; width: 500px">
                            <img :src="item" style="width: 100%" />
                        </div>
                    </div>
                </div>
                <a-icon
                    type="left-circle"
                    slot="prevArrow"
                    slot-scope
                    style="left: 10px; z-index: 100; font-size: 30px; color: black"
                />
                <a-icon
                    type="right-circle"
                    slot="nextArrow"
                    slot-scope
                    style="right: 10px; z-index: 100; font-size: 30px; color: black"
                />
            </a-carousel>
            <!-- <div v-if="lookImageData">
                <img
                    :src="item"
                    v-for="(item, index) in lookImageData"
                    @click="lookBig(item)"
                    alt=""
                    style="width: 150px"
                />
            </div> -->
        </a-modal>

        <!-- 被拒理由 -->
        <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" style="overflow: auto">{{ 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"
            v-dialog-drag
        >
            <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-else">{{ queryByIdList.companyName || '-' }}</span>
                        </div>
                        <div class="policy-line-left">
                            <span class="line-left-spn">广告主：</span>
                            <span class="line-right-spn-else">{{ 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.saleName }}</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-else">{{ 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-else">{{ 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.customerFlag === 0 ? '否' : '是' }}</span>
                        </div>
                        <div class="policy-line-right">
                            <span class="line-left-spn">备注：</span>
                            <span class="line-right-spn-else">{{ queryByIdList.remarks || '-' }}</span>
                        </div>
                        <div class="policy-line-right" v-if="queryByIdList.theForwardingBossContent">
                            <span class="line-left-spn">转审原因：</span>
                            <span class="line-right-spn-else">{{ queryByIdList.theForwardingBossContent || '-' }}</span>
                        </div>
                        <div class="policy-line-right" v-if="queryByIdList.theBossContent">
                            <span class="line-left-spn">老板审核意见：</span>
                            <span class="line-right-spn-else">{{ queryByIdList.theBossContent || '-' }}</span>
                        </div>
                    </div>
                </div>
                <div solt="footer" class="audit-policy-footer" style="justify-content: flex-end">
                    <div v-if="queryByIdList.theBossRight == 'yes'">
                        <a-button type="primary" @click="toLeader" class="cancel-btn">转领导审批</a-button>
                    </div>
                    <div v-if="queryByIdList.updateOperation.includes('审核拒绝')">
                        <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="
                userInfo().roleName != '法务' ? (userInfo().roleName == '管理员' ? '审核' : '审核不通过') : '法务审核'
            "
            dialog-class="rejection-reason-class"
            :visible="rejectAuditStatus"
            @ok="handleRejectSure"
            @cancel="handleRejectCancel"
        >
            <div>
                <!-- :rules="reasonRules" -->
                <div class="reason-class-header">
                    请输入{{
                        userInfo().roleName != '法务'
                            ? userInfo().roleName == '管理员'
                                ? '审核理由'
                                : '审核不通过的理由'
                            : '风控建议'
                    }}:
                </div>
                <a-form-model
                    ref="rejectRuleForm"
                    :model="reasonForm"
                    :rules="
                        this.okType == 3
                            ? userInfo().roleName != '法务'
                                ? reasonRules
                                : reasonRulesFawu
                            : reasonRulesTongguo
                    "
                >
                    <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="toLeaderVisible"
            title="推送领导审核原因"
            dialog-class="rejection-reason-class"
            :visible="toLeaderVisible"
            @ok="handleLeader"
            @cancel="handleRejectCancel"
        >
            <div>
                <div class="reason-class-header">请输入领导审核原因:</div>
                <a-form-model
                    ref="rejectRuleForm"
                    :model="reasonForm"
                    :rules="this.okType == 3 ? reasonRulesLeader : reasonRulesTongguo"
                >
                    <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="voidOperationStatus"
            title="政策作废"
            dialog-class="rejection-reason-class"
            :visible="voidOperationStatus"
            @ok="handleVoidOk"
            @cancel="
                voidOperationStatus = false
                reasonForm.desc = ''
            "
        >
            <div>
                <div class="reason-class-header" style="color: red; font-size: 20px; font-weight: bold">
                    是否将该条政策作废，一经作废不可恢复！
                </div>
                <a-form-model ref="rejectRuleForm" :model="reasonForm" :rules="reasonRulesVoid">
                    <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-option :value="3">千川</a-select-option>
                                <a-select-option :value="4">UD</a-select-option>
                                <a-select-option :value="5">阿里内广</a-select-option>
                                <a-select-option :value="6">快手服务商</a-select-option>
                                <a-select-option :value="7">磁力金牛</a-select-option>
                                <a-select-option :value="8">头条内广</a-select-option>
                                <a-select-option :value="9">广点通</a-select-option>
                                <a-select-option :value="10">磁力聚星</a-select-option>
                                <a-select-option :value="12">小红书</a-select-option>
                                <a-select-option :value="13">b站</a-select-option>
                                <a-select-option :value="14">快手金教</a-select-option>
                                <a-select-option :value="15">阿里UC</a-select-option>
                                <a-select-option :value="16">腾讯</a-select-option>

                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="销售" prop="saleId">
                            <!-- @change="showAreaInfo" -->
                            <a-select
                                v-model="policyOperationForm.saleId"
                                style="width: 100px"
                                show-search
                                allow-clear
                                :filter-option="handleFilterOption"
                            >
                                <a-select-option v-for="item in saleShowOption" :key="item.saleId" :value="item.saleId">
                                    {{ item.saleName }}
                                </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>
                            <!-- {{policyOperationForm.areaInfo}} -->
                        </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="集团简称" prop="groupAbbreviation">
                                <a-input
                                    v-model="policyOperationForm.groupAbbreviation"
                                    placeholder="请输入集团简称"
                                    allow-clear
                                />
                            </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-option :value="3">服务费</a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item
                            :label="policyOperationForm.rebateType == 3 ? '服务费' : '返点比例'"
                            prop="rebateRate"
                            :rules="{
                                required: true,
                                message: policyOperationForm.rebateType == 3 ? '请输入服务费比例' : '请输入返点比例',
                                trigger: 'blur',
                            }"
                        >
                            <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="是否老客户" prop="isDianPay">
                            <a-radio-group v-model="policyOperationForm.customerFlag" button-style="solid">
                                <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="remarks">
                            <a-input
                                v-model="policyOperationForm.remarks"
                                placeholder="请输入备注"
                                allow-clear
                                @change="handleRemarksChange"
                            />
                        </a-form-model-item>
                    </a-row>
                </a-form-model>
            </div>
        </a-modal>

        <!-- 快递信息 -->
        <a-modal
            v-if="saleVisible"
            title="快递信息"
            :visible="saleVisible"
            @cancel="handleSaleCancel"
            :width="1300"
            :footer="null"
        >
            <a-form class="grid-form" layout="inline" :form="expressForm" hide-required-mark>
                <a-row class="grid-form-options">
                    <a-form-item class="grid-form-item" label="人员：" :colon="false">
                        <a-input v-model="express.userName" placeholder="请输入人员名称" allow-clear />
                    </a-form-item>
                    <a-form-item class="grid-form-item" label="时间：" :colon="false">
                        <a-month-picker v-model="express.time" format="YYYY-MM" />
                    </a-form-item>
                    <a-form-item class="form-handle-btn">
                        <a-button type="default" style="margin-right: 15px" @click="handleResetList">重置</a-button>
                        <a-button type="primary" @click="handleExoress">搜索</a-button>
                    </a-form-item>
                </a-row>
            </a-form>
            <a-button type="primary" style="margin-bottom: 10px; margin-right: 15px" id="mybtn" @click="addSaleInfo"
                >新增</a-button
            >
            <a-upload
                name="file"
                :multiple="false"
                :action="uploadAction"
                :headers="tokenHeader"
                :file-list="fileList"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="handleChange"
                style="margin-right: 20px"
            >
                <a-button>
                    <a-icon type="upload" />
                    {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
                </a-button>
            </a-upload>
            <a-table
                :columns="saleInfoColumns"
                :data-source="saleInfoList"
                bordered
                tableLayout="auto"
                :pagination="false"
                :loading="saleLoading"
                style="word-break: break-all"
            >
                <div slot="statDate" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-date-picker v-model:value="records.statDates" v-else format="YYYY-MM-DD" />
                </div>
                <div slot="expressNumber" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-input v-model="records.expressNumbers" placeholder="请输入快递单号" allow-clear v-else />
                </div>
                <div slot="userName" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-input v-model="records.userNames" placeholder="请输入人员名称" allow-clear v-else />
                </div>
                <div slot="remarks" slot-scope="text, records">
                    <span v-if="!records.edit">{{ text }}</span>
                    <a-input v-model="records.remarkss" placeholder="请输入备注" allow-clear 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.id)">
                            <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="logVisible"
            title="操作记录"
            :visible="logVisible"
            @cancel="logVisible = false"
            :footer="null"
            v-dialog-drag
        >
            <div style="height: 400px; overflow: auto; padding: 15px">
                <a-steps progress-dot direction="vertical" v-model="logActive" style="width: 100%" disbaled>
                    <a-step
                        :title="`${item.roleName}(${item.userName})${
                            item.state == '0'
                                ? '创建'
                                : item.state == '1'
                                ? '通过'
                                : item.state == '2'
                                ? '拒绝'
                                : item.state == '3'
                                ? '待审核'
                                : item.state == '4'
                                ? '未审核'
                                : item.state == '5'
                                ? '修改'
                                : '-'
                        }`"
                        :description="`${item.statTime}`"
                        v-for="(item, index) in logList"
                        :key="index"
                        disabled
                        :class="{ endStatus: logStatus == 3 }"
                    />
                </a-steps>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, downFile } from '@/api/manage'
import { mapGetters } from 'vuex'
import { urlAcount } from './policy-management-server.js'
const fileSuffix = ['xlsx', 'xls']
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import { defineComponent, ref } from 'vue'
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 {
            uploadAction: '/jeecg-boot/reimburse/express/importExcel',
            tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
            fileList: [],
            express: {
                userName: undefined,
                time: null,
            },
            expressForm: this.$form.createForm(this),
            mode2: ['month', 'month'],
            confirmLoading: false,
            controlLoading: false,
            logVisible: false,
            logStatus: 0,
            logActive: 2,
            logList: [],
            allSaleListOption: [],
            dataDimensionList: [],
            creativeMediaOptions: [
                {
                    id: 'no',
                    name: '不限',
                },
                {
                    id: 1,
                    name: '头条',
                },
                {
                    id: 2,
                    name: '快手',
                },
                {
                    id: 3,
                    name: '千川',
                },
                {
                    id: 4,
                    name: 'UD',
                },
                {
                    id: 5,
                    name: '阿里内广',
                },
                {
                    id: 6,
                    name: '快手服务商',
                },
                {
                    id: 7,
                    name: '磁力金牛',
                },
                {
                    id: 8,
                    name: '头条内广',
                },
                {
                    id: 9,
                    name: '广点通',
                },
                {
                    id: 10,
                    name: '磁力聚星',
                },
                {
                    id: 12,
                    name: '小红书'
                },
                {
                    id: 13,
                    name: 'b站'
                },
                {
                    id: 14,
                    name: '快手金教'
                },
                {
                    id: 15,
                    name: '阿里UC'
                },
                {
                    id: 16,
                    name: '腾讯'
                },
            ],
            creativeRebateOptions: [
                {
                    id: 'no',
                    name: '不限',
                },
                {
                    id: 0,
                    name: '返现',
                },
                {
                    id: 1,
                    name: '返货',
                },
                {
                    id: 2,
                    name: '返现+返货',
                },
                {
                    id: 3,
                    name: '服务费',
                },
            ],
            searchStatusOptions: [
                {
                    id: 1,
                    name: '待审核',
                },
                {
                    id: 2,
                    name: '审核通过',
                },
                {
                    id: 3,
                    name: '审核拒绝',
                },
                {
                    id: 4,
                    name: '审核中',
                },
                {
                    id: 5,
                    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,
            voidOperationStatus: false,
            totalAll: 0,
            policyOperationForm: {
                defaultFormList: [
                    {
                        id: 1,
                        value: '',
                    },
                ],
                customerFlag: 0,
                companyName: '',
                advancePay: 0,
                advertiserName: '',
                rebateType: undefined,
                mediaType: 2,
                saleId: undefined,
                areaInfo: undefined,
                companySubjectName: undefined,
                promotionType: 1,
                groupAbbreviation: '',
                rebateRate: '',
                accountingPeriod: '',
                isDianPay: 0,
                dianPayCompanyName: '',
                dianPayCompanyRebateRate: '',
                addTimes: [],
                remarks: '',
            },
            voidId: undefined,
            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' }],
                saleId: [{ required: true, message: '请选择所属销售', trigger: 'change' }],
                areaInfo: [{ required: true, message: '请选择区域', trigger: 'change' }],
                companySubjectName: [{ required: true, message: '请选择我司主体', trigger: 'change' }],
                rebateRate: [{ required: true, message: '请输入返点比例', trigger: 'blur' }],
                rebateRateElse: [{ 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' }],
                remarks: [{ min: 0, max: 200, message: '只能输入200个汉字', trigger: 'blur' }],
                groupAbbreviation: [{ min: 0, max: 30, message: '只能输入30个汉字', trigger: 'blur' }],
            },
            reasonRules: {
                desc: [
                    { required: true, message: '请输入审核拒绝理由', trigger: 'blur' },
                    { min: 5, max: 100, message: '请输入5-100个字符', trigger: 'blur' },
                ],
            },
            reasonRulesFawu: {
                desc: [
                    { required: true, message: '请输入风控建议', trigger: 'blur' },
                    { min: 5, max: 500, message: '请输入5-500个字符', trigger: 'blur' },
                ],
            },
            reasonRulesLeader: {
                desc: [
                    { required: true, message: '请输入推送领导审核理由', trigger: 'blur' },
                    { min: 5, max: 100, message: '请输入5-100个字符', trigger: 'blur' },
                ],
            },
            reasonRulesTongguo: {
                desc: [
                    { required: false, message: '', trigger: 'blur' },
                    { min: 5, max: 500, message: '请输入5-500个字符', trigger: 'blur' },
                ],
            },
            reasonRulesVoid: {
                desc: [
                    { required: true, message: '请输入推送作废理由', trigger: 'blur' },
                    { min: 5, max: 100, message: '请输入5-100个字符', trigger: 'blur' },
                ],
            },
            dataSource: [],
            okType: 3,
            columns: [
                {
                    title: '报销单号',
                    align: 'center',
                    dataIndex: 'id',
                    width: 180,
                },
                {
                    title: '公司主体',
                    align: 'center',
                    dataIndex: 'companyName',
                    width: 180,
                },
                {
                    title: '媒体',
                    align: 'center',
                    dataIndex: 'media',
                    width: 100,
                    scopedSlots: { customRender: 'media' },
                },
                {
                    title: '部门',
                    align: 'center',
                    dataIndex: 'departName',
                    ellipsis: true,
                    width: 100,
                    scopedSlots: { customRender: 'departName' },
                },
                {
                    title: '申请人',
                    dataIndex: 'userName',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '报销类别',
                    dataIndex: 'type',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '申请时间',
                    dataIndex: 'statDate',
                    align: 'center',
                    scopedSlots: { customRender: 'statDate' },
                },
                {
                    title: '金额',
                    dataIndex: 'amount',
                    align: 'center',
                    scopedSlots: { customRender: 'amount' },
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    align: 'center',
                    scopedSlots: { customRender: 'status' },
                },
                {
                    title: '附件',
                    align: 'center',
                    dataIndex: 'lookImage',
                    scopedSlots: { customRender: 'lookImage' },
                },

                // {
                //     title: '备注',
                //     align: 'center',
                //     dataIndex: 'remarks',
                //     width: 190,
                //     scopedSlots: { customRender: 'remarks' },
                // },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: 250,
                    fixed: 'right',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            configForm: {
                companyId: undefined,
                userName: undefined,
                media: undefined,
                departId: undefined,
                time: [],
                status: undefined,
                type: undefined,
            },
            tablePag: {
                page: 1,
                size: 10,
            },
            addAreaList: [],
            saleShowOption: [],
            addSubjectList: [],
            rejectionReasonList: {},
            tableOnlyId: '',
            saleVisible: false,
            saleInfoList: [],
            salePersonList: [],
            saleLoading: false,
            saleInfoColumns: [
                {
                    title: '日期',
                    dataIndex: 'statDate',
                    align: 'center',
                    key: 'statDate',
                    scopedSlots: { customRender: 'statDate' },
                },
                {
                    title: '快递单号',
                    dataIndex: 'expressNumber',
                    align: 'center',
                    scopedSlots: { customRender: 'expressNumber' },
                },
                {
                    title: '收件人',
                    dataIndex: 'userName',
                    align: 'center',
                    scopedSlots: { customRender: 'userName' },
                },
                {
                    title: '备注',
                    dataIndex: 'remarks',
                    align: 'center',
                    scopedSlots: { customRender: 'remarks' },
                },

                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            ipagination: {
                current: 1,
                pageSize: 10,

                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.getSaleList()
                },
            },
            toLeaderVisible: false,
            exportLoading: false,
            lookImageVisible: false,
            lookImageData: null,
            searchForm: this.$form.createForm(this),
            loadDisabled: false,
        }
    },
    components: {
        JTreeSelect,
    },
    created() {},
    mounted() {
        this.getProjectList()
        this.handleInitTable()
        this.handleGetAllSaleList()
        this.handleAddGetArea()
    },
    methods: {
        ...mapGetters(['userInfo']),
        handleChange(info) {
            console.log(info)
            let fileList = [...info.fileList]

            // 1. Limit the number of uploaded files
            //    Only to show two recent uploaded files, and old ones will be replaced by the new
            fileList = fileList.slice(-2)

            // 2. read from response and show file link
            fileList = fileList.map((file) => {
                if (file.response) {
                    // Component will show file.url as link
                    file.url = file.response.url
                }
                return file
            })
            if (fileList.length > 0) {
                this.fileList = [
                    {
                        ...fileList[fileList.length - 1],
                    },
                ]
            } else {
                this.fileList = []
            }
            // this.loadDisabled = false
            // this.$message.success('文件导入成功，异步创建中，请稍后查看...')
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList)
            }
            if (info.file.status === 'done') {
                this.loadDisabled = false
                if (info.file.response.code == 200) {
                    this.application = true
                    this.$emit('getDataList')
                    this.$message.success(info.file.response.message)
                } else {
                    this.$message.error(info.file.response.message)
                }
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name}上传失败`)
                this.loadDisabled = false
            }

            // console.log(this.form)
        },
        beforeUpload(file) {
            this.loadDisabled = true
            const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
            const fileName = file.name
            const fileStrArr = fileName.split('.')
            const suffix = fileStrArr[fileStrArr.length - 1]

            let result = fileSuffix.some((item) => {
                return item === suffix
            })

            if (!result) {
                this.$message.error('不支持该文件类型')
                this.loadDisabled = false
                return false
            }
        },
        lookImageClick(item) {
            this.getAction('/reimburse/project/queryByApplyId?applyId=' + item.id).then((res) => {
                if (res.success) {
                    this.lookImageVisible = true
                    this.lookImageData = res.result
                } else {
                    this.$message.error('无可展示附件')
                }
            })
        },
        getProjectList() {
            return new Promise((resolve, reject) => {
                this.getAction('/reimburse/apply/getCompanyList').then((res) => {
                    if (res.success) {
                        this.dataDimensionList = res.result
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        exportPolicy() {
            this.exportLoading = true
            const paramsData = {
                userId: this.userInfo().id,
                companyId: this.configForm.companyId,
                userName: this.configForm.userName,
                media: this.configForm.media,
                departId: this.configForm.departId,
                status: this.configForm.status,
                type: this.configForm.type,
                startDate:
                    this.configForm.time && this.configForm.time.length == 2
                        ? moment(this.configForm.time[0]).format('YYYY-MM')
                        : null,
                endDate:
                    this.configForm.time && this.configForm.time.length == 2
                        ? moment(this.configForm.time[1]).format('YYYY-MM')
                        : null,
                pageNo: this.tablePag.page,
                pageSize: this.tablePag.size,
            }
            downFile('/reimburse/apply/excel', paramsData).then((res) => {
                // console.log(res)
                this.exportLoading = false
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                })
                // console.log(blob)
                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对象
            })
        },
        moment,
        toLeader() {
            // this.queryByIdList
            this.toLeaderVisible = true
        },
        handleCurrey(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.ipagination.pageSize = pageSize
            this.getSaleList()
        },
        //新建快递信息
        handleAddSale() {
            this.ipagination.current = 1
            this.saleVisible = true
            this.getSaleList()
            this.getSalePersonList()
        },
        getSalePersonList() {
            let params = {}
            params.userId = this.userInfo().id

            this.getAction(urlAcount + '/finance/cwjsSaleAssistantInfo/getSaleListByUserDepart', params)
                .then((result) => {
                    if (result.success) {
                        this.salePersonList = result.result.map((item) => {
                            return {
                                key: item.saleId,
                                label: item.saleName,
                            }
                        })
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(() => {})
        },
        //新增
        addSaleInfo() {
            this.saleInfoList.push({
                expressNumbers: undefined,
                expressNumber: undefined,
                userName: undefined,
                userNames: undefined,
                remarks: undefined,
                remarkss: undefined,
                statDate: moment().format('YYYY-MM-DD'),
                statDates: moment().format('YYYY-MM-DD'),
                edit: true,
            })
        },
        handleExoress() {
            this.ipagination.current = 1
            this.getSaleList()
        },
        //获取销售对应列表
        getSaleList() {
            let params = {}
            params.userId = this.userInfo().id
            params.userName = this.express.userName
            params.statDate = !!this.express.time ? moment(this.express.time).format('YYYY-MM') : null
            params.pageNo = this.ipagination.current
            params.pageSize = this.ipagination.pageSize
            this.saleLoading = true
            this.getAction('/reimburse/express/list', params)
                .then((result) => {
                    this.saleLoading = false
                    if (result.success) {
                        this.saleInfoList =
                            result.result.records.map((item) => {
                                return {
                                    ...item,
                                    edit: false,
                                    expressNumbers: undefined,
                                    statDates: undefined,
                                    userNames: undefined,
                                    remarkss: undefined,
                                }
                            }) || []
                        this.ipagination.total = result.result.total || 0
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(() => {})
        },
        //编辑快递信息按钮
        handleEdit(item) {
            item.edit = true
            item.expressNumbers = item.expressNumber
            item.userNames = item.userName
            item.remarkss = item.remarks
            item.statDates = moment(item.statDate).format('YYYY-MM-DD')
        },
        //删除快递信息按钮
        handleDelete(id) {
            let params = {}
            params.id = id
            this.getAction('/reimburse/express/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.userNames) {
                let params = {}
                params.id = item.id ? item.id : null
                params.userName = item.userNames
                params.expressNumber = item.expressNumbers
                params.remarks = item.remarkss
                params.statDate = moment(item.statDates).format('YYYY-MM-DD')
                if (item.id) {
                    this.postDataAction('/reimburse/express/edit', params).then((result) => {
                        if (result.success) {
                            this.getSaleList()
                        } else {
                            this.$message.error(result.message)
                        }
                    })
                } else {
                    this.postDataAction('/reimburse/express/add', params).then((result) => {
                        if (result.success) {
                            this.getSaleList()
                        } else {
                            this.$message.error(result.message)
                        }
                    })
                }
            } else {
                this.$message.error('请选择人员')
            }
        },
        //快递信息取消确定按钮
        handleSaleCancelOne(item) {
            if (item.id) {
                item.edit = false
            } else {
                this.saleInfoList.pop()
            }
        },
        //快递信息取消按钮
        handleSaleCancel() {
            this.saleVisible = false
        },

        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
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        handleAddTimesChange(date, dateString) {
            this.policyOperationForm.addTimes = dateString
        },
        showAreaInfo(data) {
            if (data) {
                var dataShow = this.saleShowOption.filter((item) => {
                    return item.saleId == data
                })
                this.policyOperationForm.areaInfo = dataShow[0].nickName
            } else {
                this.policyOperationForm.areaInfo = undefined
            }
        },
        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.map((item) => {
                            return {
                                saleId: item.userId,
                                saleName: item.userName,
                            }
                        })
                        this.addAreaList = defaultList[0].nickName.split(',')
                        this.addSubjectList = result.result[0].companySubjects
                        getAction(urlAcount + '/finance/cwjsSaleAssistantInfo/getCwSaleAndAssistantList', paramsData)
                            .then((result) => {
                                if (result.code === 0) {
                                    for (let i = 0; i < result.result.length; i++) {
                                        if (this.saleShowOption[0].saleId == result.result[i].saleId) {
                                        } else {
                                            this.saleShowOption.push(result.result[i])
                                        }
                                    }
                                } else {
                                    this.$message.error(result.message)
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'eeee')
                            })
                    } 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,
            }
            this.postDataAction(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/cwjsSaleAssistantInfo/getSaleListByUserDepart', paramsData)
                .then((result) => {
                    if (result.success) {
                        this.allSaleListOption = result.result || []
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    console.log(error, 'eeee')
                })
        },
        showLog(item) {
            this.logVisible = true
            this.logStatus = item.approvedStatus
            getAction('/reimburse/apply/queryProcess', { id: item.id })
                .then((result) => {
                    if (result.code === 200) {
                        this.logList = result.result
                        this.logActive = this.logList.length - 1
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    console.log(error, 'eeee')
                })
                .finally(() => {})
        },
        // 获取默认的列表数据
        handleInitTable() {
            this.controlLoading = true
            const paramsData = {
                userId: this.userInfo().id,
                userId: this.userInfo().id,
                companyId: this.configForm.companyId,
                userName: this.configForm.userName,
                media: this.configForm.media,
                departId: this.configForm.departId,
                status: this.configForm.status,
                type: this.configForm.type,
                startDate:
                    this.configForm.time && this.configForm.time.length == 2
                        ? moment(this.configForm.time[0]).format('YYYY-MM')
                        : null,
                endDate:
                    this.configForm.time && this.configForm.time.length == 2
                        ? moment(this.configForm.time[1]).format('YYYY-MM')
                        : null,
                pageNo: this.tablePag.page,
                pageSize: this.tablePag.size,
            }
            getAction('/reimburse/apply/list', paramsData)
                .then((result) => {
                    if (result.success == true) {
                        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.tablePag.page = 1
                        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 <= 500) {
                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()
        },
        //作废操作
        handleVoid(list) {
            this.voidOperationStatus = true
            this.voidId = list.id
        },
        // 编辑按钮操作
        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.$router.replace({
                path: '/policy-management/reimbursementAdd?type=add',
            })
        },
        // 新增政策确定按钮
        handlePolicyOperationSure() {
            const {
                companyName,
                advancePay,
                advertiserName,
                rebateType,
                mediaType,
                defaultFormList,
                customerFlag,
                addTimes,
                saleId,
                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],
                saleId,
                companyName,
                advancePay,
                advertiserName,
                rebateType,
                mediaType,
                createUserId: this.userInfo().id,
                customerFlag,
                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,
                saleId: undefined,
                areaInfo: undefined,
                companySubjectName: undefined,
                promotionType: 1,
                groupAbbreviation: '',
                rebateRate: '',
                accountingPeriod: '',
                isDianPay: 0,
                dianPayCompanyName: '',
                dianPayCompanyRebateRate: '',
                addTimes: [],
                remarks: '',
                customerFlag: 0,
            }),
                (this.policyOperationStatus = false)
        },
        // 审核拒绝确定按钮
        handleRejectSure() {
            this.$refs.rejectRuleForm.validate((valid) => {
                console.log(valid)
                if (valid) {
                    const params = {
                        id: this.tableOnlyId || this.queryByIdList.id,
                        type: this.okType,
                        value: this.reasonForm.desc,
                    }
                    this.handleExamineAll(params)
                    this.handleRejectCancel()
                } else {
                    return false
                }
            })
        },
        //领导审核理由
        handleVoidOk() {
            this.$refs.rejectRuleForm.validate((valid) => {
                if (valid) {
                    const params = {
                        policyId: this.voidId,
                        delReason: this.reasonForm.desc,
                    }

                    getAction(urlAcount + '/finance/cwjsPolicyInfo/toVoidpolicy', params)
                        .then((result) => {
                            if (result.code === 0) {
                                this.voidOperationStatus = false
                                this.reasonForm.desc = undefined
                                this.handleInitTable()
                            } else {
                                this.$message.error(result.message)
                            }
                        })
                        .catch((error) => {
                            console.log(error, 'eeee')
                        })
                        .finally(() => {
                            this.voidOperationStatus = false
                        })
                } else {
                    return false
                }
            })
        },
        //领导审核理由
        handleLeader() {
            this.$refs.rejectRuleForm.validate((valid) => {
                if (valid) {
                    const params = {
                        id: this.tableOnlyId || this.queryByIdList.id,
                        type: 4,
                        value: this.reasonForm.desc,
                    }
                    this.handleExamineAll(params)
                    this.handleRejectCancel()
                } else {
                    return false
                }
            })
        },
        // 审核拒绝取消按钮
        handleRejectCancel() {
            this.okType = 3
            this.reasonForm.desc = ''
            this.rejectAuditStatus = false
            this.toLeaderVisible = false
        },
        // 查看的按钮
        handleDetail(list) {
            this.auditPolicyStatus = true
            this.queryByIdList = list
        },
        // 查看的取消按钮
        handleCloseAuditPolicy() {
            this.auditPolicyStatus = false
        },
        // 查看-审核政策-审核通过-按钮
        handleAuditSure(list) {
            if (this.userInfo().roleName == '法务' || this.userInfo().roleName == '管理员') {
                this.okType = 2
                this.rejectAuditStatus = true
                this.tableOnlyId = list.id
            } else {
                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.okType = 3
            this.rejectAuditStatus = true
            this.tableOnlyId = data.id
        },
        // 提交审核弹窗
        handleSubmitReview(list) {
            this.$router.replace({
                path:
                    '/policy-management/reimbursementAdd?type=look&person=' +
                    list.flag +
                    '&id=' +
                    list.id +
                    '&status=' +
                    list.status,
            })
        },
        handleSubmitEdit(list) {
            this.$router.replace({
                path: '/policy-management/reimbursementAdd?type=edit&id=' + list.id,
            })
        },
        handleSubmitEditStatus(item) {
            var params = {}
            // params.loginId = this.userInfo().id
            // params.userId = item.userId
            params.id = item.id
            // params.status = 4
            this.getAction('/reimburse/apply/submitReview', params).then((res) => {
                if (res.success) {
                    this.handleQueryList()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 被拒理由的操作
        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 = {
                companyId: undefined,
                userName: undefined,
                media: undefined,
                departId: undefined,
                time: [],
                status: undefined,
                type: undefined,
            }
            this.tablePag = {
                page: 1,
                size: 10,
            }
            this.handleInitTable()
        },
    },
}
</script>
<style lang="less" scoped>
@import 'policy-management';
</style>
