<template>
  <el-drawer
    :model-value="dialogInfoTradingAdd"
    :title="getDrawerTitle"
    :size="addType === 'payment' || addType === 'ucardValidate' ? '50%' : '25%'"
    :before-close="close"
    custom-class="payment-transfer-drawer"
    :wrapper-closable="true"
    :modal-append-to-body="false"
    :append-to-body="true"
  >
    <div class="drawer-content">
      <template v-if="addType == 'rate'">
        <el-form ref="rateFormRef" :rules="rateRules" :model="rateForm" label-width="120px">
          <el-form-item prop="currency" :label="$t('Ucard.PaymentTransfer.item2')">
            <el-input
              id="currency"
              v-model="rateForm.currency"
              :placeholder="$t('Placeholder.Input')"
              readonly
            ></el-input>
          </el-form-item>

          <el-form-item prop="targetCountry" :label="$t('Ucard.PaymentTransfer.item4')">
            <el-select
              id="targetCountry"
              v-model="rateForm.targetCountry"
              :placeholder="$t('Placeholder.Choose')"
              filterable
              allow-create
              default-first-option
            >
              <el-option
                v-for="item in targetCountryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item prop="targetCurrency" :label="$t('Ucard.PaymentTransfer.item3')">
            <el-select
              id="targetCurrency"
              v-model="rateForm.targetCurrency"
              :placeholder="$t('Placeholder.Choose')"
              filterable
              allow-create
              default-first-option
            >
              <el-option
                v-for="item in targetCurrencyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <span v-loading="loadingStates.rateQuery" class="btn crm-cursor" @click="confirmRateQuery">
          {{ $t('Btn.Search') }}
        </span>

        <!-- 显示查询结果 -->
        <el-form v-if="rateResult" label-width="120px" style="margin-top: 20px">
          <el-form-item :label="$t('Ucard.PaymentTransfer.item2')">
            {{ rateResult.currency }}
          </el-form-item>
          <el-form-item :label="$t('Ucard.PaymentTransfer.item3')">
            {{ rateResult.targetCurrency }}
          </el-form-item>
          <el-form-item :label="$t('Ucard.PaymentTransfer.item5')">
            {{ rateResult.exchangeRate }}
          </el-form-item>
        </el-form>
      </template>

      <template v-if="addType == 'payment' || addType == 'ucardValidate'">
        <div v-if="bankSummary" class="bank-config-summary" style="margin-bottom: 12px">
          <el-alert :title="bankSummary" type="info" :closable="false" show-icon />
        </div>
        <el-form
          ref="paymentFormRef"
          :rules="paymentRules"
          :model="paymentForm"
          label-width="160px"
          class="payment-form"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="bankId" :label="$t('Ucard.PaymentTransfer.item7')">
                <el-select
                  id="paymentBankId"
                  v-model="paymentForm.bankId"
                  :placeholder="$t('Placeholder.Choose')"
                  filterable
                  allow-create
                  default-first-option
                  @change="onBankChange"
                >
                  <el-option
                    v-for="item in targetBankOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="uniqueId" :label="$t('Ucard.PaymentTransfer.item8')">
                <el-input
                  id="uniqueId"
                  v-model="paymentForm.uniqueId"
                  readonly
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <h3 style="padding: 15px; font-size: 16px">{{ $t('Ucard.PaymentTransfer.item6') }}</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="amount" :label="$t('Ucard.PaymentTransfer.item9')">
                <el-input
                  id="amount"
                  v-model="paymentForm.amount"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="postscript" :label="$t('Ucard.PaymentTransfer.item10')">
                <el-input
                  id="postscript"
                  v-model="paymentForm.postscript"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="relationship" :label="$t('Ucard.PaymentTransfer.item11')">
                <el-select
                  id="relationship"
                  v-model="paymentForm.relationship"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in relationshipOptions"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sourceFunds" :label="$t('Ucard.PaymentTransfer.item33')">
                <el-select
                  id="sourceFunds"
                  v-model="paymentForm.sourceFunds"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in sourceFundsOptions"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payPurpose" :label="$t('Ucard.PaymentTransfer.item41')">
                <el-select
                  id="payPurpose"
                  v-model="paymentForm.payPurpose"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in payPurposeOptions"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 付款人信息 -->
          <h3 style="padding: 15px; font-size: 16px">{{ $t('Ucard.PaymentTransfer.item50') }}</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerType" :label="$t('Ucard.PaymentTransfer.item51')">
                <el-select
                  id="payerType"
                  v-model="paymentForm.payer.payerType"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    value="INDIVIDUAL"
                    :label="$t('Ucard.PaymentTransfer.item52')"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payer.payerLastName" :label="$t('Ucard.PaymentTransfer.item53')">
                <el-input
                  id="payerLastName"
                  v-model="paymentForm.payer.payerLastName"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerFirstName" :label="$t('Ucard.PaymentTransfer.item54')">
                <el-input
                  id="payerFirstName"
                  v-model="paymentForm.payer.payerFirstName"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payer.payerIdNo" :label="$t('Ucard.PaymentTransfer.item55')">
                <el-input
                  id="payerIdNo"
                  v-model="paymentForm.payer.payerIdNo"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerIdNoType" :label="$t('Ucard.PaymentTransfer.item56')">
                <el-select
                  id="payerIdNoType"
                  v-model="paymentForm.payer.payerIdNoType"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in idNoTypeOptions"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payer.payerIdCountry" :label="$t('Ucard.PaymentTransfer.item59')">
                <el-select
                  id="payerIdCountry"
                  v-model="paymentForm.payer.payerIdCountry"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item60')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in countryCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerBirthday" :label="$t('Ucard.PaymentTransfer.item61')">
                <el-date-picker
                  id="payerBirthday"
                  v-model="paymentForm.payer.payerBirthday"
                  style="width: 100%"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('Placeholder.ChooseDate')"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="payer.payerNationalityCountry"
                :label="$t('Ucard.PaymentTransfer.item62')"
              >
                <el-select
                  id="payerNationalityCountry"
                  v-model="paymentForm.payer.payerNationalityCountry"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item63')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in countryCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerMobile" :label="$t('Ucard.PaymentTransfer.item64')">
                <el-input
                  id="payerMobile"
                  v-model="paymentForm.payer.payerMobile"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="payer.payerCountryCode"
                :label="$t('Ucard.PaymentTransfer.item65')"
              >
                <el-select
                  id="payerCountryCode"
                  v-model="paymentForm.payer.payerCountryCode"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item66')"
                  style="width: 100%"
                  @change="handlePayerCountryChange"
                >
                  <el-option
                    v-for="item in countryCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerCityCode" :label="$t('Ucard.PaymentTransfer.item67')">
                <el-select
                  id="payerCityCode"
                  v-model="paymentForm.payer.payerCityCode"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item68')"
                  style="width: 100%"
                  :disabled="!paymentForm.payer.payerCountryCode"
                >
                  <el-option
                    v-for="item in payerCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payer.payerAddress" :label="$t('Ucard.PaymentTransfer.item69')">
                <el-input
                  id="payerAddress"
                  v-model="paymentForm.payer.payerAddress"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payer.payerPostCode" :label="$t('Ucard.PaymentTransfer.item70')">
                <el-input
                  id="payerPostCode"
                  v-model="paymentForm.payer.payerPostCode"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="payer.payerOccupation"
                :label="$t('Ucard.PaymentTransfer.item71')"
              >
                <el-input
                  id="payerOccupation"
                  v-model="paymentForm.payer.payerOccupation"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 付款人信息区块结尾插入校验付款人按钮 -->
          <div style="margin: 16px 15px 32px 0; text-align: right">
            <el-button type="warning" :loading="loadingStates.validatePayer" @click="validatePayer">
              {{ $t('Ucard.PaymentTransfer.item72') }}
            </el-button>
          </div>

          <!-- 收款人信息 -->
          <h3 style="padding: 15px; font-size: 16px">{{ $t('Ucard.PaymentTransfer.item73') }}</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benAccountNum" :label="$t('Ucard.PaymentTransfer.item75')">
                <el-input
                  id="benAccountNum"
                  v-model="paymentForm.payee.benAccountNum"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benAccountName" :label="$t('Ucard.PaymentTransfer.item76')">
                <el-input
                  id="benAccountName"
                  v-model="paymentForm.payee.benAccountName"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benCountryCode" :label="$t('Ucard.PaymentTransfer.item77')">
                <el-select
                  id="benCountryCode"
                  v-model="paymentForm.payee.benCountryCode"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item78')"
                  style="width: 100%"
                  @change="handlePayeeCountryChange"
                >
                  <el-option
                    v-for="item in countryCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benCityCode" :label="$t('Ucard.PaymentTransfer.item79')">
                <el-select
                  id="benCityCode"
                  v-model="paymentForm.payee.benCityCode"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item80')"
                  style="width: 100%"
                  :disabled="!paymentForm.payee.benCountryCode"
                >
                  <el-option
                    v-for="item in payeeCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benAddress" :label="$t('Ucard.PaymentTransfer.item81')">
                <el-input
                  id="benAddress"
                  v-model="paymentForm.payee.benAddress"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benPostCode" :label="$t('Ucard.PaymentTransfer.item82')">
                <el-input
                  id="benPostCode"
                  v-model="paymentForm.payee.benPostCode"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benLastName" :label="$t('Ucard.PaymentTransfer.item83')">
                <el-input
                  id="benLastName"
                  v-model="paymentForm.payee.benLastName"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benFirstName" :label="$t('Ucard.PaymentTransfer.item84')">
                <el-input
                  id="benFirstName"
                  v-model="paymentForm.payee.benFirstName"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benBankCode" :label="$t('Ucard.PaymentTransfer.item85')">
                <el-input
                  id="benBankCode"
                  v-model="paymentForm.payee.benBankCode"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="payee.benNationalityCountry"
                :label="$t('Ucard.PaymentTransfer.item86')"
              >
                <el-select
                  id="benNationalityCountry"
                  v-model="paymentForm.payee.benNationalityCountry"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item87')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in countryCityList"
                    :key="item.id"
                    :label="item.cnName"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benIdNoType" :label="$t('Ucard.PaymentTransfer.item88')">
                <el-select
                  id="benIdNoType"
                  v-model="paymentForm.payee.benIdNoType"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in idNoType2Options"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benIdNo" :label="$t('Ucard.PaymentTransfer.item91')">
                <el-input
                  id="benIdNo"
                  v-model="paymentForm.payee.benIdNo"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                prop="payee.benIdExpirationDate"
                :label="$t('Ucard.PaymentTransfer.item92')"
              >
                <el-date-picker
                  id="benIdExpirationDate"
                  v-model="paymentForm.payee.benIdExpirationDate"
                  style="width: 100%"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('Placeholder.ChooseDate')"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benBirthday" :label="$t('Ucard.PaymentTransfer.item93')">
                <el-date-picker
                  id="benBirthday"
                  v-model="paymentForm.payee.benBirthday"
                  style="width: 100%"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('Placeholder.ChooseDate')"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="payee.benMobileCode" :label="$t('Ucard.PaymentTransfer.item94')">
                <el-select
                  id="benMobileCode"
                  v-model="paymentForm.payee.benMobileCode"
                  filterable
                  :placeholder="$t('Ucard.PaymentTransfer.item95')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.id"
                    :label="'+' + item.callingCode + ' ' + item.enName"
                    :value="item.callingCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="payee.benMobile" :label="$t('Ucard.PaymentTransfer.item96')">
                <el-input
                  id="benMobile"
                  v-model="paymentForm.payee.benMobile"
                  :placeholder="$t('Placeholder.Input')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                prop="payee.benBankAccountType"
                :label="$t('Ucard.PaymentTransfer.item97')"
              >
                <el-select
                  id="benBankAccountType"
                  v-model="paymentForm.payee.benBankAccountType"
                  :placeholder="$t('Placeholder.Choose')"
                >
                  <el-option
                    v-for="item in bankAccountTypeOptions"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <div style="padding: 16px 15px 32px 0; text-align: right">
            <el-button
              type="warning"
              :loading="loadingStates.validatePayee"
              @click="validatePayee"
              >{{ $t('Ucard.PaymentTransfer.item102') }}</el-button
            >
          </div>

          <div class="button-container">
            <el-button type="primary" :loading="loadingStates.validateAll" @click="validateAll">{{
              $t('Ucard.PaymentTransfer.item104')
            }}</el-button>
            <el-button
              type="primary"
              :loading="loadingStates.ucardTransfer"
              @click="ucardTransfer"
              >{{ $t('Ucard.PaymentTransfer.item105') }}</el-button
            >
          </div>
        </el-form>
      </template>
      <!-- 提交调单信息或文件 -->
      <template v-if="addType == 'dispute'">
        <div class="dispute-submit-container">
          <h3 class="section-title">{{ $t('Ucard.PaymentTransfer.text1') }}</h3>

          <el-form
            ref="disputeFormRef"
            :model="disputeForm"
            :rules="disputeRules"
            label-width="120px"
            class="dispute-form"
          >
            <!-- 订单号 -->
            <el-form-item prop="orderNo" :label="$t('Ucard.PaymentTransfer.text2')" required>
              <el-input
                v-model="disputeForm.orderNo"
                :placeholder="$t('Ucard.PaymentTransfer.text3')"
              ></el-input>
              <span class="note">{{ $t('Ucard.PaymentTransfer.text4') }}</span>
            </el-form-item>

            <!-- 订单信息部分 -->
            <div class="section-divider">
              <h4 class="subsection-title">{{ $t('Ucard.PaymentTransfer.text5') }}</h4>
              <p class="form-tip">{{ $t('Ucard.PaymentTransfer.text6') }}</p>
            </div>

            <div
              v-for="(info, index) in disputeForm.transferInfos"
              :key="'transfer-info-' + index"
              class="info-item"
            >
              <el-form-item
                :prop="`transferInfos.${index}.code`"
                :rules="{
                  required: true,
                  message: $t('Ucard.PaymentTransfer.text7'),
                  trigger: 'change',
                }"
                :label="$t('Ucard.PaymentTransfer.text8')"
              >
                <el-select v-model="info.code" :placeholder="$t('Ucard.PaymentTransfer.text9')">
                  <el-option
                    v-for="(label, code) in infoTypeDict"
                    :key="code"
                    :value="code"
                    :label="label"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                :prop="`transferInfos.${index}.content`"
                :rules="{
                  required: true,
                  message: $t('Ucard.PaymentTransfer.text10'),
                  trigger: 'blur',
                }"
                :label="$t('Ucard.PaymentTransfer.text11')"
              >
                <el-input
                  v-model="info.content"
                  :placeholder="$t('Ucard.PaymentTransfer.text12')"
                ></el-input>
                <span class="note">{{ $t('Ucard.PaymentTransfer.text13') }}</span>
              </el-form-item>

              <el-button
                v-if="index > 0"
                type="danger"
                size="small"
                circle
                class="remove-btn"
                @click="removeInfo(index)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>

            <div class="add-btn-container">
              <el-button type="primary" @click="addInfo">
                <el-icon><Plus /></el-icon>
                {{ $t('Ucard.PaymentTransfer.text14') }}
              </el-button>
            </div>

            <!-- 订单文件部分 -->
            <div class="section-divider">
              <h4 class="subsection-title">{{ $t('Ucard.PaymentTransfer.text15') }}</h4>
              <p class="form-tip">{{ $t('Ucard.PaymentTransfer.text16') }}</p>
            </div>

            <div
              v-for="(file, index) in disputeForm.transferFiles"
              :key="'transfer-file-' + index"
              class="file-item"
            >
              <el-form-item
                :prop="`transferFiles.${index}.code`"
                :rules="{
                  required: true,
                  message: $t('Ucard.PaymentTransfer.text17'),
                  trigger: 'change',
                }"
                :label="$t('Ucard.PaymentTransfer.text18')"
              >
                <el-select v-model="file.code" :placeholder="$t('Ucard.PaymentTransfer.text19')">
                  <el-option
                    v-for="(label, code) in fileTypeDict"
                    :key="code"
                    :value="code"
                    :label="label"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                :prop="`transferFiles.${index}.content`"
                :rules="{
                  required: true,
                  message: $t('Ucard.PaymentTransfer.text20'),
                  trigger: 'change',
                }"
                :label="$t('Ucard.PaymentTransfer.text21')"
              >
                <el-upload
                  :http-request="(option) => handleKycFileUpload(option, index)"
                  :show-file-list="false"
                  :action="uploadUrl"
                  :headers="headers"
                  :before-upload="beforeFileUpload"
                >
                  <el-button type="primary" :loading="loadingStates.fileUpload">{{
                    $t('Ucard.PaymentTransfer.text22')
                  }}</el-button>
                </el-upload>

                <div v-if="file.content" class="upload-preview">
                  <img :src="file.content" class="preview-image" />
                  <div class="preview-actions">
                    <el-button type="text" @click="removeFile(index)">{{
                      $t('Ucard.PaymentTransfer.text23')
                    }}</el-button>
                  </div>
                </div>
                <el-icon v-else><Plus /></el-icon>
                <span class="note">{{ $t('Ucard.PaymentTransfer.text24') }}</span>
              </el-form-item>

              <el-button
                v-if="index > 0"
                type="danger"
                size="small"
                circle
                class="remove-btn"
                @click="removeFile(index)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </el-form>
        </div>
      </template>
    </div>
  </el-drawer>
</template>
<script setup>
  import { ref, reactive, computed, watch, onMounted, inject } from 'vue'
  import { useI18n } from 'vue-i18n'
  import Config from '@/config/index'
  import Service from '@/service/ucard'
  import {
    bankAccountTypeOptions,
    idNoType2Options,
    idNoTypeOptions,
    payPurposeOptions,
    relationshipOptions,
    sourceFundsOptions,
  } from '@/views/components/PaymentTransfer/const'
  import { Delete, Plus } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'

  const { t } = useI18n()
  const { Code } = Config
  const Session = inject('session')

  // Props
  const props = defineProps({
    dialogInfoTradingAdd: {
      type: Boolean,
      default: false,
    },
    addType: {
      default: '',
    },
    editor: {
      default: '',
    },
    myInfo: {
      default: '',
    },
    formList: {
      default: '',
    },
  })

  // Emits
  const emit = defineEmits(['closeAdd'])

  // Refs
  const rateFormRef = ref(null)
  const paymentFormRef = ref(null)
  const disputeFormRef = ref(null)

  // Reactive data
  const imgUrl = Config.Host85
  const uploadUrl = Config.Host85 + '/ucard/upload/file'
  const headers = reactive({
    'Access-Token': Session.Get('access_token') || '',
  })

  const loadingStates = reactive({
    rateQuery: false,
    validatePayer: false,
    validatePayee: false,
    validateAll: false,
    ucardTransfer: false,
    fileUpload: false,
  })

  const rateForm = reactive({
    currency: 'EUR',
    targetCurrency: '',
    targetCountry: '',
  })

  const rateRules = reactive({
    targetCurrency: [{ required: true, message: t('Ucard.PaymentTransfer.ms1'), trigger: 'blur' }],
    targetCountry: [{ required: true, message: t('Ucard.PaymentTransfer.ms2'), trigger: 'blur' }],
  })

  const rateResult = ref(null)

  // 代付相关数据
  const paymentForm = reactive({
    bankId: 2671,
    uniqueId: 'af3f6910-023a-4d88-a17a-12322ad194a4',
    originOrderNo: '',
    amount: 200,
    postscript: 'testorder',
    relationship: 'OTHER',
    sourceFunds: 'SAVINGS',
    payPurpose: 'INTERNATIONAL_TRADE',
    payer: {
      payerType: 'INDIVIDUAL',
      payerLastName: 'zhang',
      payerFirstName: 'tom',
      payerIdNo: 'ES125664',
      payerIdNoType: 'PASSPORT',
      payerIdCountry: 'SG',
      payerBirthday: '1990-10-10',
      payerNationalityCountry: 'SG',
      payerMobile: '+65012345678',
      payerCountryCode: 'SG',
      payerCityCode: 'SG_1',
      payerAddress: '21 Tampines Ave 1, Singapore 529757',
      payerPostCode: '999002',
      payerOccupation: 'worker',
    },
    payee: {
      bankId: 2671,
      benAccountNum: '235486845630',
      benAccountName: 'wangfei',
      benCountryCode: 'SG',
      benCityCode: 'SG_1',
      benAddress: '21 Tampines Ave 1, Singapore 529757',
      benPostCode: '999002',
      benTransBankSwift: '',
      benLastName: 'zhang',
      benFirstName: 'alex',
      benNationalityCountry: 'SG',
      benIdNoType: 'PASSPORT',
      benIdNo: '1334924322424',
      benIdExpirationDate: '2030-01-01',
      benBirthday: '2001-01-01',
      benMobileCode: '+67',
      benMobile: '18326559132',
      benBankAccountType: 'SAVINGS',
    },
  })

  const paymentRules = reactive({
    bankId: [{ required: true, message: t('Ucard.PaymentTransfer.ms3'), trigger: 'blur' }],
    uniqueId: [{ required: true, message: t('Ucard.PaymentTransfer.ms4'), trigger: 'blur' }],
    amount: [
      { required: true, message: t('Ucard.PaymentTransfer.ms6'), trigger: 'blur' },
      { validator: validatePass, trigger: ['change', 'blur'] },
    ],
    postscript: [
      { required: true, message: t('Ucard.PaymentTransfer.ms7'), trigger: 'blur' },
      {
        min: 5,
        max: 64,
        message: t('Ucard.PaymentTransfer.ms8'),
        trigger: 'blur',
      },
      {
        validator: validOnlySupportEnglish,
        trigger: ['change', 'blur'],
      },
    ],
    payer: {
      payerLastName: [
        { required: true, message: t('Ucard.PaymentTransfer.ms9'), trigger: 'blur' },
        {
          min: 2,
          max: 50,
          message: t('Ucard.PaymentTransfer.ms10'),
          trigger: 'blur',
        },
        {
          validator: validatePassChinessCharacters,
          trigger: ['change', 'blur'],
        },
      ],
      payerFirstName: [
        { required: true, message: t('Ucard.PaymentTransfer.ms9'), trigger: 'blur' },
        {
          min: 2,
          max: 50,
          message: t('Ucard.PaymentTransfer.ms10'),
          trigger: 'blur',
        },
        {
          validator: validatePassChinessCharacters,
          trigger: ['change', 'blur'],
        },
      ],
      payerIdNo: [
        {
          required: true,
          message: t('Ucard.PaymentTransfer.ms11'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 18,
          message: t('Ucard.PaymentTransfer.ms12'),
          trigger: 'blur',
        },
        {
          validator: validatePassChinessCharacters,
          trigger: ['change', 'blur'],
        },
      ],
      payerIdNoType: [
        {
          required: true,
          message: t('Ucard.PaymentTransfer.ms13'),
          trigger: 'change',
        },
      ],
      payerIdCountry: [
        { required: true, message: t('Ucard.PaymentTransfer.ms14'), trigger: 'blur' },
        { min: 2, max: 2, message: t('Ucard.PaymentTransfer.ms15'), trigger: 'blur' },
      ],
      payerBirthday: [
        { required: true, message: t('Ucard.PaymentTransfer.ms16'), trigger: 'change' },
      ],
      payerNationalityCountry: [
        { required: true, message: t('Ucard.PaymentTransfer.ms17'), trigger: 'blur' },
      ],
      payerMobile: [
        { required: true, message: t('Ucard.PaymentTransfer.ms18'), trigger: 'blur' },
        {
          min: 8,
          max: 15,
          message: t('Ucard.PaymentTransfer.ms19'),
          trigger: 'blur',
        },
      ],
      payerCountryCode: [
        { required: true, message: t('Ucard.PaymentTransfer.ms20'), trigger: 'blur' },
        { min: 2, max: 2, message: t('Ucard.PaymentTransfer.ms21'), trigger: 'blur' },
      ],
      payerCityCode: [
        { required: true, message: t('Ucard.PaymentTransfer.ms22'), trigger: 'blur' },
      ],
      payerAddress: [
        { required: true, message: t('Ucard.PaymentTransfer.ms23'), trigger: 'blur' },
        {
          min: 10,
          max: 100,
          message: t('Ucard.PaymentTransfer.ms24'),
          trigger: 'blur',
        },
        {
          validator: validatePassChinessCharacters,
          trigger: ['change', 'blur'],
        },
      ],
      payerPostCode: [
        { required: true, message: t('Ucard.PaymentTransfer.ms25'), trigger: 'blur' },
        {
          min: 3,
          max: 9,
          message: t('Ucard.PaymentTransfer.ms26'),
          trigger: ['change', 'blur'],
        },
      ],
      payerOccupation: [
        { required: true, message: t('Ucard.PaymentTransfer.ms27'), trigger: 'blur' },
        {
          min: 3,
          max: 20,
          message: t('Ucard.PaymentTransfer.ms28'),
          trigger: 'blur',
        },
        {
          validator: validOnlySupportEnglish,
          trigger: ['change', 'blur'],
        },
      ],
    },
    payee: {
      benAccountNum: [
        { required: true, message: t('Ucard.PaymentTransfer.ms29'), trigger: 'blur' },
        {
          validator: validatePassChinessCharacters,
          trigger: ['change', 'blur'],
        },
        {
          min: 2,
          max: 48,
          message: t('Ucard.PaymentTransfer.ms30'),
          trigger: 'blur',
        },
      ],
      benAccountName: [
        { required: true, message: t('Ucard.PaymentTransfer.ms31'), trigger: 'blur' },
        {
          min: 1,
          max: 100,
          message: t('Ucard.PaymentTransfer.ms32'),
          trigger: 'blur',
        },
      ],
      benLastName: [
        {
          min: 2,
          max: 60,
          message: t('Ucard.PaymentTransfer.ms33'),
          trigger: 'change',
        },
      ],
      benfirstName: [
        {
          min: 2,
          max: 60,
          message: t('Ucard.PaymentTransfer.ms34'),
          trigger: 'change',
        },
      ],
    },
  })

  const paymentResult = ref(null)

  const payerForm = reactive({
    payerType: 'INDIVIDUAL',
    payerLastName: '',
    payerFirstName: '',
    payerIdNo: '',
    payerIdNoType: '',
    payerIdCountry: '',
    payerBirthday: '',
    payerNationalityCountry: '',
    payerMobile: '',
    payerCountryCode: '',
    payerCityCode: '',
    payerAddress: '',
    payerPostCode: '',
    payerOccupation: '',
  })

  const payerValidateResult = ref(null)

  const payeeForm = reactive({
    bankId: '',
    benAccountNum: '',
    benAccountName: '',
    benCountryCode: '',
    benCityCode: '',
    benAddress: '',
    benPostCode: '',
    benBankCode: '',
    benTransBankSwift: '',
    benLastName: '',
    benFirstName: '',
    benNationalityCountry: '',
    benIdNoType: '',
    benIdNo: '',
    benIdExpirationDate: '',
    benBirthday: '',
    benMobileCode: '',
    benMobile: '',
    benBankAccountType: '',
  })

  const payeeRules = reactive({
    bankId: [{ required: true, message: t('Ucard.PaymentTransfer.ms35'), trigger: 'blur' }],
    benAccountNum: [
      { required: true, message: t('Ucard.PaymentTransfer.ms36'), trigger: 'blur' },
      {
        min: 2,
        max: 48,
        message: t('Ucard.PaymentTransfer.ms37'),
        trigger: 'blur',
      },
    ],
    benAccountName: [
      { required: true, message: t('Ucard.PaymentTransfer.ms38'), trigger: 'blur' },
      {
        min: 1,
        max: 100,
        message: t('Ucard.PaymentTransfer.ms39'),
        trigger: 'blur',
      },
    ],
  })

  const payeeValidateResult = ref(null)

  const disputeForm = reactive({
    orderNo: '',
    transferInfos: [{ code: '', content: '' }],
    transferFiles: [{ code: '', content: '' }],
  })

  const disputeRules = reactive({
    orderNo: [{ required: true, message: t('Ucard.PaymentTransfer.ms40'), trigger: 'blur' }],
  })

  const disputeResult = ref(null)

  const infoTypeDict = computed(() => ({
    1: t('Ucard.PaymentTransfer.ms41'),
    2: t('Ucard.PaymentTransfer.ms42'),
    3: t('Ucard.PaymentTransfer.ms43'),
    4: t('Ucard.PaymentTransfer.ms44'),
    5: t('Ucard.PaymentTransfer.ms45'),
    6: t('Ucard.PaymentTransfer.ms46'),
    16: t('Ucard.PaymentTransfer.ms47'),
  }))

  const fileTypeDict = computed(() => ({
    21: t('Ucard.PaymentTransfer.ms48'),
    22: t('Ucard.PaymentTransfer.ms49'),
    23: t('Ucard.PaymentTransfer.ms50'),
    24: t('Ucard.PaymentTransfer.ms51'),
    25: t('Ucard.PaymentTransfer.ms52'),
    26: t('Ucard.PaymentTransfer.ms53'),
  }))

  const targetCurrencyOptions = ref([])
  const targetCountryOptions = ref([])
  const targetBankOptions = ref([])
  const bankConfigList = ref([])
  const bankSummary = ref('')
  const countryCityList = ref([])
  const payerCityList = ref([])
  const payeeCityList = ref([])
  const countryList = ref([])
  const allCountryBanks = ref([])

  // Computed properties
  const getDrawerTitle = computed(() => {
    const titles = {
      rate: t('Ucard.UserOrder.p6'),
      payment: t('Ucard.UserOrder.p1'),
      ucardValidate: t('Ucard.UserOrder.p2'),
      payerValidate: t('Ucard.UserOrder.p3'),
      payeeValidate: t('Ucard.UserOrder.p4'),
      dispute: t('Ucard.UserOrder.p8'),
    }
    return titles[props.addType] || ''
  })

  // Methods
  // 统一的文件上传处理
  async function handleFileUpload(option, type, index) {
    const loadingKey = type === 'kyc' ? 'fileUpload' : `${type}Upload`
    loadingStates[loadingKey] = true

    try {
      const formData = new FormData()
      formData.append('file', option.file)

      const res = await Service.ucardUpload(formData)
      if (res.code === 200 && res.data) {
        if (type === 'kyc') {
          disputeForm.transferFiles[index].content = res.data
        } else {
          // 这里需要根据具体逻辑调整
        }
        ElMessage.success(t('Ucard.PaymentTransfer.ms54'))
        option.onSuccess(res, option.file)
      } else {
        throw new Error(res.msg)
      }
    } catch (error) {
      ElMessage.error(error.message || t('Ucard.PaymentTransfer.ms55'))
      option.onError()
    } finally {
      loadingStates[loadingKey] = false
    }
  }

  // 统一的表单验证方法
  async function validateForm(formRef) {
    try {
      await formRef.value.validate()
      return true
    } catch (error) {
      ElMessage.warning(t('Ucard.PaymentTransfer.ms58'))
      return false
    }
  }

  // 统一的API调用方法
  async function callApi(apiMethod, params, successMessage, errorMessage) {
    try {
      const res = await apiMethod(params)
      if (res.code === Code.StatusOK) {
        ElMessage.success(t(successMessage))
        return res.data
      } else {
        throw new Error(res.msg)
      }
    } catch (error) {
      ElMessage.error(error.message || t(errorMessage))
      return null
    }
  }

  // 使用统一的方法重写现有方法
  async function handleKycFileUpload(option, index) {
    return handleFileUpload(option, 'kyc', index)
  }

  async function validatePayee() {
    loadingStates.validatePayee = true
    try {
      await callApi(
        Service.ucardValidatePayee,
        {
          ...paymentForm.payee,
          bankId: paymentForm.bankId,
        },
        'Ucard.PaymentTransfer.ms72',
        'Ucard.PaymentTransfer.ms55'
      )
    } finally {
      loadingStates.validatePayee = false
    }
  }

  async function validatePayer() {
    loadingStates.validatePayer = true
    try {
      await callApi(
        Service.ucardValidatePayer,
        paymentForm.payer,
        'Ucard.PaymentTransfer.ms73',
        'Ucard.PaymentTransfer.ms55'
      )
    } finally {
      loadingStates.validatePayer = false
    }
  }

  async function validateAll() {
    loadingStates.validateAll = true
    try {
      const { ...rest } = paymentForm
      await callApi(
        Service.ucardValidate,
        rest,
        'Ucard.PaymentTransfer.ms74',
        'Ucard.PaymentTransfer.ms55'
      )
    } finally {
      loadingStates.validateAll = false
    }
  }

  async function ucardTransfer() {
    loadingStates.ucardTransfer = true
    try {
      const result = await callApi(
        Service.ucardTransfer,
        paymentForm,
        'Ucard.PaymentTransfer.ms75',
        'Ucard.PaymentTransfer.ms55'
      )
      if (result) {
        paymentResult.value = result
        emit('closeAdd', false)
      }
    } finally {
      loadingStates.ucardTransfer = false
    }
  }

  // 优化表单重置方法
  function resetForm() {
    const defaultForms = {
      dispute: {
        orderNo: '',
        transferInfos: [{ code: '', content: '' }],
        transferFiles: [{ code: '', content: '' }],
      },
      rate: {
        currency: 'EUR',
        targetCurrency: '',
        targetCountry: '',
      },
      payment: {
        bankId: 2671,
        uniqueId: 'af3f6910-023a-4d88-a17a-12322ad194a4',
        // ... 其他默认值
      },
    }

    Object.keys(defaultForms).forEach((formType) => {
      const formRef =
        formType === 'rate'
          ? rateFormRef
          : formType === 'payment'
          ? paymentFormRef
          : formType === 'dispute'
          ? disputeFormRef
          : null

      if (formRef && formRef.value) {
        formRef.value.resetFields()
        if (formType === 'rate') {
          Object.assign(rateForm, defaultForms[formType])
        } else if (formType === 'payment') {
          Object.assign(paymentForm, defaultForms[formType])
        } else if (formType === 'dispute') {
          Object.assign(disputeForm, defaultForms[formType])
        }
      }
    })
  }

  function close() {
    emit('closeAdd', false)
  }

  async function confirmRateQuery() {
    try {
      await rateFormRef.value.validate()
      loadingStates.rateQuery = true
      try {
        let res = await Service.ucardRate(rateForm)
        if (res.code == Code.StatusOK) {
          rateResult.value = res.data
          // 注意：这里使用了 $pigeon，在 Vue 3 中可能需要调整
          // this.$pigeon.MessageOK(t('Ucard.PaymentTransfer.ms64'))
          ElMessage.success(t('Ucard.PaymentTransfer.ms64'))
        } else {
          // this.$pigeon.MessageError(res.msg)
          ElMessage.error(res.msg)
        }
      } catch (error) {
        // console.error("查询法币汇率失败:", error)
        // this.$pigeon.MessageError(t("Ucard.PaymentTransfer.ms65"))
        ElMessage.error(t('Ucard.PaymentTransfer.ms65'))
      } finally {
        loadingStates.rateQuery = false
      }
    } catch (error) {
      return false
    }
  }

  async function loadBankOptions() {
    if (allCountryBanks.value.length) return
    const res = await Service.ucardBanks()
    if (res && (res.code === 0 || res.code === 200) && Array.isArray(res.data)) {
      allCountryBanks.value = res.data
      targetCountryOptions.value = res.data
        .filter((item) => item.country && item.countryName)
        .map((item) => ({
          value: item.country,
          label: `${item.country}（${item.countryName}）`,
        }))
    }
  }

  async function loadBankConfigList() {
    const res = await Service.ucardBanks()
    if (res && (res.code === 0 || res.code === 200) && Array.isArray(res.data)) {
      const allBanks = res.data.flatMap((item) => item.bankList || [])
      bankConfigList.value = allBanks
      targetBankOptions.value = allBanks.map((bank) => ({
        label: bank.bankName + '（' + bank.bankId + '）',
        value: bank.bankId,
      }))
      const names = allBanks.map((b) => b.bankName).filter(Boolean)
      bankSummary.value = `支持银行：${names.slice(0, 5).join('、')}${
        names.length > 5 ? ' 等' + names.length + '家' : ''
      }`
    } else {
      bankConfigList.value = []
      targetBankOptions.value = []
      bankSummary.value = ''
    }
  }

  function onBankChange(bankId) {
    const bank = bankConfigList.value.find((b) => b.bankId === bankId)
    if (bank) {
      paymentForm.feeAmount = bank.feeAmount
      paymentForm.feeRate = bank.feeRate
      paymentForm.paymentType = bank.paymentType
    } else {
      paymentForm.feeAmount = ''
      paymentForm.feeRate = ''
      paymentForm.paymentType = ''
    }
  }

  function validatePass(rule, value, callback) {
    if (value < 100) {
      callback(new Error(t('Ucard.PaymentTransfer.ms67')))
    }
    callback()
  }

  function validatePassChinessCharacters(rule, value, cb) {
    if (/^[^\u4e00-\u9fa5]+$/.test(value)) {
      cb()
    } else {
      cb(new Error(t('Ucard.PaymentTransfer.ms68')))
    }
  }

  function validFilesValueLen(rule, value, cb, minLen, maxLen) {
    if (minLen < value.length < maxLen) {
      cb()
    } else {
      cb(new Error(t('Ucard.PaymentTransfer.ms69') + `${minLen}-${maxLen}`))
    }
  }

  function validOnlySupportEnglish(rule, value, cb) {
    if (/^[a-zA-Z]+$/.test(value)) {
      cb()
    } else {
      cb(new Error(t('Ucard.PaymentTransfer.ms70')))
    }
  }

  function handlePayeeCountryChange(countryCode) {
    paymentForm.payee.benCityCode = ''
    if (countryCode) {
      getCityListForSelect(countryCode, 'payee')
    } else {
      payeeCityList.value = []
    }
  }

  async function getCountryListForSelect() {
    const res = await Service.ucardCountryCity({ code: '' })
    if (res.code === 200 || res.code === 0) {
      countryCityList.value = res.data || []
    }
  }

  async function getCityListForSelect(countryCode, type = 'payer') {
    const res = await Service.ucardCountryCity({ code: countryCode })
    if (res.code === 200 || res.code === 0) {
      if (type === 'payer') {
        payerCityList.value = res.data || []
      } else {
        payeeCityList.value = res.data || []
      }
    }
  }

  async function handlePayerCountryChange(countryCode) {
    paymentForm.payer.payerCityCode = ''
    if (countryCode) {
      await getCityListForSelect(countryCode, 'payer')
    } else {
      payerCityList.value = []
    }
  }

  async function getCountryList() {
    const res = await Service.countryGet({})
    if (res.code === 200 || res.code === 0) {
      countryList.value = res.data
    } else {
      ElMessage.error(res.msg || t('Ucard.PaymentTransfer.ms71'))
    }
  }

  function addInfo() {
    disputeForm.transferInfos.push({ code: '', content: '' })
  }

  function removeInfo(index) {
    disputeForm.transferInfos.splice(index, 1)
  }

  function addFile() {
    disputeForm.transferFiles.push({ code: '', content: '' })
  }

  function removeFile(index) {
    disputeForm.transferFiles.splice(index, 1)
  }

  function beforeFileUpload(file) {
    const isImage =
      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isImage) {
      ElMessage.error(t('Ucard.PaymentTransfer.ms56'))
      return false
    }

    if (!isLt2M) {
      ElMessage.error(t('Ucard.PaymentTransfer.ms57'))
      return false
    }

    return true
  }

  // Watchers
  watch(
    () => props.formList,
    (form) => {
      if (form && form.uniqueId) {
        paymentForm.uniqueId = form.uniqueId
      }
    },
    { immediate: true }
  )

  watch(
    () => rateForm.targetCountry,
    (newCountry) => {
      if (newCountry && allCountryBanks.value.length) {
        const countryObj = allCountryBanks.value.find((item) => item.country === newCountry)
        if (countryObj && countryObj.currency && countryObj.currencyName) {
          targetCurrencyOptions.value = [
            {
              value: countryObj.currency,
              label: `${countryObj.currency}（${countryObj.currencyName}）`,
            },
          ]
        } else {
          targetCurrencyOptions.value = []
        }
      } else {
        targetCurrencyOptions.value = []
      }
      rateForm.targetCurrency = ''
    },
    { immediate: true }
  )

  watch(
    () => props.addType,
    (type) => {
      if (type == '3' || type == '2') {
        // cardTypesList() // 这个方法在代码中未定义，需要确认
      }
      if (type == 'rate') {
        targetCurrencyOptions.value = []
        targetCountryOptions.value = []
        loadBankOptions()
      }
      if (type == 'payment' || type == 'ucardValidate') {
        loadBankConfigList()
      }
    }
  )

  // Lifecycle hooks
  onMounted(() => {
    getCountryList()
    getCountryListForSelect()
  })
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
