<template>
    <div class="app-container">
        <el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom: 10px">
            <div style="margin: 12px 0">
                没有查询到结算账户，请点击按钮创建结算账户
                <el-button size="medium" type="primary" @click="dialog = true">
                    创建结算账户
                </el-button>
            </div>
        </el-card>
        <template v-else>
            <el-card class="box-card" shadow="hover" style="margin: 20px 0" v-if="showAccountList">
                <h2>结算账户</h2>
                <hr />
                <el-descriptions :column="2" v-for="(item, index) in settleAccountList" :key="index">
                    <el-descriptions-item label="银行账户类型">{{
                        item.bankAcctType === "1" ? "对公" : "对私"
                    }}</el-descriptions-item>
                    <el-descriptions-item label="会员邮箱">{{
                        adapayCorpMember.email
                    }}</el-descriptions-item>
                    <el-descriptions-item label="公司地址">{{
                        adapayCorpMember.location
                    }}</el-descriptions-item>
                    <el-descriptions-item label="银行卡号">{{
                        item.cardId
                    }}</el-descriptions-item>
                    <el-descriptions-item label="银行卡对应的户名">{{
                        item.cardName
                    }}</el-descriptions-item>
                    <el-descriptions-item label="手机号">{{
                        item.telNo
                    }}</el-descriptions-item>
                    <el-descriptions-item label="银行编码">{{
                        item.bankCode
                    }}</el-descriptions-item>
                    <el-descriptions-item label="银行账户开户银行所在省份编码">{{ provCode(item.provCode) }}/
                        {{ areaCode(item.areaCode) }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </template>
        <el-dialog title="创建结算账户" :visible.sync="dialog" width="50%">
            <el-form :model="adapayCorpMember" :rules="dialogRules" ref="adapayCorpMember" label-width="220px">
                <el-form-item label="银行账户类型" prop="bankAcctType">
                    <el-radio-group v-model="adapayCorpMember.bankAcctType">
                        <el-radio label="1">对公</el-radio>
                        <el-radio label="2">对私</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="adapayCorpMember.bankAcctType === '1'">
                    <el-form-item label="企业名称" prop="name">
                        <el-input type="textarea" v-model="adapayCorpMember.name" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用码" prop="socialCreditCode">
                        <el-input v-model="adapayCorpMember.socialCreditCode" maxlength="18"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用证有效期">
                        <el-date-picker editable v-model="dataValue" type="date" placeholder="有效期格式为20190909"
                            format="yyyyMMdd" :disabled="dataDisabled" value-format="yyyyMMdd">
                        </el-date-picker>
                        <el-checkbox v-model="pickerChecked" @change="dataChange">长期</el-checkbox>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="businessScope">
                        <el-input type="textarea" v-model="adapayCorpMember.businessScope" maxlength="200"></el-input>
                    </el-form-item>
                    <el-form-item label="法人姓名" prop="legalPerson">
                        <el-input v-model="adapayCorpMember.legalPerson"></el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证号码" prop="legalCertId">
                        <el-input v-model="adapayCorpMember.legalCertId" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证有效期" prop="legalCertIdExpires">
                        <el-date-picker editable v-model="addLegalCertIdDate" type="date" placeholder="有效期格式为20190909"
                            format="yyyyMMdd" :disabled="addLegDisabled" value-format="yyyyMMdd">
                        </el-date-picker>
                        <el-checkbox v-model="legalCertIdChecked" @change="legalCertIdaChange">长期</el-checkbox>
                    </el-form-item>
                    <el-form-item label="法人手机号" prop="legalMp">
                        <el-input v-model="adapayCorpMember.legalMp"></el-input>
                    </el-form-item>
                    <el-form-item label="企业地址" prop="address">
                        <el-input v-model="adapayCorpMember.address"></el-input>
                    </el-form-item>
                    <el-form-item label="邮编">
                        <el-input v-model="adapayCorpMember.zipCode"></el-input>
                    </el-form-item>
                    <el-form-item label="企业电话">
                        <el-input v-model="adapayCorpMember.telphone"></el-input>
                    </el-form-item>
                    <el-form-item label="企业邮箱">
                        <el-input v-model="adapayCorpMember.email"></el-input>
                    </el-form-item>
                    <el-form-item label="上传法人身份证正面照">
                        <el-upload list-type="picture-card" :class="{ hide: uploadDisable }" :action="actionUrl"
                            :headers="headers" :on-success="idCardSuccess" :before-upload="beforeUpload"
                            :on-remove="idCardRemove" :file-list="idCardList" :limit="1" accept=".png,.jpg"
                            :on-exceed="idCardExceed">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件格式
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="上传法人身份证反面照">
                        <el-upload :class="{ hide: sideDisable }" :action="actionUrl" :headers="headers"
                            :on-success="sideCardSuccess" :before-upload="getBefore" :on-remove="sideCardRemove"
                            :file-list="sideCardList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                            :on-exceed="sideCardExceed">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件格式
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="上传开户银行许可证">
                        <el-upload :class="{ hide: depositBankDisable }" :action="actionUrl" :headers="headers"
                            :on-success="depositBankSuccess" :before-upload="beforeData" :on-remove="depositBankRemove"
                            :file-list="depositBankList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                            :on-exceed="depositBankExceed">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件格式
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="上传营业执照">
                        <el-upload :class="{ hide: businessDisable }" :action="actionUrl" :headers="headers"
                            :on-success="businessSuccess" :before-upload="beforeFormer" :on-remove="businessRemove"
                            :file-list="businessList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                            :on-exceed="businessExceed">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件格式
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="银行类型" prop="bankCode">
                        <el-select v-model="adapayCorpMember.bankCode" filterable placeholder="请选择">
                            <el-option v-for="item in bankList" :key="item.bankCode" :label="item.bankName"
                                :value="item.bankCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="cardNo">
                        <el-input v-model="adapayCorpMember.cardNo"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡对应的户名" prop="cardName">
                        <el-input v-model="adapayCorpMember.cardName"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账户开户银行所在省份编码" prop="provCode">
                        <el-cascader v-model="value" :options="options" @change="enterpriseChange"
                            :props="cateProps"></el-cascader>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="会员邮箱" prop="email">
                        <el-input v-model="adapayCorpMember.email"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="cardId">
                        <el-input v-model="adapayCorpMember.cardId"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡对应的户名" prop="cardName">
                        <el-input v-model="adapayCorpMember.cardName"></el-input>
                    </el-form-item>
                    <el-form-item v-if="adapayCorpMember.bankAcctType === '2'" label="证件号" prop="certId" :rules="adapayCorpMember.bankAcctType === '2'
                        ? dialogRules.certId
                        : [{ required: false }]
                        ">
                        <el-input v-model="adapayCorpMember.certId"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" prop="telNo">
                        <el-input v-model="adapayCorpMember.telNo"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" prop="location">
                        <!-- type="textarea" -->
                        <el-input v-model="adapayCorpMember.location"></el-input>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" @click="submitDialogForm('adapayCorpMember')">提交</el-button>
                    <el-button @click="resetForm('adapayCorpMember')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 对公 -->
        <el-card class="box-card" shadow="hover" style="padding: 20px" v-if="showAdapayCorp != null">
            <h2>对公结算账户</h2>
            <hr />
            <template v-if="adapayCorpMember.auditState === 'A'">
                <div class="status-card">
                    <div class="status-i">
                        <i class="el-icon-s-claim"></i>
                    </div>
                    <div class="status-txt">
                        <div style="line-height: 40px">
                            您已成功提交对公结算账号信息，请耐心等待！
                            <span style="color: #409eff; font-weight: bolder">（{{
                                auditStatus(adapayCorpMember.auditState)
                            }}）</span>
                        </div>
                    </div>
                </div>
                <h4>审核信息</h4>
                <el-form ref="form" :model="adapayCorpMember" label-width="120px">
                    <el-form-item label="企业名称：">
                        <div class="font-w">{{ adapayCorpMember.name }}</div>
                    </el-form-item>
                    <el-form-item label="审核状态：">
                        <div class="font-w">
                            {{ auditStatus(adapayCorpMember.auditState) }}
                        </div>
                    </el-form-item>
                    <el-form-item label="审核状态描述：">
                        <div class="font-w">
                            {{ adapayCorpMember.auditDesc }}
                        </div>
                    </el-form-item>
                </el-form>
            </template>
            <template v-if="adapayCorpMember.auditState === 'B'">
                <div class="status-card">
                    <div class="status-i">
                        <i class="el-icon-error"></i>
                    </div>
                    <div class="status-txt">
                        <div style="line-height: 40px">
                            当前对公结算账户信息审核失败，请点击新建按钮，重新填写信息再次进行审核
                            <span style="color: #409eff; font-weight: bolder">（{{
                                auditStatus(adapayCorpMember.auditState)
                            }}）</span>
                        </div>
                    </div>
                </div>
                <h4>审核信息</h4>
                <el-form ref="form" :model="adapayCorpMember" label-width="120px">
                    <el-form-item label="企业名称：">
                        <div class="font-w">{{ adapayCorpMember.name }}</div>
                    </el-form-item>
                    <el-form-item label="审核状态：">
                        <div class="font-w">
                            {{ auditStatus(adapayCorpMember.auditState) }}
                        </div>
                    </el-form-item>
                    <el-form-item label="审核状态描述：">
                        <div class="font-w">
                            {{ adapayCorpMember.auditDesc }}
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="dialog = true">新建</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-if="adapayCorpMember.auditState === 'E' || adapayCorpMember.auditState === 'D'">
                <div class="status-card">
                    <div class="status-i">
                        <i class="el-icon-success"></i>
                    </div>
                    <div class="status-txt">
                        <div style="line-height: 40px">
                            当前对公结算账户信息审核成功，若要修改企业信息，请点击修改按钮重新填写信息
                            <span style="color: #409eff; font-weight: bolder">（{{
                                auditStatus(adapayCorpMember.auditState)
                            }}）</span>
                        </div>
                    </div>
                </div>
                <h4>对公结算账户信息</h4>
                <div>
                    <el-form :model="adapayCorpMember" class="adapayStyle" label-position="left" label-width="200px">
                        <el-form-item label="企业名称：">
                            <div class="color">{{ adapayCorpMember.name }}</div>
                        </el-form-item>
                        <el-form-item label="审核状态：">
                            <div class="color">
                                {{ auditStatus(adapayCorpMember.auditState) }}
                            </div>
                        </el-form-item>
                        <el-form-item label="审核状态描述：">
                            <div class="color">
                                {{ adapayCorpMember.auditDesc }}
                            </div>
                        </el-form-item>
                        <el-form-item label="统一社会信用码：">
                            <div class="color">
                                {{ adapayCorpMember.socialCreditCode }}
                            </div>
                        </el-form-item>
                        <el-form-item label="统一社会信用证有效期：">
                            <div class="color">
                                {{ adapayCorpMember.socialCreditCodeExpires }}
                            </div>
                        </el-form-item>
                        <el-form-item label="法人姓名：">
                            <div class="color">
                                {{ adapayCorpMember.legalPerson }}
                            </div>
                        </el-form-item>
                        <el-form-item label="法人身份证号码：">
                            <div class="color">
                                {{ adapayCorpMember.legalCertId }}
                            </div>
                        </el-form-item>
                        <el-form-item label="法人身份证有效期：">
                            <div class="color">
                                {{ adapayCorpMember.legalCertIdExpires }}
                            </div>
                        </el-form-item>
                        <el-form-item label="法人手机号：">
                            <div class="color">
                                {{ adapayCorpMember.legalMp }}
                            </div>
                        </el-form-item>
                        <el-form-item label="企业地址：">
                            <div class="color">
                                {{ adapayCorpMember.address }}
                            </div>
                        </el-form-item>
                        <el-form-item label="邮编：">
                            <div class="color">
                                {{
                                    adapayCorpMember.zipCode === ""
                                    ? "一"
                                    : adapayCorpMember.zipCode
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="企业电话：">
                            <div class="color">
                                {{
                                    adapayCorpMember.telphone === ""
                                    ? "一"
                                    : adapayCorpMember.telphone
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="企业邮箱：">
                            <div class="color">
                                {{
                                    adapayCorpMember.email === ""
                                    ? "一"
                                    : adapayCorpMember.telphone
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="银行类型：">
                            <div class="color">
                                {{
                                    adapayCorpMember.bankCode === null
                                    ? "一"
                                    : adapayCorpMember.bankCode
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="银行卡号：">
                            <div class="color">
                                {{
                                    adapayCorpMember.cardNo === null
                                    ? "一"
                                    : adapayCorpMember.cardNo
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="银行卡对应的户名：">
                            <div class="color">
                                {{
                                    adapayCorpMember.cardName === null
                                    ? "一"
                                    : adapayCorpMember.cardName
                                }}
                            </div>
                        </el-form-item>
                        <el-form-item label="开户银行所在省份编码：">
                            <div class="color">
                                {{ provCode(adapayCorpMember.provCode) }} /
                                {{ areaCode(adapayCorpMember.areaCode) }}
                            </div>
                        </el-form-item>
                        <el-form-item label="经营范围：">
                            <div class="color">
                                {{ adapayCorpMember.businessScope }}
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="updateDialog = true">修改</el-button>
                        </el-form-item>
                    </el-form>
                    <hr />
                </div>
            </template>
        </el-card>
        <el-dialog title="修改信息" :visible.sync="updateDialog" width="50%">
            <el-form :model="adapayCorpMember" :rules="adapayCorpRules" ref="adapayCorpMember" label-width="220px">
                <el-form-item label="企业名称" prop="name">
                    <el-input type="textarea" v-model="adapayCorpMember.name" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用码" prop="socialCreditCode">
                    <el-input v-model="adapayCorpMember.socialCreditCode" maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用证有效期">
                    <el-date-picker editable v-model="updateSocialCreditCode" type="date" placeholder="有效期格式为20190909"
                        format="yyyyMMdd" :disabled="dataDisabled" value-format="yyyyMMdd">
                    </el-date-picker>
                    <el-checkbox v-model="adapaySocialCredChecked" @change="adapaySocialCredChange">长期</el-checkbox>
                </el-form-item>
                <el-form-item label="经营范围" prop="businessScope">
                    <el-input type="textarea" v-model="adapayCorpMember.businessScope" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item label="法人姓名" prop="legalPerson">
                    <el-input v-model="adapayCorpMember.legalPerson"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证号码" prop="legalCertId">
                    <el-input v-model="adapayCorpMember.legalCertId" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证有效期">
                    <el-date-picker editable v-model="updatelegalCertId" type="date" placeholder="有效期格式为20190909"
                        format="yyyyMMdd" :disabled="addLegDisabled" value-format="yyyyMMdd">
                    </el-date-picker>
                    <el-checkbox v-model="adapayLegalCertIdChecked" @change="adapayLegalCertIdChange">长期</el-checkbox>
                </el-form-item>
                <el-form-item label="法人手机号" prop="legalMp">
                    <el-input v-model="adapayCorpMember.legalMp"></el-input>
                </el-form-item>
                <el-form-item label="企业地址" prop="address">
                    <el-input v-model="adapayCorpMember.address"></el-input>
                </el-form-item>
                <el-form-item label="邮编">
                    <el-input v-model="adapayCorpMember.zipCode"></el-input>
                </el-form-item>
                <el-form-item label="企业电话">
                    <el-input v-model="adapayCorpMember.telphone"></el-input>
                </el-form-item>
                <el-form-item label="企业邮箱">
                    <el-input v-model="adapayCorpMember.email"></el-input>
                </el-form-item>
                <el-form-item label="上传法人身份证正面照">
                    <el-upload list-type="picture-card" :class="{ hide: uploadDisable }" :action="actionUrl"
                        :headers="headers" :on-success="idCardSuccess" :before-upload="beforeUpload"
                        :on-remove="idCardRemove" :file-list="idCardList" :limit="1" accept=".png,.jpg"
                        :on-exceed="idCardExceed">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件格式
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传法人身份证反面照">
                    <el-upload :class="{ hide: sideDisable }" :action="actionUrl" :headers="headers"
                        :on-success="sideCardSuccess" :before-upload="getBefore" :on-remove="sideCardRemove"
                        :file-list="sideCardList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                        :on-exceed="sideCardExceed">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件格式
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传开户银行许可证">
                    <el-upload :class="{ hide: depositBankDisable }" :action="actionUrl" :headers="headers"
                        :on-success="depositBankSuccess" :before-upload="beforeData" :on-remove="depositBankRemove"
                        :file-list="depositBankList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                        :on-exceed="depositBankExceed">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件格式
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传营业执照">
                    <el-upload :class="{ hide: businessDisable }" :action="actionUrl" :headers="headers"
                        :on-success="businessSuccess" :before-upload="beforeFormer" :on-remove="businessRemove"
                        :file-list="businessList" list-type="picture-card" :limit="1" accept=".png,.jpg"
                        :on-exceed="businessExceed">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件格式
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateDialogForm('adapayCorpMember')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    selectAdapayMember,
    createSettleAccount,
    updateAdapayMember,
} from "@/api/adapayMember/adapayMember";
import { getToken } from "@/utils/auth";
import text from "@/assets/json/bank_code.json";
export default {
    components: {},
    data() {
        return {
            dataDisabled: false,
            addLegDisabled: false,
            updatelegalCertId: null,
            updateSocialCreditCode: null,
            addLegalCertIdDate: null,
            dataValue: null,
            adapayLegalCertIdChecked: false,
            adapaySocialCredChecked: false,
            pickerChecked: false, // 统一社会编码有效期 长期
            legalCertIdChecked: false, // 身份证长期
            areaList: [],
            bankValue: "",
            bankList: [], // 银行代码JSON数据
            showAdapayCorp: null,
            updateDialog: false,
            adapayCorpRules: {
                name: [
                    {
                        required: true,
                        message: "请填写企业名称",
                        trigger: "blur",
                    },
                ],
                socialCreditCode: [
                    {
                        required: true,
                        message: "请填写统一社会信用码",
                        trigger: "blur",
                    },
                ],
                businessScope: [
                    {
                        required: true,
                        message: "请填写经营范围",
                        trigger: "blur",
                    },
                ],
                legalPerson: [
                    {
                        required: true,
                        message: "请填写法人姓名",
                        trigger: "blur",
                    },
                ],
                legalCertId: [
                    {
                        required: true,
                        message: "请填写法人身份证号码",
                        trigger: "blur",
                    },
                ],
                legalCertIdExpires: [
                    {
                        required: true,
                        message: "请填写会员昵称",
                        trigger: "blur",
                    },
                ],
                legalMp: [
                    {
                        required: true,
                        message: "请填写会员昵称",
                        trigger: "blur",
                    },
                ],
            },
            showAccountList: false,
            dialog: false,
            merchantId: null,
            adapayCorpMember: {
                bankAcctType: "1",
                merchantId: this.$route.params.id,
            },
            // 汇付会员
            adapayMember: "",
            openCreateAdapayMember: false,
            // 汇付结算账户
            adapaySettleAccount: null,
            dialogRules: {
                email: [
                    {
                        required: true,
                        message: "请填写会员邮箱",
                        trigger: "blur",
                    },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: "blur",
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "请选择会员性别",
                        trigger: "blur",
                    },
                ],
                location: [
                    {
                        required: true,
                        message: "请填写会员地址",
                        trigger: "blur",
                    },
                ],
                nickname: [
                    {
                        required: true,
                        message: "请填写会员昵称",
                        trigger: "blur",
                    },
                ],
                cardId: [
                    {
                        required: true,
                        message: "请填写银行卡号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[1-9]\d{9,29}$/,
                        message: "银行卡号格式有误",
                        trigger: "blur",
                    },
                ],
                cardName: [
                    {
                        required: true,
                        message: "请填写银行卡号对应的户名",
                        trigger: "blur",
                    },
                ],
                telNo: [
                    {
                        required: true,
                        message: "请填写手机号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
                        message: "手机号格式有误",
                        trigger: "blur",
                    },
                ],
                bankAcctType: [
                    {
                        required: true,
                        message: "请选择银行账户类型",
                        trigger: "blur",
                    },
                ],
                areaCode: [
                    {
                        required: true,
                        message: "银行账户开户银行所在地区编码",
                        trigger: "blur",
                    },
                ],
                certId: [
                    {
                        required: true,
                        message: "请填写证件号",
                        trigger: "blur",
                    },
                ],
                bankCode: [
                    {
                        required: true,
                        message: "请填写银行类型",
                        trigger: "change",
                    },
                ],
                cardNo: [
                    {
                        required: true,
                        message: "请填写银行卡号",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur",
                    },
                ],
                provCode: [
                    {
                        required: true,
                        message: "请选择省份编码",
                        trigger: "change",
                    },
                ],
                socialCreditCode: [
                    {
                        required: true,
                        message: "请输入统一社会信用码",
                        trigger: "blur",
                    },
                ],
                businessScope: [
                    {
                        required: true,
                        message: "请输入经营范围",
                        trigger: "blur",
                    },
                ],
                legalPerson: [
                    {
                        required: true,
                        message: "请输入法人姓名",
                        trigger: "blur",
                    },
                ],
                legalCertId: [
                    {
                        required: true,
                        message: "请输入法人身份证号码",
                        trigger: "blur",
                    },
                ],
                legalMp: [
                    {
                        required: true,
                        message: "请输入法人手机号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1\d{10}$/,
                        message: "手机号码格式有误",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入企业地址",
                        trigger: "blur",
                    },
                ],
            },
            cateProps: {
                expandTrigger: "click",
                label: "title",
                value: "value",
                children: "cities",
            },
            value: [],
            options: [],
            settleAccount: {},
            settleAccountList: [],
            actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
            dialogImageUrl: "",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            imageUrl: null,
            idCardList: [],
            sideCardList: [],
            depositBankList: [],
            businessList: [],
            uploadDisable: false,
            sideDisable: false,
            depositBankDisable: false,
            businessDisable: false,
        };
    },
    methods: {
        adapayLegalCertIdChange(e) {
            if (e === true) {
                this.addLegDisabled = true;
                this.updatelegalCertId = "20991231";
            } else {
                this.addLegDisabled = false;
            }
        },
        adapaySocialCredChange(e) {
            if (e === true) {
                this.dataDisabled = true;
                this.updateSocialCreditCode = "20991231";
            } else {
                this.dataDisabled = false;
            }
        },
        // 法人身份证有效期 当用户点击长期时出现的事件
        legalCertIdaChange(e) {
            if (e === true) {
                this.addLegalCertIdDate = "20991231";
                this.addLegDisabled = true;
            } else {
                this.addLegDisabled = false;
            }
        },
        // 统一社会编码有效期 点击长期时出现的事件
        dataChange(e) {
            if (e === true) {
                this.dataValue = "20991231";
                this.dataDisabled = true;
            } else {
                this.dataDisabled = false;
            }
        },
        businessExceed(files) {
            this.$message.warning(
                `当前限制选择 1 张图片，本次选择了 ${files.length}张`
            );
        },
        // 对图片进行上传前处理压缩
        beforeFormer(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                // 将图片绘制到一个canvas画布上，并设定压缩后的宽度和高度。
                reader.onload = (e) => {
                    const img = new Image();

                    img.onload = () => {
                        const canvas = document.createElement("canvas");
                        const ctx = canvas.getContext("2d");
                        const maxWidth = 800; // 设置压缩后的最大宽度
                        const maxHeight = 600; // 设置压缩后的最大高度
                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxWidth) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            }
                        } else {
                            if (height > maxHeight) {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;

                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas画布中的内容转换为Blob对象
                        canvas.toBlob(
                            (blob) => {
                                const compressedFile = new File(
                                    [blob],
                                    file.name,
                                    { type: blob.type }
                                );

                                resolve(compressedFile);
                            },
                            file.type,
                            0.8
                        ); // 设置压缩质量，这里设为0.8
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        },
        businessSuccess(res, file) {
            this.$refs.adapayCorpMember.clearValidate();
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log("图片上传成功 url：", this.imageUrl);
            this.businessList.push({ url: res.url });
            if (res.code === 200) {
                this.businessDisable = true;
            }
        },
        businessRemove(file, fileList) {
            console.log("移除图片", file, fileList);
            const i = this.businessList.findIndex((x) => x.uid === file.uid);
            this.businessList.splice(i, 1);
            this.businessDisable = false;
        },
        depositBankExceed(files) {
            this.$message.warning(
                `当前限制选择 1 张图片，本次选择了 ${files.length}张`
            );
        },
        // 对图片进行上传前处理压缩
        beforeData(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                // 将图片绘制到一个canvas画布上，并设定压缩后的宽度和高度。
                reader.onload = (e) => {
                    const img = new Image();

                    img.onload = () => {
                        const canvas = document.createElement("canvas");
                        const ctx = canvas.getContext("2d");
                        const maxWidth = 800; // 设置压缩后的最大宽度
                        const maxHeight = 600; // 设置压缩后的最大高度
                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxWidth) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            }
                        } else {
                            if (height > maxHeight) {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;

                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas画布中的内容转换为Blob对象
                        canvas.toBlob(
                            (blob) => {
                                const compressedFile = new File(
                                    [blob],
                                    file.name,
                                    { type: blob.type }
                                );

                                resolve(compressedFile);
                            },
                            file.type,
                            0.8
                        ); // 设置压缩质量，这里设为0.8
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        },
        depositBankSuccess(res, file) {
            this.$refs.adapayCorpMember.clearValidate();
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log("图片上传成功 url：", this.imageUrl);
            this.depositBankList.push({ url: res.url });
            if (res.code === 200) {
                this.depositBankDisable = true;
            }
        },
        depositBankRemove(file, fileList) {
            console.log("移除图片", file, fileList);
            const i = this.depositBankList.findIndex((x) => x.uid === file.uid);
            this.depositBankList.splice(i, 1);
            this.depositBankDisable = false;
        },
        sideCardExceed(files) {
            this.$message.warning(
                `当前限制选择 1 张图片，本次选择了 ${files.length}张`
            );
        },
        // 对图片进行上传前处理压缩
        getBefore(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                // 将图片绘制到一个canvas画布上，并设定压缩后的宽度和高度。
                reader.onload = (e) => {
                    const img = new Image();

                    img.onload = () => {
                        const canvas = document.createElement("canvas");
                        const ctx = canvas.getContext("2d");
                        const maxWidth = 800; // 设置压缩后的最大宽度
                        const maxHeight = 600; // 设置压缩后的最大高度
                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxWidth) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            }
                        } else {
                            if (height > maxHeight) {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;

                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas画布中的内容转换为Blob对象
                        canvas.toBlob(
                            (blob) => {
                                const compressedFile = new File(
                                    [blob],
                                    file.name,
                                    { type: blob.type }
                                );

                                resolve(compressedFile);
                            },
                            file.type,
                            0.8
                        ); // 设置压缩质量，这里设为0.8
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        },
        sideCardSuccess(res) {
            this.$refs.adapayCorpMember.clearValidate();
            this.sideCardList.push({ url: res.url });
            if (res.code === 200) {
                this.sideDisable = true;
            }
        },
        sideCardRemove(file, fileList) {
            console.log("移除图片", file, fileList);
            // 从pics数组中，找到图片对应的索引值
            const i = this.sideCardList.findIndex((x) => x.uid === file.uid);
            // 调用splice方法，移除图片信息
            this.sideCardList.splice(i, 1);
            this.sideDisable = false;
        },
        idCardExceed(files) {
            this.$message.warning(
                `当前限制选择 1 张图片，本次选择了 ${files.length}张`
            );
        },
        // 对图片进行上传前处理压缩
        beforeUpload(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                // 将图片绘制到一个canvas画布上，并设定压缩后的宽度和高度。
                reader.onload = (e) => {
                    const img = new Image();

                    img.onload = () => {
                        const canvas = document.createElement("canvas");
                        const ctx = canvas.getContext("2d");
                        const maxWidth = 800; // 设置压缩后的最大宽度
                        const maxHeight = 600; // 设置压缩后的最大高度
                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxWidth) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            }
                        } else {
                            if (height > maxHeight) {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;

                        ctx.drawImage(img, 0, 0, width, height);
                        // 将canvas画布中的内容转换为Blob对象
                        canvas.toBlob(
                            (blob) => {
                                const compressedFile = new File(
                                    [blob],
                                    file.name,
                                    { type: blob.type }
                                );

                                resolve(compressedFile);
                            },
                            file.type,
                            0.8
                        ); // 设置压缩质量，这里设为0.8
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        },
        idCardSuccess(res) {
            this.$refs.adapayCorpMember.clearValidate();
            this.idCardList.push({ url: res.url });
            if (res.code === 200) {
                this.uploadDisable = true;
            }
        },
        idCardRemove(file, fileList) {
            console.log("移除图片", file, fileList);
            // 从pics数组中，找到图片对应的索引值
            const i = this.idCardList.findIndex((x) => x.uid === file.uid);
            // 调用splice方法，移除图片信息
            this.idCardList.splice(i, 1);
            this.uploadDisable = false;
        },
        // 修改按钮
        updateDialogForm(form) {
            this.adapayCorpMember.businessName = this.adapayCorpMember.name;
            console.log("修改", this.adapayCorpMember.businessName);
            this.adapayCorpMember.legalCertIdExpires = this.updatelegalCertId;
            this.adapayCorpMember.socialCreditCodeExpires =
                this.updateSocialCreditCode;
            console.log(this.adapayCorpMember, "this.adapayCorpMember");
            this.adapayCorpMember.merchantId = this.merchantId;
            console.log("修改成功", form);
            this.$refs[form].validate((valid) => {
                if (valid) {
                    console.log(valid, "valid");
                    if (!this.adapayCorpMember.socialCreditCodeExpires)
                        return this.$message.warning(
                            "请输入统一社会信用证有效期"
                        );
                    if (!this.adapayCorpMember.legalCertIdExpires)
                        return this.$message.warning("请输入法人身份证有效期");
                    if (
                        !this.idCardList[0] ||
                        !this.sideCardList[0] ||
                        !this.depositBankList[0] ||
                        !this.businessList[0]
                    ) {
                        return this.$message.warning("请上传图片");
                    } else {
                        this.adapayCorpMember.imgList = [
                            this.idCardList[0].url,
                            this.sideCardList[0].url,
                            this.depositBankList[0].url,
                            this.businessList[0].url,
                        ];
                        console.log(
                            this.adapayCorpMember.imgList,
                            "this.adapayCorpMember.imgList"
                        );
                    }
                    updateAdapayMember(this.adapayCorpMember).then(
                        (response) => {
                            console.log("修改", response);
                            this.$message.success("修改成功");
                            this.updateDialog = false;
                            this.selectAdapayMember();
                        }
                    );
                }
            });
        },
        // <!-- A-待审核；B-审核失败；C-开户失败；D-开户成功但未创建结算账户；E-开户和创建结算账户成功
        auditStatus(status) {
            let arr = [
                { type: "A", statusTitle: "待审核" },
                { type: "B", statusTitle: "审核失败" },
                { type: "C", statusTitle: "开户失败" },
                { type: "D", statusTitle: "开户成功但未创建结算账户" },
                { type: "E", statusTitle: "开户和创建结算账户成功" },
            ];
            let str = arr.find((item) => item.type === status);
            // console.log(str,'str auditStatus')
            if (str == null) {
                return "一";
            } else {
                return str.statusTitle;
            }
        },
        provCode(code) {
            let arr = this.options.find((item) => item.value === code);
            if (arr == null) {
                return "一";
            } else {
                this.areaList = arr.cities;
                return arr.title;
            }
        },
        areaCode(area) {
            let arr = this.areaList.find((item) => item.value === area);
            if (arr == null) {
                return "一";
            } else {
                return arr.title;
            }
        },
        enterpriseChange(value) {
            this.adapayCorpMember.provCode = value[0];
            this.adapayCorpMember.areaCode = value[1];
        },
        // 新建提交按钮
        submitDialogForm(adapayCorpMember) {
            const loading = this.$loading({
                lock: true,
                text: '提交中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.adapayCorpMember.businessName = this.adapayCorpMember.name;
            console.log(
                "新建 企业名称传递的值.businessName",
                this.adapayCorpMember.businessName
            );
            this.adapayCorpMember.socialCreditCodeExpires = this.dataValue;
            this.adapayCorpMember.legalCertIdExpires = this.addLegalCertIdDate;
            this.adapayCorpMember.merchantId = this.merchantId;
            this.$refs[adapayCorpMember].validate((valid) => {
                console.log(this.adapayCorpMember, "this.adapayCorpMember");
                if (valid) {
                    console.log(valid, adapayCorpMember);
                    if (this.adapayCorpMember.bankAcctType === "1") {
                        if (!this.adapayCorpMember.socialCreditCodeExpires)
                            return this.$message.warning(
                                "请输入统一社会信用证有效期"
                            );
                        if (!this.adapayCorpMember.legalCertIdExpires)
                            return this.$message.warning(
                                "请输入法人身份证有效期"
                            );
                        if (
                            !this.idCardList[0] ||
                            !this.sideCardList[0] ||
                            !this.depositBankList[0] ||
                            !this.businessList[0]
                        ) {
                            return this.$message.warning("请上传图片");
                        } else {
                            this.adapayCorpMember.imgList = [
                                this.idCardList[0].url,
                                this.sideCardList[0].url,
                                this.depositBankList[0].url,
                                this.businessList[0].url,
                            ];
                        }
                    }
                    console.log("执行请求，创建成功");
                    createSettleAccount(this.adapayCorpMember).then(
                        (response) => {
                            console.log("新增", response);
                            this.$message.success("新增成功，请勿重新提交！");
                            this.dialog = false;
                            this.selectAdapayMember();
                            loading.close();
                        }
                    );
                } else {
                    console.log("表格提交失败，请联系系统管理员！");
                    this.$message.error("表格提交失败，请联系系统管理员！");
                    loading.close();
                    return false;
                }
                this.dialog = false;
            });
        },
        resetForm(adapayCorpMember) {
            this.$refs[adapayCorpMember].resetFields();
        },
        // 查询汇付会员
        selectAdapayMember() {
            console.log("this.merchantId", this.adapayCorpMember.merchantId);
            let param = {
                merchantId: this.adapayCorpMember.merchantId,
            };
            selectAdapayMember(param).then((response) => {
                console.log("查询 selectAdapayMember", response);
                this.adapayMember = response.data;
                if (response.data != null) {
                    // 对公返回的结果

                    // console.log('对公信息',this.adapayCorpMember)
                    if (response.data.settleAccountList !== null) {
                        this.adapayCorpMember = response.data.adapayMember;
                        this.settleAccountList =
                            response.data.settleAccountList;
                        this.showAccountList = true;
                    }
                    this.showAdapayCorp = response.data.adapayCorpMember;
                    if (response.data.adapayCorpMember != null)
                        return (this.adapayCorpMember =
                            response.data.adapayCorpMember);
                }
            });
        },
        jsonHttp() {
            var that = this;
            //(1).实例化ajax对象
            let xhr = new XMLHttpRequest();
            //(2).设置请求方法和地址
            //get请求的数据直接添加在url的后面 格式是 url?key=value
            xhr.open(
                "get",
                "https://cdn.cloudpnr.com/adapayresource/documents/Adapay%E7%9C%81%E5%B8%82%E7%BC%96%E7%A0%81%EF%BC%88%E5%9B%9B%E4%BD%8D%EF%BC%89.json"
            );
            //(3).发送请求
            xhr.send();
            //(4).注册回调函数
            xhr.onload = function () {
                // console.log(xhr.responseText,'responseText')
                that.options = JSON.parse(xhr.responseText);
            };
        },
    },
    created() {
        this.selectAdapayMember();
        this.jsonHttp();
        this.bankList = text.bankList;
        this.merchantId = this.$route.params.id;
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input .el-input--medium {
    width: 43% !important;
}

.hide ::v-deep .el-upload--picture-card {
    display: none;
}

::v-deep .el-checkbox__input .el-checkbox__inner {
    margin: 0 -6px 0 10px;
}

.status-card {
    display: flex;
    background-color: #f6f7f8;
    padding: 15px;
}

.status-i {
    color: #409eff;
    font-size: 40px;
    margin-right: 10px;
}

.status-txt {
    flex: 1;
}

.font-w {
    font-weight: bolder;
}

.font-13 {
    font-size: 13px;
}

.txt {
    padding: 10px;
    margin: 10px 0;
    text-align: center;
}

.margin-10 {
    margin: 10px 0;
}

.adapayStyle {
    .el-form-item {
        margin-bottom: 0;
    }

    .el-form-item__label {
        color: gray;
    }
}

.color {
    color: #000;
    font-weight: bolder;
}
</style>
