shenze-sysMan/src/views/settlement/index.vue

<template>
  <!-- 提现账号 -->
  <div class="shandeMchPage flex-col"
    :class="{ page1: pageType === '1', page2: pageType === '2', page3: pageType === '3', page4: pageType === '4' }">
    <s-header :name="$t('joinpayMch.settlementAccount')" :noback="false"></s-header>
    <div class="shandeMchBox flex-col">
      <div class="topSpeed" v-if="pageType !== '4'"
        :class="{ page1: pageType === '1', page2: pageType === '2', page3: pageType === '3' }"></div>
      <div v-if="pageType === '1' || pageType === '4'">
        <van-form @submit="saveJoinPayMchFun">
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.joinpayAuditStatus') }}</span></div>
            <div class="van-cell__value van-field__value" style="text-align: left;">
              <span :style="{
                color: joinPayMchID != null ? (joinPayMchType == '1' ? (joinPayMchStep == '1' ? (signStatus == '签约成功' ? '#00ff80'
                  : '#FFA500') : '#FFA500') : '#FFA500') : '#FFA500'
              }">
                {{ joinPayMchID != null ? (joinPayMchType == '1' ? (joinPayMchStep == '1' ? (signStatus == '签约成功' ? '注册成功'
                  : '待签约') : '待上传证件图片') : '审核未通过') : '未注册' }}
              </span>
            </div>
          </div>
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.huifuAuditStatus') }}</span></div>
            <div class="van-cell__value van-field__value" style="text-align: left;">
              <!-- <span :style="{
                color: huifuMchID != null ? (huifuAuditStatus == '2' ? (conStat == '5' ? '#00ff80' : '#FFA500') :
                  (huifuAuditStatus == '0' ? '#FFA500' : (huifuAuditStatus == '1' || huifuAuditStatus == '4' ? '#FFA500' :
                    '#FF0000'))) : '#FFA500'
              }">
                {{ huifuMchID != null ? (huifuAuditStatus == '2' ? (conStat == '5' ? '注册成功' : '待签约') :
                  (huifuAuditStatus == '0' ? '待上传证件图片' : (huifuAuditStatus == '1' || huifuAuditStatus == '4' ? '待签约' :
                    '审核未通过'))) : '未注册' }}
              </span> -->
              <span :style="{
                color: huifuMchID != null ? (huifuAuditStatus == '2' ? '#00ff80' : (huifuAuditStatus == '0' ? '#FFA500' :
                  (huifuAuditStatus == '1' || huifuAuditStatus == '4' ? '#FFA500' :
                    '#FF0000'))) : '#FFA500'
              }">
                {{ huifuMchID != null ? (huifuAuditStatus == '2' ? '注册成功' : (huifuAuditStatus == '0' ? '待上传证件图片' :
                  (huifuAuditStatus == '1' || huifuAuditStatus == '4' ? '待签约' :
                    '审核未通过'))) : '未注册' }}
              </span>
            </div>
          </div>
          <div v-if="pageType === '4'">
            <van-field v-model="altMchName" name="altMchName" :label="$t('joinpayMch.merchantNameLabel')" readonly />
            <van-field v-model="altMchNo" name="altMchNo" :label="$t('joinpayMch.merchantAccountLabel')" readonly />
            <!-- <van-field v-model="altMchShortName" name="altMchShortName" :label="$t('joinpayMch.merchantAbbreviationLabel')" readonly /> -->
          </div>
          <div class="intervalRow"></div>
          <!-- 商户类型 -->
          <div class="van-cell van-field requiredLeft">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.merchantType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="altMerchantType" direction="horizontal" @change="fieldUpdate"
                :disabled="huifuMchID != null || joinPayMchID != null">
                <van-radio name="10" icon-size="18px">{{ $t('joinpayMch.personal') }}</van-radio>
                <!-- <van-radio name="11" icon-size="18px">{{$t('joinpayMch.individualBusinesses')}}</van-radio> -->
                <van-radio name="12" icon-size="18px">{{ $t('joinpayMch.enterprise') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div v-if="altMerchantType == 12" class="requiredLeft">
            <!-- 商户名称 -->
            <div class="cell-input">
              <van-popover v-model:show="regNameVisible" trigger="manual" placement="top" popover-class="custom-popover"
                :offset="[25,]" theme="dark">
                <template #reference>
                  <van-field v-model="regNameValue" name="regNameValue" :label="$t('huifuMch.huifuRegName')"
                    :placeholder="$t('huifuMch.huifuRegNamePlaceholder')"
                    :rules="[{ required: true, message: $t('huifuMch.huifuRegNamePlaceholder') }]"
                    @update:model-value="fieldUpdate" @click="showPopover(1)" />
                </template>
                {{ $t('joinpayMch.merchantNameTips') }}
              </van-popover>
            </div>
            <!-- 商户简称 -->
            <!-- <div class="cell-input">
              <van-popover v-model:show="shortNameVisible" trigger="manual" placement="bottom"
                popover-class="custom-popover" :offset="[25, 0]" theme="dark">
                <template #reference>
                  <van-field v-model="shortNameValue" name="shortNameValue" :label="$t('huifuMch.shortNameLabel')"
                    :placeholder="$t('huifuMch.shortNamePlaceholder')"
                    :rules="[{ required: true, message: $t('huifuMch.shortNamePlaceholder') }]"
                    @update:model-value="fieldUpdate" @click="showPopover(2)" />
                </template>
                {{ $t('joinpayMch.merchantAbbreviationTips') }}
              </van-popover>
            </div> -->
            <!-- 注册地址 -->
            <van-field v-model="registeredAddress" is-link readonly name="registeredAddress"
              :label="$t('huifuMch.huifuRegisteredAddress')"
              :placeholder="$t('huifuMch.huifuRegisteredAddressPlaceholder')"
              :rules="[{ required: true, message: $t('huifuMch.huifuRegisteredAddressPlaceholder') }]"
              @click="showReAddress = true" />
            <!-- 成立时间 -->
            <!-- <van-field v-model="companyFoundDate" readonly name="companyFoundDate"
              :label="$t('huifuMch.companyFoundDate')" :placeholder="$t('huifuMch.companyFoundDatePlaceholder')"
              @click="showFoundDate = true"
              :rules="[{ required: true, message: $t('huifuMch.companyFoundDatePlaceholder') }]" /> -->
            <!-- 客服电话 -->
            <!-- <van-field v-model="servicePhoneValue" name="servicePhoneValue" :label="$t('huifuMch.huifuServicePhone')"
              :placeholder="$t('huifuMch.huifuServicePhonePlaceholder')"
              :rules="[{ required: true, message: $t('huifuMch.huifuServicePhonePlaceholder') }]"
              @update:model-value="fieldUpdate" /> -->
          </div>
          <div class="intervalRow"></div>
          <!-- 联系人姓名 -->
          <van-field class="requiredLeft" v-model="busiContactName" name="busiContactName"
            :label="$t('joinpayMch.contactNameLabel')" :placeholder="$t('joinpayMch.contactNamePlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.contactNamePlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 联系人手机号码 -->
          <van-field class="requiredLeft" v-model="busiContactMobileNo" name="busiContactMobileNo"
            :label="$t('joinpayMch.cellPhoneLabel')" :placeholder="$t('joinpayMch.cellPhonePlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.cellPhonePlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 联系人邮箱 -->
          <!-- <van-field class="requiredLeft" v-model="emailValue" name="emailValue" :label="$t('huifuMch.huifuContactEmail')"
            :placeholder="$t('huifuMch.huifuContactEmailPlaceholder')"
            :rules="[{ required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: $t('huifuMch.huifuContactEmailMessage') }]"
            @update:model-value="fieldUpdate" /> -->
          <!-- 法人/个人姓名 -->
          <van-field class="requiredLeft" v-model="legalPerson" name="legalPerson"
            :label="$t('joinpayMch.nameOfLegalPerson/IndividualLabel')"
            :placeholder="$t('joinpayMch.nameOfLegalPerson/IndividualPlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.nameOfLegalPerson/IndividualPlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 法人/个人手机号 -->
          <van-field class="requiredLeft" v-model="phoneNo" name="phoneNo"
            :label="$t('joinpayMch.phoneNumberOfLegalPerson/IndividualLabel')"
            :placeholder="$t('joinpayMch.phoneNumberOfLegalPerson/IndividualPlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.phoneNumberOfLegalPerson/IndividualPlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 身份证号 -->
          <van-field class="requiredLeft" v-model="idCardNo" name="idCardNo" :label="$t('joinpayMch.IDLabel')"
            :placeholder="$t('joinpayMch.IDPlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.IDPlaceholder') }]" @update:model-value="fieldUpdate" />
          <!-- 身份证地址 -->
          <van-field v-if="bankAccountType == '4'" class="requiredLeft" v-model="certAddressValue" name="certAddressValue"
            :label="$t('huifuMch.certAddress')" :placeholder="$t('huifuMch.certAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.certAddressPlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 身份证有效期类型 -->
          <div class="van-cell van-field requiredLeft">
            <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.certType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="validityType" direction="horizontal" @change="fieldUpdate">
                <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
                <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <!-- 有效开始日期 -->
          <van-field class="requiredLeft" v-model="beginDate" readonly name="beginDate" :label="$t('huifuMch.beginDate')"
            :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDate = true"
            :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
          <!-- 有效截止日期 -->
          <van-field class="requiredLeft" v-if="validityType == 0" v-model="endDate" readonly name="endDate"
            :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')" @click="showEndDate = true"
            :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
          <!-- 图片审核情况 -->
          <div class="van-cell van-field" v-if="pageType === '4'">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.pictureReview') }}</span></div>
            <div class="van-cell__value van-field__value radioBox" style="display: flex; justify-content: space-around;">
              <span
                :style="{ color: approveStatus === '审核通过' ? (huifuPicUpStatus === 1 ? '#00ff80' : '#FF0000') : (approveStatus === '审核中' ? '#FFA500' : '#FF0000') }">
                {{ approveStatus === '审核通过' ? (huifuPicUpStatus === 1 ? '审核通过' : '请重新上传') : approveStatus }}
              </span>
              <van-button span="5" round type="primary" style="height: 2em; padding: 0 1.5em" @click='updateSentImage()'>
                {{ $t('joinpayMch.reUpload') }}</van-button>
            </div>
          </div>
          <!-- 签约状态 -->
          <div class="van-cell van-field" v-if="pageType === '4'">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.signingStatus') }}</span></div>
            <div class="van-cell__value van-field__value radioBox" style="display: flex; justify-content: space-around;">
              <!-- <span
                :style="{ color: signStatus == '签约成功' ? (conStat == null && huifuMchID == null ? '#00ff80' : (conStat == 5 && huifuAuditStatus == '2' ? '#00ff80' : '#FFA500')) : '#FFA500' }">
                {{ signStatus == '签约成功' ? (conStat == null && huifuMchID == null ? signStatus : (conStat == 5 &&
                  huifuAuditStatus == '2' ?
                  signStatus : '待签约')) : '待签约' }}
              </span> -->
              <span
                :style="{ color: signStatus == '签约成功' ? (huifuMchID == null ? '#00ff80' : (huifuAuditStatus == '2' ? '#00ff80' : '#FFA500')) : '#FFA500' }">
                {{ signStatus == '签约成功' ? (huifuMchID == null ? signStatus : (huifuAuditStatus == '2' ? signStatus :
                  '待签约')) : '待签约' }}
              </span>
              <van-button
                :disabled="huifuMchID == null ? (signStatus == '签约成功' ? true : false) : (huifuAuditStatus == '2' && signStatus == '签约成功' ? true : false)"
                span="5" round type="primary" style="height: 2em; padding: 0 2.5em" @click='altMchSignFun()'>{{
                  $t('joinpayMch.signAContract') }}
              </van-button>
            </div>
          </div>
          <div class="intervalRow"></div>
          <!-- 账户类型 -->
          <div class="van-cell van-field requiredLeft">
            <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.accountType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="bankAccountType" direction="horizontal" @change="fieldUpdate"
                :disabled="altMerchantType === '10'">
                <van-radio name="1" icon-size="18px">{{ $t('joinpayMch.debitCard') }}</van-radio>
                <van-radio name="4" icon-size="18px">{{
                  $t('joinpayMch.corporateAccount')
                }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <!-- 银行账户名称 -->
          <div class="cell-input">
            <van-popover v-model:show="popoverVisible" trigger="manual" placement="top" popover-class="custom-popover"
              :offset="[25, 5]" theme="dark">
              <template #reference>
                <van-field class="custom-input" v-model="bankAccountName" name="bankAccountName"
                  :label="$t('joinpayMch.bankAccountNameLabel')"
                  :placeholder="$t('joinpayMch.bankAccountNamePlaceholder')"
                  :rules="[{ required: true, message: $t('joinpayMch.bankAccountNamePlaceholder') }]"
                  @update:model-value="fieldUpdate" @click="showPopover(3)" />
              </template>
              {{ $t('joinpayMch.bankAccountNameTips') }}
            </van-popover>
          </div>
          <!-- 银行账号 -->
          <van-field class="requiredLeft" v-model="bankAccountNo" name="bankAccountNo"
            :label="$t('joinpayMch.bankAccountLabel')" :placeholder="$t('joinpayMch.bankAccountPlaceholder')"
            :rules="[{ required: true, message: $t('joinpayMch.bankAccountPlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 银行地址 -->
          <van-field class="requiredLeft" v-model="bankAddress" is-link readonly name="bankAddress"
            :label="$t('huifuMch.huifuBankAddress')" :placeholder="$t('huifuMch.huifuBankAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuBankAddressPlaceholder') }]"
            @click="showBankAddress = true" />
          <!-- <div v-if="bankAccountType === '4'" class="requiredLeft"> -->
          <!-- 联行号 -->
          <van-field v-if="bankAccountType === '4'" class="requiredLeft" v-model="bankChannelNo" name="bankChannelNo"
            :label="$t('joinpayMch.interBankNoLabel')" :placeholder="$t('joinpayMch.interBankNoPlaceholder')"
            :rules="[{ required: bankAccountType === '4', message: $t('joinpayMch.interBankNoPlaceholder') }]"
            @update:model-value="fieldUpdate" />
          <!-- 银行编号 -->
          <van-field v-if="bankAccountType === '4'" class="bankCode" v-model="bankCodeValue" name="bankCodeValue"
            :label="$t('huifuMch.bankCodeLabel')" :placeholder="$t('huifuMch.bankCodePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.bankCodePlaceholder') }]" @update:model-value="fieldUpdate">
            <template #button>
              <van-button size="small" type="primary" @click="showBankCode = true" style="padding: 0 1em;">
                选择所属银行
              </van-button>
            </template>
          </van-field>
          <!-- </div> -->
          <!-- 银行编号弹窗 -->
          <van-popup v-model:show="showBankCode" position="bottom">
            <van-picker title="请选择所属银行" :columns="bankCodePopList" @confirm="bankCodePopConfirm"
              @cancel="showBankCode = false" />
          </van-popup>
          <div v-if="altMerchantType === '12'" class="requiredLeft">
            <!-- 营业执照编号 -->
            <van-field v-model="licenseNo" name="licenseNo" :label="$t('joinpayMch.businessLicenseNoLabel')"
              :placeholder="$t('joinpayMch.businessLicenseNoPlaceholder')"
              :rules="[{ required: bankAccountType === '4', message: $t('joinpayMch.businessLicenseNoPlaceholder') }]"
              @update:model-value="fieldUpdate" />
            <!-- 营业执照有效期 -->
            <div class="van-cell van-field">
              <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.validityType') }}</span></div>
              <div class="van-cell__value van-field__value radioBox">
                <van-radio-group v-model="validityType1" direction="horizontal" @change="fieldUpdate">
                  <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
                  <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
                </van-radio-group>
              </div>
            </div>
            <van-field v-model="beginDateLicense" readonly name="beginDateLicense" :label="$t('huifuMch.beginDate')"
              :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDateLicense = true"
              :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
            <van-field v-if="validityType1 == 0" v-model="endDateLicense" readonly name="endDateLicense"
              :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')"
              @click="showEndDateLicense = true"
              :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
          </div>
          <!-- <div class="intervalRow"></div> -->
          <!-- 经营范围 -->
          <!-- <van-field v-model="manageScope" name="manageScope" :label="$t('joinpayMch.natureOfBusinessLabel')"
            :placeholder="$t('joinpayMch.natureOfBusinessPlaceholder')" @update:model-value="fieldUpdate" />
          <van-field class="requiredLeft" v-model="manageAddr" is-link readonly name="manageAddr"
            :label="$t('huifuMch.huifuBusinessAddress')" :placeholder="$t('huifuMch.huifuBusinessAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuBusinessAddressPlaceholder') }]"
            @click="showArea = true" />
          <van-field v-if="huifuMchNO != null" v-model="sms" center clearable :label="$t('huifuMch.sms')"
            class="requiredLeft" :placeholder="$t('huifuMch.smsPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.smsPlaceholder') }]">
            <template #button>
              <van-button size="small" type="primary" @click="sendCode()" :disabled="time !== 0" style="padding: 0 1em">
                {{ time === 0 ? $t('huifuMch.sendSms') : time + $t('huifuMch.replaysInSeconds') }}
              </van-button>
            </template>
          </van-field> -->
          <!-- 操作 -->
          <van-row justify="space-around" v-if="huifuAuditStatus != '4' && huifuAuditStatus != '1'"
            style="padding: 1em; margin: 2em 0;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 1.5em 2em" native-type="submit">{{
              $t('joinpayMch.submitDataForReview') }}
            </van-button>
          </van-row>
        </van-form>
        <!-- 时间弹窗 -->
        <van-popup v-model:show="showBeginDate" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDate"
            @cancel="showBeginDate = false" />
        </van-popup>
        <van-popup v-model:show="showEndDate" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDate"
            @cancel="showEndDate = false" />
        </van-popup>
        <van-popup v-model:show="showFoundDate" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirmFoundDate"
            @cancel="showFoundDate = false" />
        </van-popup>
        <van-popup v-model:show="showEndDateLicense" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDateLicense"
            @cancel="showEndDateLicense = false" />
        </van-popup>
        <van-popup v-model:show="showBeginDateLicense" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDateLicense"
            @cancel="showBeginDateLicense = false" />
        </van-popup>
        <!-- 地址弹窗 -->
        <van-popup v-model:show="showArea" position="bottom">
          <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
        </van-popup>
        <van-popup v-model:show="showBankAddress" position="bottom">
          <van-area :area-list="areaList" :columns-num="2" @confirm="onConfirmBankAddress"
            @cancel="showBankAddress = false" />
        </van-popup>
        <van-popup v-model:show="showReAddress" position="bottom">
          <van-area :area-list="areaList" @confirm="onConfirmReAddress" @cancel="showReAddress = false" />
        </van-popup>
      </div>
      <div v-if="pageType === '2'" class="joinPayMch2">
        <img src='../../assets/joinPayMch/center.png' style="width: 50%; margin-top: 3em;" />
        <div v-if="joinPayMchType === '0'" style="width: 100%;">
          <div style="width: 100%; text-align: center;">
            <span style=" font-size: 1.4em; font-weight: bold; line-height: 3;">{{
              $t('joinpayMch.thePlatformAdministratorIsReviewing') }}</span>
          </div>
          <div style="width: 100%; text-align: center;">
            <span style="line-height: 1.2;">{{ $t('joinpayMch.youCan') }}<span
                style="color: #4d6add; text-decoration: underline;" @click='updateJoinPay()'>{{
                  $t('joinpayMch.withdrawAndRevise') }}</span></span>
          </div>
        </div>
        <div v-if="joinPayMchType === '2' || joinPayMchType === '3'" style="width: 100%;">
          <div style="width: 100%; text-align: center;">
            <span style=" font-size: 1.4em; font-weight: bold; line-height: 3; color: #ee0a24;">{{
              $t('joinpayMch.failedToPassTheReview') }}</span>
          </div>
          <div style="width: 100%; text-align: center;">
            <span style="line-height: 1.2;">{{ $t('joinpayMch.failedToPassTheReview') }},<span
                style="color: #4d6add; text-decoration: underline;" @click='pageType = "1"'>{{
                  $t('joinpayMch.clickHereToFillInTheInformationAgain') }}</span></span>
          </div>
        </div>
        <div v-if="joinPayMchStep === '0'">
          <div style="width: 100%; text-align: center;">
            <span style=" font-size: 1.4em; font-weight: bold; line-height: 3; color: #07c160;">{{
              $t('joinpayMch.approvalPassed') }}</span>
          </div>
          <div style="width: 100%; text-align: center;">
            <span style="line-height: 1.2;">{{ $t('joinpayMch.approvalPassed') }},{{ $t('joinpayMch.youCan') }}<span
                style="color: #4d6add; text-decoration: underline;" @click='pageType = "1"'>{{
                  $t('joinpayMch.clickHereToFillInAgainAndSubmitForReview') }}</span></span>
          </div>
          <van-row justify="space-around" style="padding: 1em">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" @click='pageType = "3"'>
              {{ $t('joinpayMch.nextGoToUploadIDPhotos') }}</van-button>
          </van-row>
        </div>
      </div>
      <div v-if="pageType === '3'">
        <van-form @submit="sentImageFun">
          <div class="upLoaderRow">
            <div class="baseRow flex-row justify-between">
              <div class="group2 flex-col"></div>
              <span class="baseText">{{ $t('joinpayMch.uploYourIdCard') }}</span>
            </div>
            <div class="cardRow">
              <div class="cardLi">
                <van-uploader v-model="cardNegativeList" :max-size="2 * 1024 * 1024" :max-count="1"
                  :after-read="afterRead" :before-delete="deleteCertFront" @oversize="onOversize" />
                <p>{{ $t('joinpayMch.uploPortrait') }}</p>
              </div>
              <div class="cardLi">
                <van-uploader v-model="cardPositiveList" :max-size="2 * 1024 * 1024" :max-count="1"
                  :after-read="afterRead" :before-delete="deleteCertBack" @oversize="onOversize" />
                <p>{{ $t('joinpayMch.uploNatiEmblem') }}</p>
              </div>
            </div>
          </div>
          <div class="upLoaderRow" v-if="bankAccountType === '1'">
            <div class="baseRow flex-row justify-between">
              <div class="group2 flex-col"></div>
              <span class="baseText">{{ $t('joinpayMch.upStatementCard') }}</span>
            </div>
            <div class="cardRow">
              <div class="cardLi">
                <van-uploader v-model="statementCard" :max-size="2 * 1024 * 1024" :max-count="1" :after-read="afterRead"
                  :before-delete="deleteCard" @oversize="onOversize" />
                <p>{{ $t('joinpayMch.statementCard') }}</p>
              </div>
            </div>
          </div>
          <div class="upLoaderRow" v-if="bankAccountType === '4'">
            <div class="baseRow flex-row justify-between">
              <div class="group2 flex-col"></div>
              <span class="baseText">{{ $t('joinpayMch.businessLicensePlace') }}</span>
            </div>
            <div class="cardRow">
              <div class="cardLi">
                <van-uploader v-model="tradeLicenceList" :max-size="2 * 1024 * 1024" :max-count="1"
                  :before-delete="deleteTradeLicence" :after-read="afterRead" @oversize="onOversize" />
                <p>{{ $t('joinpayMch.businessLicense') }}</p>
              </div>
            </div>
          </div>
          <div class="upLoaderRow" v-if="bankAccountType === '4'">
            <div class="baseRow flex-row justify-between">
              <div class="group2 flex-col"></div>
              <span class="baseText">{{ $t('joinpayMch.accountOpeningLicensePlace') }}</span>
            </div>
            <div class="cardRow">
              <div class="cardLi">
                <van-uploader v-model="openAccountLicenceList" :max-size="2 * 1024 * 1024" :max-count="1"
                  :before-delete="deleteAccountLicence" :after-read="afterRead" @oversize="onOversize" />
                <p>{{ $t('joinpayMch.accountOpeningLicense') }}</p>
              </div>
            </div>
          </div>
          <van-row justify="space-around" style="padding: 1em">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" native-type="submit">{{
              $t('joinpayMch.submissions') }}
            </van-button>
          </van-row>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "../../components/SimpleHeader";
import { showFailToast, showSuccessToast, showToast, showLoadingToast } from "vant";
import { areaList } from "@vant/area-data";
import {
  getOneJoinPayMch, updateJoinPayMchCheck, altMchSign,
  sentImage, updateApproveStatus, saveJoinPayMch
} from '../../service/joinpayMch';
import { newUploadPic, getHuifuMchCheck, newSaveHuifuMch, updateMerchant, openAccount, sendSms } from "@/service/huifuMch";
import { getLoginUser, styleUrl, getLocal, setLocal } from "../../common/js/utils";
import dateUtil from "../../utils/dateUtil";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    const user = getLoginUser();
    const idCardExpiryShow = ref(false);
    const idCardExpiryOnConfirm = (value) => {
      idCardExpiryShow.value = false;
      addParams.idCardExpiry = dateUtil.formateDate(value, "yyyy-MM-dd");
      fieldUpdate();
    };
    const licenseExpiryShow = ref(false);
    const licenseExpiryOnConfirm = (value) => {
      licenseExpiryShow.value = false;
      addParams.licenseExpiry = dateUtil.formateDate(value, "yyyy-MM-dd");
      fieldUpdate();
    };
    const showBeginDate = ref(false);
    const showEndDate = ref(false);
    const showBeginDateLicense = ref(false);
    const showEndDateLicense = ref(false);
    const showFoundDate = ref(false);
    const showArea = ref(false); // 是否弹窗
    const showBankAddress = ref(false);
    const showReAddress = ref(false);
    const showBankCode = ref(false);
    const bankCodePopList = [
      {
        text: '中国银行',
        value: "01040000",
      },
      {
        text: '中国农业银行',
        value: "01030000",
      },
      {
        text: '中国工商银行',
        value: "01020000",
      },
      {
        text: '中国建设银行',
        value: "01050000",
      },
      {
        text: '交通银行',
        value: "03010000",
      },
      {
        text: '中信银行',
        value: "03020000",
      },
      {
        text: '中国光大银行',
        value: "03030000",
      },
      {
        text: '华夏银行',
        value: "03040000",
      },
      {
        text: '中国民生银行',
        value: "03050000",
      },
      {
        text: '广发银行',
        value: "03060000",
      },
      {
        text: '招商银行',
        value: "03080000",
      },
      {
        text: '兴业银行',
        value: "03090000",
      },
      {
        text: '中国邮政储蓄银行',
        value: "04030000",
      },
      {
        text: '农村商业银行',
        value: "03140000",
      },
      {
        text: '其他，请咨询售后人员',
        value: "",
      },
    ];
    const bankCodePopConfirm = ({ selectedOptions }) => {
      console.log(selectedOptions[0])
      addParams.bankCodeValue = selectedOptions[0].value;
      fieldUpdate();
      showBankCode.value = false;
    };
    const verCodeTime = reactive({
      time: 0
    });

    const regNameVisible = ref(false);
    const shortNameVisible = ref(false);
    const popoverVisible = ref(false);

    const showPopover = (value) => {
      console.log(value);
      switch (value) {
        case 1:
          regNameVisible.value = true;
          break;
        case 2:
          shortNameVisible.value = true;
          break;
        case 3:
          popoverVisible.value = true;
          break;
      }
    }

    let addParams = reactive({
      adminId: user.id, // 当前登录账户的id Long 必填
      altMchName: '', // 分账方名称; string 必填
      altMchNo: '', // 分账方账号; string	必填
      altMchShortName: '', // 分账方商户简称;	string
      altMerchantType: '10', // 分账方商户类型，10:个人，11：个体工商户，12：企业;	integer(int32)	必填

      regNameValue: '', // 汇付商户名称
      shortNameValue: '', // 汇付商户简称
      registeredAddress: '', // 汇付商户注册地址
      companyFoundDate: '', // 汇付商户公司成立时间
      servicePhoneValue: '', // 汇付客服电话
      busiContactName: '', // 业务联系人姓名;	string	必填
      busiContactMobileNo: '', // 业务联系人手机;	string	必填
      legalPerson: '', // 法人;	string	必填
      phoneNo: '', // 电话;	string	必填
      emailValue: '', // 联系人邮箱
      idCardNo: '', // 身份证;	string	必填
      certAddressValue: '', // 汇付参数，身份证地址,对公账户必填
      validityType: '1', // 身份证有效期类型
      idCardExpiry: '', // 身份证有效期;	string
      beginDate: '', // 有效期开始日期
      endDate: '', // 有效期截日期

      bankAccountType: '1', // 账户类型 * 1 借记卡，4 对公账户;	integer(int32)	必填
      bankAccountName: '', // 银行账户名称，分账方结算银行账户名称;	string	必填
      bankAccountNo: '', // 银行账号;	string	必填
      bankAddress: '', // 银行地址，个人账户必填
      bankChannelNo: '', // 联行号;	string	对公账户;必填
      openLicenceNoValue: '', // 汇付参数，基本存款账户编号或核准号，对公账户必填
      bankCodeValue: '', // 汇付参数，银行编号
      validityType1: '1', // 营业执照有效期类型
      licenseNo: '', // 营业执照编号;	string	对公账户;必填
      licenseExpiry: '', // 营业执照有效期;	string
      beginDateLicense: '', // 有效期开始日期
      endDateLicense: '', // 有效期截日期


      settMode: 1, // 结算方式 * 1 由汇聚自动结算 * 2 由商户平台手工结算（结算接口）;	integer(int32)	默认填1
      settDateType: 1, // 结算周期类型 * 1 工作日，2 自然日，3 月结日;	integer(int32)	默认填1
      riskDay: 1, // 结算周期;	integer(int32)	默认填1
      manageScope: '', // 经营范围;	string
      manageAddr: '', // 经营地址;	string

      bizCode: '', // 业务响应码;	string
      loginName: '', // 分账方登录名，即邮箱;	string
    });
    // 汇付字段
    let huifuParams = reactive({
      id: null,
      adminId: user.id, // 当前登录账户的id
      type: '0', // 类型 String 必填 企业:type='1'; 个人:type='0'
      regName: '', // 商户名称
      shortName: '', // 商户简称
      foundDate: '', // 成立时间
      licenseCode: '', // 营业执照编号
      licenseValidityType: "1", // 营业执照有效期类型
      licenseBeginDate: '', // 营业执照有效开始日期
      licenseEndDate: '', // 营业执照有效截止日期
      regProvId: '', // 注册省编码
      regAreaId: '', // 注册市编码
      regDistrictId: '', // 注册区编码
      regDetail: '', // 注册详细地址
      name: '', // 联系人姓名
      phone: '', // 联系人手机号码
      email: '', // 联系人邮箱
      provId: '', // 省编码
      areaId: '',  // 省编码
      districtId: '', // 市编码 
      detailAddr: '', // 经营地址
      servicePhone: '', // 客服电话
      cardName: '', // 卡户名
      cardType: '1', // 结算账户类型，“0”为对公账户，“1”为个人账户
      cardNo: '', // 银行卡号
      branchCode: '', // 联行号
      openLicenceNo: '', // 基本存款账户编号或核准号
      bankCode: '',
      cardProvId: '', // 省编码
      cardAreaId: '', // 省编码
      mp: '', // 结算手机号
      certNo: '', // 身份证号
      certAddress: '', // 身份证地址
      certValidityType: '1', // 身份证有效期类型
      certBeginDate: '', // 有效期开始日期
      certEndDate: '', // 有效期截止日期
      sms: '', // 验证码
    });
    let cardPositiveList = ref([]);
    let cardNegativeList = ref([]);
    let tradeLicenceList = ref([]);
    let statementCard = ref([]);
    let openAccountLicenceList = ref([]);
    let sentImageForm = reactive({
      cardPositive: '', // 身份证正面	String	必填
      cardNegative: '', // 	身份证背面	String	必填
      tradeLicence: '', // 	营业执照图片	String	Type=0时必填
      openAccountLicence: '', // 	开户许可证	String	Type=0时必填
      type: '', // 	账户类型	String	必填 0：对公；1，个人
      status: '0', // 	第几次提交	String	必填 0，第一次提交；1，第n次提交（重新上传）
    });
    const pageType = ref('1');
    const joinPayMchType = ref(null);
    const joinPayMchStep = ref(null);
    const joinPayMchID = ref(null); // 汇聚账号ID
    const huifuMchID = ref(null); //汇付账号ID
    const huifuPicUpStatus = ref(0); // 汇付照片上传状态
    // let joinPayMchNo = null; // 汇聚商户号
    const huifuMchNO = ref(null); // 汇付商户号
    const approveStatus = ref(null);
    const signStatus = ref(null); // 汇聚签约状态
    const huifuAuditStatus = ref(null); // 汇付审核状态
    const conStat = ref(null); // 汇付签约状态
    let isMemoryFormType = false;

    // 日期选择
    const onConfirmBeginDate = ({ selectedValues }) => {
      addParams.beginDate = selectedValues.join("-");
      showBeginDate.value = false;
      fieldUpdate();
    };
    const onConfirmEndDate = ({ selectedValues }) => {
      addParams.endDate = selectedValues.join("-");
      showEndDate.value = false;
      fieldUpdate();
    };
    const onConfirmFoundDate = ({ selectedValues }) => {
      addParams.companyFoundDate = selectedValues.join("-");
      showFoundDate.value = false;
      fieldUpdate();
    };
    const onConfirmEndDateLicense = ({ selectedValues }) => {
      addParams.endDateLicense = selectedValues.join("-");
      showEndDateLicense.value = false;
      fieldUpdate();
    };
    const onConfirmBeginDateLicense = ({ selectedValues }) => {
      addParams.beginDateLicense = selectedValues.join("-");
      showBeginDateLicense.value = false;
      fieldUpdate();
    };
    // 地址选择
    const onConfirm = ({ selectedOptions }) => {
      console.log(selectedOptions[0].value);
      showArea.value = false;
      addParams.manageAddr = (selectedOptions[0]?.text != selectedOptions[1]?.text ? selectedOptions[0]?.text : '')
        + selectedOptions[1]?.text + selectedOptions[2]?.text;
      console.log(addParams.manageAddr)
      huifuParams.provId = selectedOptions[0]?.value || '';
      huifuParams.areaId = selectedOptions[1]?.value || '';
      huifuParams.districtId = selectedOptions[2]?.value || '';
      huifuParams.detailAddr = addParams.manageAddr;
      fieldUpdate();
      console.log("huifuMch", huifuParams);
    };
    const onConfirmBankAddress = ({ selectedOptions }) => {
      showBankAddress.value = false;
      addParams.bankAddress = (selectedOptions[0]?.text != selectedOptions[1]?.text ? selectedOptions[0]?.text : '')
        + selectedOptions[1]?.text;
      huifuParams.cardProvId = selectedOptions[0]?.value || '';
      huifuParams.cardAreaId = selectedOptions[1]?.value || '';
      fieldUpdate();
      console.log("huifuMch", huifuParams);
    };
    const onConfirmReAddress = ({ selectedOptions }) => {
      showReAddress.value = false;
      addParams.registeredAddress = (selectedOptions[0]?.text != selectedOptions[1]?.text ? selectedOptions[0]?.text : '')
        + selectedOptions[1]?.text + selectedOptions[2]?.text;
      huifuParams.regProvId = selectedOptions[0]?.value || '';
      huifuParams.regAreaId = selectedOptions[1]?.value || '';
      huifuParams.regDistrictId = selectedOptions[2]?.value || '';
      huifuParams.regDetail = addParams.registeredAddress;
      // console.log("详细地址", huifuParams.regDetail);
      fieldUpdate();
      console.log("huifuMch", huifuParams);
    };
    onMounted(async () => {
      styleUrl('joinpayMch');
      console.log("huifuMch", huifuParams);
      getOneJoinPayMchFun();
      getHuifuMchFun();
      verCodeTime.time = getLocal('registerVerCodeTime');
      if (huifuMchID.value == null) {
        huifuPicUpStatus.value = 1;
        console.log(huifuPicUpStatus.value);
      }
      if (verCodeTime.time && verCodeTime.time !== '') {
        verCodeTime.time = parseInt(verCodeTime.time);
        if (verCodeTime.time > 0) {
          verCodeTimeInterval();
        }
      } else {
        verCodeTime.time = 0;
      }
    });
    // 获取汇聚账号回显
    const getOneJoinPayMchFun = async () => {
      const { data } = await getOneJoinPayMch({ adminId: user.id });
      console.log(data);
      if (data.code === "00000") {
        joinPayMchType.value = data.data.type;
        if (data.data.type === '2' || data.data.type === '3' || data.data.type === '0') {
          pageType.value = '2';
        }
        if ((data.data.type === null || data.data.type === '1') && data.data.step === '0') {
          pageType.value = '2';
          joinPayMchStep.value = '0';
        }
        if ((data.data.type === null || data.data.type === '1') && data.data.step === '1') {
          pageType.value = '4';
          joinPayMchStep.value = '1';
        }
        console.log('pageType', pageType.value);
        joinPayMchID.value = data.data.id;
        approveStatus.value = data.data.approveStatus;
        signStatus.value = data.data.signStatus;
        addParams.altMchName = data.data.altMchName;
        addParams.altMchNo = data.data.altMchNo;
        // joinPayMchNo = data.data.altMchNo;
        addParams.altMchShortName = data.data.altMchShortName;
        addParams.altMerchantType = data.data.altMerchantType ? data.data.altMerchantType.toString() : '';

        addParams.busiContactName = data.data.busiContactName;
        addParams.busiContactMobileNo = data.data.busiContactMobileNo;
        addParams.legalPerson = data.data.legalPerson;
        addParams.phoneNo = data.data.phoneNo;
        addParams.idCardNo = data.data.idCardNo;
        if (data.data.idCardExpiry) {
          addParams.idCardExpiry = dateUtil.formateDate(new Date(data.data.idCardExpiry), "yyyy-MM-dd");
        }

        addParams.bankAccountType = data.data.bankAccountType ? data.data.bankAccountType.toString() : '';
        addParams.bankAccountName = data.data.bankAccountName;
        addParams.bankAccountNo = data.data.bankAccountNo;
        addParams.bankChannelNo = data.data.bankChannelNo;
        addParams.licenseNo = data.data.licenseNo;
        if (data.data.licenseExpiry) {
          addParams.licenseExpiry = dateUtil.formateDate(new Date(data.data.licenseExpiry), "yyyy-MM-dd");
        }

        addParams.settMode = data.data.settMode ? data.data.settMode.toString() : '';
        addParams.settDateType = data.data.settDateType ? data.data.settDateType.toString() : '';
        addParams.riskDay = data.data.riskDay;
        addParams.manageScope = data.data.manageScope;
        addParams.manageAddr = data.data.manageAddr;

        addParams.bizCode = data.data.bizCode;
        addParams.loginName = data.data.loginName;
        if (data.data.approveStatus === "审核中") {
          changeApproveStatus();
        }
      } else {
        pageType.value = '1';
        // showFailToast(data.message);
      }
      memoryForm();
      isMemoryFormType = true;
    };
    // 获取汇付账号回显
    const getHuifuMchFun = async () => {
      const { data } = await getHuifuMchCheck({ adminId: user.id });
      console.log("huifu", data);
      if (data.code === "00000") {
        if (data.data != null) {
          huifuMchID.value = data.data.id;
          huifuParams.id = data.data.id;
          console.log("huifuMchID", huifuMchID.value);
          conStat.value = data.data.conStat;
          addParams.altMerchantType = "10";
          addParams.busiContactName = data.data.name;
          addParams.busiContactMobileNo = data.data.phone;
          addParams.legalPerson = data.data.name;
          addParams.phoneNo = data.data.phone;
          addParams.idCardNo = data.data.certNo;
          addParams.bankAccountName = data.data.cardName;
          addParams.bankAccountNo = data.data.cardNo;
          huifuAuditStatus.value = data.data.status;
          addParams.emailValue = data.data.email;
          addParams.manageAddr = areaList.province_list[data.data.provId] + areaList.city_list[data.data.areaId] + areaList.county_list[data.data.districtId];
          huifuMchNO.value = data.data.huifuId;
          // if (huifuMchNO.value != null && conStat.value != "5") {
          //   changeConStat();
          // }
          addParams.validityType = data.data.certValidityType;
          addParams.beginDate = dateUtil.formatDate(data.data.certBeginDate);
          addParams.endDate = dateUtil.formatDate(data.data.certEndDate);
          huifuParams.provId = data.data.provId;
          huifuParams.areaId = data.data.areaId;
          huifuParams.districtId = data.data.districtId;
          huifuParams.cardProvId = data.data.cardProvId;
          huifuParams.cardAreaId = data.data.cardAreaId;
          huifuParams.detailAddr = data.data.detailAddr;
          addParams.bankAddress = areaList.province_list[data.data.cardProvId] == areaList.city_list[data.data.cardAreaId] ? areaList.province_list[data.data.cardProvId] :
            (areaList.province_list[data.data.cardProvId] + areaList.city_list[data.data.cardAreaId]);
          if (data.data.cardFrontPic != null && data.data.legalCertBackPic != null && data.data.legalCertFrontPic) {
            huifuPicUpStatus.value = 1;
          }
          console.log(data.data.cardProvId);
          if (data.data.type === "1") {
            addParams.altMerchantType = "12";
            addParams.regNameValue = data.data.regName;
            addParams.shortNameValue = data.data.shortName;
            addParams.registeredAddress = areaList.province_list[data.data.regProvId] == areaList.city_list[data.data.regAreaId] ? (areaList.city_list[data.data.regAreaId] + areaList.county_list[data.data.regDistrictId]) :
              (areaList.province_list[data.data.regProvId] + areaList.city_list[data.data.regAreaId] + areaList.county_list[data.data.regDistrictId]);
            huifuParams.regProvId = data.data.regProvId;
            huifuParams.regAreaId = data.data.regAreaId;
            huifuParams.regDistrictId = data.data.regDistrictId;
            addParams.companyFoundDate = dateUtil.formatDate(data.data.foundDate);
            addParams.servicePhoneValue = data.data.servicePhone;
            addParams.licenseNo = data.data.licenseCode;
            if (data.data.cardType === "0") {
              addParams.bankAccountType = '4';
              addParams.certAddressValue = data.data.certAddress;
              addParams.openLicenceNoValue = data.data.openLicenceNo;
              addParams.bankCodeValue = data.data.bankCode;
              addParams.bankChannelNo = data.data.branchCode;
            }
            addParams.validityType1 = data.data.licenseValidityType;
            addParams.beginDateLicense = dateUtil.formatDate(data.data.licenseBeginDate);
            addParams.endDateLicense = dateUtil.formatDate(data.data.licenseEndDate);
            if (data.data.licensePic != null && data.data.certBackPic != null && data.data.certFrontPic != null && data.data.regAcctPic != null) {
              huifuPicUpStatus.value = 1;
            }
          }
          if (data.data.status === '0') {
            huifuPicUpStatus.value = 0;
            console.log(huifuPicUpStatus.value)
          }
          console.log('huifuAuditStatus', huifuAuditStatus.value)
        }
      }
    }
    // 更新汇付签约状态
    // const changeConStat = async () => {
    //   const { data } = await updateConStat(huifuParams);
    //   if (data.code === "00000") {
    //     // showSuccessToast(t('joinpayMch.withdrawalSucceeded'));
    //     if (data.data === "5") {
    //       location.reload();
    //     }
    //   }
    // }
    // 更新图片审核情况
    const changeApproveStatus = async () => {
      const { data } = await updateApproveStatus({ id: joinPayMchID.value });
      if (data.code === "00000") {
        // showSuccessToast(t('joinpayMch.withdrawalSucceeded'));
        if (data.data === "P1000") {
          location.reload();
        }
      }
    }
    // 记忆表单
    const memoryForm = () => {
      const formDataString = localStorage.getItem('joinPayMchForm');
      const huifuMchFormData = localStorage.getItem('huifuMchForm');
      if (formDataString) {
        const formData = JSON.parse(formDataString);
        Object.keys(formData).forEach(key => {
          addParams[key] = formData[key];
        });
      }
      if (huifuMchFormData) {
        const huifuFormData = JSON.parse(huifuMchFormData);
        Object.keys(huifuFormData).forEach(key => {
          huifuParams[key] = huifuFormData[key];
        });
      }
    };
    // 发送验证码
    const sendCode = async () => {
      const { data } = await sendSms({
        adminId: user.id,
      });
      console.log('seedVerCodeSuccess', data);
      if (data.code === '00000') {
        showToast({
          duration: 2000,
          message: t('huifuMch.successSend') + '\n' + maskPhoneNumber(data.data.phone)
        });
        console.log('seedVerCodeSuccess');
        verCodeTime.time = 60;
        verCodeTimeInterval();
      } else {
        showFailToast(data.message);
      }
    }
    // 格式手机号码
    const maskPhoneNumber = (value) => {
      const prefix = value.slice(0, 3);
      const suffix = value.slice(-4);
      return `${prefix}****${suffix}`;
    }
    // 验证码发送成功开始3分钟倒计时
    const verCodeTimeInterval = () => {
      verCodeTime.time--;
      setLocal('registerVerCodeTime', verCodeTime.time)
      if (verCodeTime.time !== 0) {
        setTimeout(() => {
          verCodeTimeInterval();
        }, 1000);
      }
    }
    // 提交审批表单
    const saveJoinPayMchFun = async () => {
      const params = Object.assign({}, addParams);
      params.altMerchantType = parseInt(params.altMerchantType);
      params.bankAccountType = parseInt(params.bankAccountType);
      params.settMode = parseInt(params.settMode);
      params.settDateType = parseInt(params.settDateType);
      addParams.idCardExpiry = addParams.beginDate;
      addParams.licenseExpiry = addParams.beginDateLicense;
      if (addParams.validityType === '0') {
        addParams.idCardExpiry = addParams.endDate;
      }
      if (addParams.validityType1 === '0') {
        addParams.licenseExpiry = addParams.endDateLicense;
      }
      huifuParams.regName = addParams.legalPerson;
      huifuParams.name = addParams.legalPerson;
      huifuParams.phone = addParams.phoneNo;
      huifuParams.email = addParams.emailValue;
      huifuParams.cardName = addParams.bankAccountName;
      huifuParams.cardNo = addParams.bankAccountNo.replace(/\s/g, '');
      huifuParams.mp = addParams.phoneNo;
      huifuParams.certNo = addParams.idCardNo;
      huifuParams.certValidityType = addParams.validityType;
      huifuParams.certBeginDate = addParams.beginDate.replace(/-/g, "");
      huifuParams.certEndDate = addParams.endDate.replace(/-/g, "");
      if (addParams.altMerchantType === '12') {
        huifuParams.type = '1';
        huifuParams.regName = addParams.regNameValue;
        huifuParams.foundDate = addParams.companyFoundDate.replace(/-/g, "");
        huifuParams.licenseCode = addParams.licenseNo;
        huifuParams.licenseValidityType = addParams.validityType1;
        huifuParams.licenseBeginDate = addParams.beginDateLicense.replace(/-/g, "");
        huifuParams.licenseEndDate = addParams.endDateLicense.replace(/-/g, "");
        huifuParams.servicePhone = addParams.servicePhoneValue;
        huifuParams.regDetail = addParams.registeredAddress;
        if (addParams.bankAccountType === '4') {
          huifuParams.cardType = '0';
          huifuParams.branchCode = addParams.bankChannelNo;
          huifuParams.openLicenceNo = addParams.openLicenceNoValue;
          huifuParams.bankCode = addParams.bankCodeValue;
          huifuParams.certAddress = addParams.certAddressValue
        }
      }
      console.log("addParams:", addParams);
      console.log("huifuParams:", huifuParams)
      try {
        const { data } = await saveJoinPayMch(addParams);
        if (data.code === "00000") {
          let huifuMch = null;
          if (huifuMchNO.value == null) {
            huifuMch = await newSaveHuifuMch(huifuParams);
          } else {
            // huifuMch = await auditMerchantUpdate(huifuParams);
            huifuMch = await updateMerchant(huifuParams);
          }
          if (huifuMch.data.code === "00000") {
            showSuccessToast(t(('joinpayMch.submittedSuccessfully')));
            localStorage.removeItem('joinPayMchForm');
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            showFailToast(`${huifuMch.data.message}`);
          }
        } else {
          showFailToast(`${t('joinpayMch.submitFailed')} ${data.message}`);
        }
      } catch (error) {
        console.error('请求发生错误:', error);
        showFailToast(t('joinpayMch.submitFailed'));
      }

    };
    // 撤回
    const updateJoinPay = async () => {
      const { data } = await updateJoinPayMchCheck({ id: joinPayMchID.value });
      if (data.code === "00000") {
        showSuccessToast(t('joinpayMch.withdrawalSucceeded'));
        setTimeout(() => {
          location.reload();
        }, 1500);
      } else { showFailToast(`${data.message}`); }
    }
    // 图片上传表单提交
    const sentImageFun = async () => {
      const loadingUp = showLoadingToast({
        message: '上传中...',
        forbidClick: true,
        duration: 0,
      });
      const params = {
        id: joinPayMchID.value,
        type: addParams.bankAccountType === '4' ? '0' : '1',
        status: sentImageForm.status,
        tradeLicence: null,
        openAccountLicence: null
      };
      if (cardNegativeList.value.length < 1) { showFailToast(t('joinpayMch.uploPortrait')); return; }
      if (cardPositiveList.value.length < 1) { showFailToast(t('joinpayMch.uploNatiEmblem')); return; }
      if (addParams.bankAccountType === '1') {
        if (statementCard.value.length < 1) { showFailToast(t('joinpayMch.upStatementCard')); return; }
      }
      params.cardPositive = cardPositiveList.value[0].content;
      params.cardNegative = cardNegativeList.value[0].content;
      if (addParams.bankAccountType === '4') {
        if (tradeLicenceList.value.length < 1) { showFailToast(t('joinpayMch.businessLicensePlace')); return; }
        if (openAccountLicenceList.value.length < 1) { showFailToast(t('joinpayMch.accountOpeningLicensePlace')); return; }
      }
      if (tradeLicenceList.value.length > 0) { params.tradeLicence = tradeLicenceList.value[0].content; }
      if (openAccountLicenceList.value.length > 0) { params.openAccountLicence = openAccountLicenceList.value[0].content; }
      try {
        const { data } = await sentImage(params);
        let response = null;
        if (data.code === "00000") {
          if (huifuMchNO.value == null) {
            response = await openAccount({ id: huifuMchID.value });
            if (response.data.code === "00000") {
              console.log("response", response);
              loadingUp.close();
              showSuccessToast(t('joinpayMch.uploadSucceeded'));
              setTimeout(() => {
                location.reload();
              }, 1500);
            } else {
              console.log("response", response);
              loadingUp.close();
              showFailToast(`${response.data.message}`);
            }
          } else {
            showSuccessToast(t('joinpayMch.uploadSucceeded'));
            setTimeout(() => {
              location.reload();
            }, 1500);
          }
        } else { showFailToast(t('joinpayMch.submitFailed')); }
      } catch (error) {
        loadingUp.close();
        console.error('请求发生错误:', error);
        showFailToast(t('joinpayMch.submitFailed'));
      }
    }
    // 图片重新上传触发
    const updateSentImage = () => {
      sentImageForm.status = '1';
      pageType.value = '3';
    }
    // 签约触发
    const altMchSignFun = async () => {
      console.log("joinPayMchID", joinPayMchID.value);
      console.log("huifuMchID", huifuMchID.value);
      try {
        const { data } = await altMchSign({ id: joinPayMchID.value });
        if (data.code === "00000") {
          console.log(huifuAuditStatus.value);
          let huifuMch = await openAccount({ id: huifuMchID.value });
          if (huifuMch.data.code === "00000") {
            showSuccessToast(t('joinpayMch.signingSuccessfully'));
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            showFailToast(`${huifuMch.data.message}`);
          }
        } else {
          showFailToast(`${data.message}`);
        }
      } catch (error) {
        console.error('请求发生错误:', error);
        showFailToast(t('joinpayMch.submitFailed'));
      }
    }
    // 记录表单填写
    const fieldUpdate = () => {
      // console.log('fieldUpdate');
      if (addParams.altMerchantType === '10') {
        addParams.bankAccountType = '1';
      }
      if (isMemoryFormType) {
        localStorage.setItem('joinPayMchForm', JSON.stringify(addParams));
        localStorage.setItem("huifuMchForm", JSON.stringify(huifuParams));
      }
    };
    // 图片上传状态，0：未上传 1：已上传
    const uploadCertFront = ref(0);
    const uploadCertBack = ref(0);
    const uploadCard = ref(0);
    const tradeLicenceStatus = ref(0);
    const accountLicenceStatus = ref(0);


    // 文件上传
    const afterRead = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      const params = {
        adminId: user.id,
        base64Str: null,
        fileType: null,
      };
      // 人像面
      if (cardNegativeList.value.length > 0 && uploadCertFront.value === 0) {
        params.base64Str = cardNegativeList.value[0].content;
        if (addParams.bankAccountType === '1') {
          params.fileType = "F40";
        } else {
          params.fileType = "F02";
        }
        try {
          console.log(params.fileType);
          const { data } = await newUploadPic(params);
          if (data.code == "00000") {
            file.status = 'done';
            uploadCertFront.value = 1;
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } catch {
          file.status = 'failed';
          file.message = '上传失败';
        }
      }
      // 国徽面
      if (cardPositiveList.value.length > 0 && uploadCertBack.value === 0) {
        params.base64Str = cardPositiveList.value[0].content;
        if (addParams.bankAccountType === '1') {
          params.fileType = "F41";
        } else {
          params.fileType = "F03";
        }
        try {
          console.log(params.fileType);
          const { data } = await newUploadPic(params);
          if (data.code == "00000") {
            file.status = 'done';
            uploadCertBack.value = 1;
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } catch {
          file.status = 'failed';
          file.message = '上传失败';
        }
      }
      // 结算卡
      if (statementCard.value.length > 0 && uploadCard.value === 0) {
        params.base64Str = statementCard.value[0].content;
        params.fileType = "F13";
        try {
          console.log(params.fileType);
          const { data } = await newUploadPic(params);
          if (data.code == "00000") {
            file.status = 'done';
            uploadCard.value = 1;
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } catch {
          file.status = 'failed';
          file.message = '上传失败';
        }
      }
      // 营业执照
      if (tradeLicenceList.value.length > 0 && tradeLicenceStatus.value === 0) {
        params.base64Str = tradeLicenceList.value[0].content;
        params.fileType = "F07";
        try {
          const { data } = await newUploadPic(params);
          if (data.code == "00000") {
            file.status = 'done';
            tradeLicenceStatus.value = 1;
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } catch {
          file.status = 'failed';
          file.message = '上传失败';
        }
      }
      // 开户许可证
      if (openAccountLicenceList.value.length > 0 && accountLicenceStatus.value === 0) {
        params.base64Str = openAccountLicenceList.value[0].content;
        params.fileType = "F08";
        try {
          const { data } = await newUploadPic(params);
          if (data.code == "00000") {
            file.status = 'done';
            accountLicenceStatus.value = 1;
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } catch {
          file.status = 'failed';
          file.message = '上传失败';
        }
      }
    }
    // 删除时改变上传状态
    const deleteCertFront = () => {
      uploadCertFront.value = 0;
      cardNegativeList.value = [];
    }
    const deleteCertBack = () => {
      uploadCertBack.value = 0;
      cardPositiveList.value = [];
    }
    const deleteCard = () => {
      uploadCard.value = 0;
      statementCard.value = [];
    }
    const deleteTradeLicence = () => {
      tradeLicenceStatus.value = 0;
      tradeLicenceList.value = [];
    }
    const deleteAccountLicence = () => {
      accountLicenceStatus.value = 0;
      openAccountLicenceList.value = [];
    }

    const onOversize = () => { showFailToast(t('joinpayMch.exceedPictSize')); }
    return {
      pageType,
      joinPayMchType,
      joinPayMchStep,
      ...toRefs(addParams),
      ...toRefs(huifuParams),
      ...toRefs(sentImageForm),
      cardPositiveList,
      cardNegativeList,
      tradeLicenceList,
      statementCard,
      openAccountLicenceList,
      saveJoinPayMchFun,
      updateJoinPay,
      sentImageFun,
      approveStatus,
      signStatus,
      conStat,
      updateSentImage,
      altMchSignFun,
      idCardExpiryShow,
      idCardExpiryOnConfirm,
      licenseExpiryShow,
      licenseExpiryOnConfirm,
      fieldUpdate,
      afterRead,
      deleteCertFront,
      deleteCertBack,
      deleteCard,
      deleteTradeLicence,
      deleteAccountLicence,
      onOversize,
      showBeginDate,
      showEndDate,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2050, 11, 31),
      onConfirmBeginDate,
      onConfirmEndDate,
      showBankAddress,
      showBankCode,
      bankCodePopList,
      bankCodePopConfirm,
      areaList,
      onConfirmBankAddress,
      showArea,
      onConfirm,
      showReAddress,
      onConfirmReAddress,
      showFoundDate,
      onConfirmFoundDate,
      showBeginDateLicense,
      showEndDateLicense,
      onConfirmEndDateLicense,
      onConfirmBeginDateLicense,
      huifuMchNO,
      sendCode,
      maskPhoneNumber,
      verCodeTimeInterval,
      verCodeTime,
      ...toRefs(verCodeTime),
      huifuAuditStatus,
      huifuPicUpStatus,
      huifuMchID,
      joinPayMchID,
      showPopover,
      regNameVisible,
      shortNameVisible,
      popoverVisible
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "../../styles/joinpayMch/index.less";
</style>