<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__content">
        <el-form :rules="rules" :model="modalData" ref="modalForm">
          <el-row v-if="process == 1 && modalData.bankAcctType == 1">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡类型："
                  prop="bankAcctType"
                >
                  <el-select
                    @change="handleChange"
                    style="width: 300px"
                    v-model="modalData.bankAcctType"
                    placeholder="请输入银行卡类型"
                  >
                    <el-option
                      v-for="item in [
                        { label: '公账', value: 1 },
                        { label: '私账', value: 2 },
                      ]"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡对应户名："
                  prop="cardName"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardName"
                    placeholder="请输入银行卡对应户名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡号："
                  prop="cardNo"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardNo"
                    placeholder="请输入银行卡号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="150px" label="企业名称" prop="name">
                  <el-input
                    style="width: 300px"
                    v-model="modalData.name"
                    placeholder="请输入企业名称："
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label-width="150px" label="省份：" prop="prov">
                  <el-select
                    style="width: 300px"
                    v-model="modalData.prov"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in this.$api.mer_admin.getCityOptions()"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="150px" label="地级市：" prop="area">
                  <el-input
                    style="width: 300px"
                    v-model="modalData.area"
                    placeholder="请输入地区"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="社会信用码："
                  prop="socialCreditCode"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.socialCreditCode"
                    placeholder="请输入社会信用码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="社会信用码有效期："
                  prop="socialCreditCodeExpires"
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    style="width: 300px"
                    v-model="modalData.socialCreditCodeExpires"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="经营范围："
                  prop="businessScope"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.businessScope"
                    placeholder="请输入经营范围"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人姓名："
                  prop="legalPerson"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.legalPerson"
                    placeholder="请输入法人姓名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="	法人身份证号码："
                  prop="legalCertId"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.legalCertId"
                    placeholder="请输入法人身份证号码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证有效期："
                  prop="legalCertIdExpires"
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    style="width: 300px"
                    v-model="modalData.legalCertIdExpires"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人手机号："
                  prop="legalMp"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.legalMp"
                    placeholder="请输入法人手机号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="企业地址："
                  prop="address"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.address"
                    placeholder="请输入企业地址"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行："
                  prop="bankCode"
                  :validate-on-rule-change="false"
                >
                  <el-select
                    style="width: 300px"
                    v-model="modalData.bankCode"
                    placeholder="请输入银行卡类型"
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="营业执照号："
                  prop="licenseNumber"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.licenseNumber"
                    placeholder="请输入营业执照号"
                  >
                  </el-input>
                </el-form-item>
                <!-- <el-form-item
                  label-width="150px"
                  label="银行卡号："
                  prop="cardNo"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardNo"
                    placeholder="请输入银行卡号"
                  >
                  </el-input>
                </el-form-item> -->
              </el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="24">
                <el-form-item
                  label-width="150px"
                  label="营业执照号："
                  prop="licenseNumber"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.licenseNumber"
                    placeholder="请输入营业执照号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
          </el-row>
          <el-row v-if="process == 2 && modalData.bankAcctType == 1">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="营业执照图片："
                  prop="licensePicture"
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="handleAvatarSuccess"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证正面国徽："
                  prop="idCardFront"
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="idCardFrontImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="法人身份证背面人像："
                  prop="idCardBack"
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="idCardBackImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="开户银行许可证照："
                  prop="bankLicense"
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="bankLicenseImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="手持身份证正面国徽(选传)："
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="handIdCardFrontImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="手持身份证背面人像(选传)："
                >
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="handIdCardBackImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <el-row v-if="modalData.bankAcctType == 2">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡类型："
                  prop="bankAcctType"
                >
                  <el-select
                    @change="handleChange"
                    style="width: 300px"
                    v-model="modalData.bankAcctType"
                    placeholder="请输入银行卡类型"
                  >
                    <el-option
                      v-for="item in [
                        { label: '公账', value: 1 },
                        { label: '私账', value: 2 },
                      ]"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡对应户名："
                  prop="cardName"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardName"
                    placeholder="请输入银行卡对应户名"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="银行卡号："
                  prop="cardId"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardId"
                    placeholder="请输入银行卡号"
                  >
                  </el-input>
                </el-form-item>
                <!-- <el-form-item
                  label-width="150px"
                  label="银行类型："
                  prop="bankType"
                >
                  <el-select
                    style="width: 300px"
                    v-model="modalData.bankType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in [
                        { label: '摊主银行卡', value: 1 },
                        { label: '代理银行卡', value: 2 },
                        { label: '专员银行卡', value: 3 },
                        { label: '分销银行卡', value: 4 },
                        { label: '用户银行卡', value: 5 },
                      ]"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label-width="150px"
                  label="	身份证号码："
                  prop="certId"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.certId"
                    placeholder="请输入身份证号码"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label-width="150px" label="手机号：" prop="telNo">
                  <el-input
                    style="width: 300px"
                    v-model="modalData.telNo"
                    placeholder="请输入法人手机号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- <el-form-item
                  label-width="150px"
                  label="银行卡号："
                  prop="cardId"
                >
                  <el-input
                    style="width: 300px"
                    v-model="modalData.cardId"
                    placeholder="请输入银行卡号"
                  >
                  </el-input>
                </el-form-item> -->
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label-width="150px" label="法人身份证正面国徽：">
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="idCardFrontImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="150px" label="法人身份证背面人像：">
                  <el-upload
                    class="upload-demo"
                    :action="this.$api.mer_admin.uploadFile()"
                    :on-success="idCardBackImg"
                    :file-list="fileList"
                    list-type="picture"
                    :headers="{ token: this.$cookie.get('token') }"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "添加银行卡",
        show: false,
        width: "1000px",
      },
      modalData: {},
      value1: [],
      ProductData: {},
      productPlace: "", //地区
      fileList: [],
      process: 1,
      bankOptions: [
        { label: "工商银行", value: "01020000" },
        { label: "农业银行", value: "01030000" },
        { label: "中国银行", value: "01040000" },
        { label: "建设银行", value: "01050000" },
        { label: "交通银行", value: "03010000" },
        { label: "平安银行", value: "03134402" },
        { label: "中信银行", value: "03020000" },
        { label: "光大银行", value: "03030000" },
        { label: "华夏银行", value: "03040000" },
        { label: "民生银行", value: "03050000" },
        { label: "广发银行", value: "03060000" },
        { label: "招商银行", value: "03080000" },
        { label: "兴业银行", value: "03090000" },
        { label: "浦发银行", value: "03100000" },
        { label: "北京银行", value: "03130011" },
        { label: "天津银行", value: "03130012" },
        { label: "上海银行", value: "03130031" },
        { label: "江苏银行", value: "03130032" },
        { label: "重庆银行", value: "03130050" },
        { label: "大连银行", value: "03132102" },
        { label: "哈尔滨银行", value: "03132301" },
        { label: "南京银行", value: "03133201" },
        { label: "杭州银行", value: "03133301" },
        { label: "宁波银行", value: "03133302" },
        { label: "温州银行", value: "03133308" },
        { label: "恒丰银行", value: "03150000" },
        { label: "浙商银行", value: "03160000" },
      ],
      rules: {
        cardName: [
          { required: true, message: "请输入银行卡对应户名", trigger: "blur" },
        ],
        //公卡
        cardNo: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              const strBin =
                "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
              if (!value) {
                return callback(new Error("请输入银行卡号"));
              } else if (!Number.isInteger(+value)) {
                callback(new Error("银行卡号必须全为数字"));
              } else if (value.trim().length < 12 || value.trim().length > 20) {
                callback(new Error("银行卡号长度必须在12到19之间"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //私卡
        cardId: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              const strBin =
                "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
              if (!value) {
                return callback(new Error("请输入银行卡号"));
              } else if (!Number.isInteger(+value)) {
                callback(new Error("银行卡号必须全为数字"));
              } else if (value.trim().length < 12 || value.trim().length > 19) {
                callback(new Error("银行卡号长度必须在12到20之间"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        certId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              const pattern =
                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
              if (pattern.test(value)) {
                callback();
              } else {
                callback(new Error("身份证格式错误"));
              }
            },
            trigger: "blur",
          },
        ],
        telNo: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        socialCreditCode: [
          {
            required: true,
            message: "请输入统一社会信用码",
            trigger: ["blur", "change"],
          },
        ],
        socialCreditCodeExpires: [
          {
            required: true,
            message: "请输入统一社会信用码有效期",
            trigger: ["blur", "change"],
          },
        ],
        name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        prov: [
          {
            required: true,
            message: "请选择省份",
            trigger: ["blur", "change"],
          },
        ],
        area: [{ required: true, message: "请输入地级市", trigger: "blur" }],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        legalCertId: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              const pattern =
                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
              if (pattern.test(value)) {
                callback();
              } else {
                callback(new Error("身份证格式错误"));
              }
            },
            trigger: "blur",
          },
        ],
        legalCertIdExpires: [
          {
            required: true,
            message: "请输入法人身份证有效期",
            trigger: "change",
          },
        ],
        legalMp: [
          {
            required: true,
            message: "请输入法人手机号",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入详细企业地址", trigger: "blur" },
        ],
        bankCode: [
          {
            required: true,
            message: "请输入银行名称",
            trigger: "change",
          },
        ],
        licenseNumber: [
          { required: true, message: "请输入营业执照号", trigger: "blur" },
        ],
        licensePicture: [
          { required: true, message: "请输入营业执照", trigger: "blur" },
        ],
        bankLicense: [
          {
            required: true,
            message: "请上传开户银行许可证照",
            trigger: "blur",
          },
        ],
        idCardFront: [
          { required: true, message: "请上传身份证正面", trigger: "blur" },
        ],
        idCardBack: [
          { required: true, message: "请上传身份证反面", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modalForm?.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.modalConfig.title = "添加银行卡";
          this.process = 1;
          this.productPlace = "";
          this.fileList = [];
          this.$nextTick(() => {
            this.modalData = {
              linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
                ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
                : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
              name: "",
              prov: "",
              area: "",
              socialCreditCode: "",
              socialCreditCodeExpires: "",
              businessScope: "",
              legalPerson: "",
              legalCertId: "",
              legalCertIdExpires: "",
              legalMp: "",
              address: "",
              bankCode: "",
              cardNo: "",
              cardName: "",
              licensePicture: "",
              idCardFront: "",
              idCardBack: "",
              bankLicense: "",
              handIdCardFront: "",
              handIdCardBack: "",
              bankAcctType: 1,
              licenseNumber: "",
            };
            this.$refs.modalForm?.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    handleAvatarSuccess(res) {
      console.log(res);
      this.modalData.licensePicture = res.data;
      this.$refs.modalForm.validate();
    },
    idCardFrontImg(res) {
      console.log(res);
      this.modalData.idCardFront = res.data;
      this.$refs.modalForm.validate();
    },
    idCardBackImg(res) {
      console.log(res);
      this.modalData.idCardBack = res.data;
      this.$refs.modalForm.validate();
    },
    bankLicenseImg(res) {
      console.log(res);
      this.modalData.bankLicense = res.data;
      this.$refs.modalForm.validate();
    },
    handIdCardFrontImg(res) {
      console.log(res);
      this.modalData.handIdCardFront = res.data;
    },
    handIdCardBackImg(res) {
      console.log(res);
      this.modalData.handIdCardBack = res.data;
    },
    handleChange(e) {
      if (e == 1) {
        this.modalData = {
          linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
            ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
            : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          name: "",
          prov: "",
          area: "",
          socialCreditCode: "",
          socialCreditCodeExpires: "",
          businessScope: "",
          legalPerson: "",
          legalCertId: "",
          legalCertIdExpires: "",
          legalMp: "",
          address: "",
          bankCode: "",
          cardNo: "",
          cardName: "",
          licensePicture: "",
          idCardFront: "",
          idCardBack: "",
          bankLicense: "",
          handIdCardFront: "",
          handIdCardBack: "",
          bankAcctType: 1,
          licenseNumber: "",
        };
        console.log(e);
      } else {
        this.modalData = {
          linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
            ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
            : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          cardId: "",
          cardName: "",
          certId: "",
          telNo: "",
          idCardFront: "",
          idCardBack: "",
          bankAcctType: 2,
        };
        this.$refs.modalForm?.resetFields();
      }
    },
  },
  computed: {
    modalHandles() {
      if (this.modalData.bankAcctType == 1) {
        return [
          {
            label: "取消",
            handle: () => {
              this.toggle();
            },
          },
          {
            label: "上一步",
            type: "primary",
            disabled: () => this.process == 1,
            handle: () => {
              console.log(this.modalData);
              this.process = 1;
            },
          },
          {
            label: this.process == 1 ? "下一步" : "确认添加",
            type: "primary",
            handle: () => {
              console.log(this.modalData);

              this.$refs.modalForm.validate((valid) => {
                if (valid) {
                  if (this.process == 1) {
                    this.process = 2;
                  } else {
                    console.log(this.modalData);
                    this.$api.mer_admin
                      .publicAccountBankCardAdd(this.modalData)
                      .then((res) => {
                        console.log(res);
                        this.$emit("queryList");
                        this.toggle();
                      });
                  }
                }
              });
            },
          },
        ];
      } else {
        return [
          {
            label: "取消",
            handle: () => {
              this.toggle();
            },
          },
          {
            label: "确认添加",
            type: "primary",
            handle: () => {
              console.log(this.modalData);
              this.$refs.modalForm.validate((valid) => {
                if (valid) {
                  this.$api.mer_admin
                    .bankCardAdd(this.modalData)
                    .then((res) => {
                      console.log(res);
                      this.$emit("queryList");
                      this.toggle();
                    });
                }
              });
            },
          },
        ];
      }
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.introduce {
  padding: 5px;
  background: #fdf6ec;
  text-align: center;
}
.introduce-center {
  margin-bottom: 10px;
}
</style>
