gypsy-crm-frontend-vu/pages/customer/withdrawal.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Home.page_customer.item3')" />
    <view class="container">
      <!-- <view
        class="app-page-head card-header d-flex gap-3 flex-wrap align-items-center justify-content-between border-0">
        <view class="app-page-head mb-0">
          <h1 class="app-page-title">Withdrawal</h1>
        </view>
      </view> -->

      <uni-loading v-if="loading" />
      <view class="row" v-else>
        <p v-if="channelData.type === 'DIGITAL_CURRENCY'" class="text-secondary" v-t="'Custom.Deposit.Des'" />
        <view class="col-lg-8">
          <view class="card">
            <view class="border-0 card-header">
              <uni-forms ref="formRef" :model="form" :rules="rules" labelWidth="200" label-position="top"
                v-show="isStep3" class="base-info-form" validate-trigger="submit">
                <view class="row">
                  <!-- 步骤1：选择账户 -->
                  <view class="col-lg-6">
                    <h5 class="mb-3" v-t="'Custom.Deposit.Title11'"></h5>
                    <uni-forms-item>
                      <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                        :placeholder="t('placeholder.choose')" @change="showCentAccountTransferTip" />
                    </uni-forms-item>
                  </view>
                  <!-- 步骤2：支付通道列表 -->
                  <view class="col-lg-6" v-if="step2">
                    <h5 class="mb-3" v-t="'Custom.Deposit.Title22'"></h5>
                    <uni-forms-item>
                      <cwg-combox :clearable="false" v-model:value="channelId" :options="channelListOptions"
                        :placeholder="t('placeholder.choose')" needSpace>
                      </cwg-combox>
                    </uni-forms-item>
                  </view>


                  <!-- 银行选择（针对有银行列表的通道） -->
                  <view class="col-lg-6" v-if="bankDate.length">
                    <h5 class="mb-3" v-t="'Custom.Withdraw.Title5'"></h5>
                    <uni-forms-item name="bankCode">
                      <cwg-combox :clearable="false" v-model:value="form.bankCode" :options="bankOptions"
                        :placeholder="t('placeholder.choose')" @change="selectCode" />
                    </uni-forms-item>
                  </view>
                  <!-- 电子钱包地址输入 -->
                  <template v-if="['CHANNEL_TYPE_WALLET', 'CHANNEL_TYPE_ALI_WALLET'].includes(channelData.type)">
                    <view class="col-lg-6">
                      <h5 class="mb-3">{{ getWalletLabel }}</h5>
                      <uni-forms-item name="address">
                        <uni-easyinput :clearable="false" v-model="form.address"
                          :placeholder="t('placeholder.input')" />
                      </uni-forms-item>
                    </view>
                  </template>
                  <!-- 数字货币选择（从已保存地址中选择） -->
                  <template v-if="channelData.type === 'DIGITAL_CURRENCY'">
                    <view class="col-lg-6">
                      <view
                        style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                        <h5 class="mb-3" v-t="'blockchain.item11'"></h5>
                      </view>
                      <uni-forms-item>
                        <cwg-combox :clearable="false" v-model:value="myId" :options="digitalOptions"
                          :placeholder="t('placeholder.choose')" @change="onDigitalCurrencyChange" />
                        <!-- <cwg-combox :clearable="false" v-model:value="myId" :options="digitalOptions"
                          :placeholder="t('placeholder.choose')" @change="onDigitalCurrencyChange"
                          :disabled="!ruleForm.bankBlockchain.length" /> -->
                      </uni-forms-item>

                      <h6 class="mb-3">
                        <text v-t="'blockchain.item10'"></text>
                        <text class="add-btn crm-cursor" @click="openAddBankCard('add_bankBlockchain')">
                          {{ t('Custom.Withdraw.addBank1') }}
                        </text>
                      </h6>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'blockchain.item3'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.addressName" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'blockchain.item4'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.address" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-12" v-if="form.addressProve">
                      <h5 class="mb-3" v-t="'blockchain.item5'"></h5>
                      <uni-forms-item>
                        <view class="proof">
                          <template v-if="form.addressProve && (form.addressProve.slice(-3).toLowerCase() === 'pdf')">
                            <cwg-link type="pdf1" :url="htmlUrl + form.addressProve" target="_blank"
                              class="state crm_state_blue">PDF</cwg-link>
                          </template>
                          <image v-else :src="imgUrl + form.addressProve" mode="aspectFit"
                            style="width: 100rpx; height: 100rpx;" @click="previewImage(imgUrl + form.addressProve)" />
                        </view>
                      </uni-forms-item>
                    </view>

                    <!-- <view class="col-lg-12">
                      <text class="tit"><text class="iconfont iconi"></text><text
                          v-t="'Custom.Deposit.Des'"></text></text>
                    </view> -->
                  </template>
                  <!-- 银行卡/信用卡选择下拉框 -->
                  <view class="col-lg-6"
                    v-if="['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD'].includes(channelData.type)">
                    <h5 class="mb-3" v-t="'Custom.Withdraw.Title4'"></h5>
                    <uni-forms-item>
                      <cwg-combox :clearable="false" v-model:value="myId" :options="bankCardOptions"
                        @change="chooseBank" :placeholder="t('placeholder.choose')" />
                    </uni-forms-item>
                    <h6 class="add-back mb-3">
                      <text v-if="channelData.type == 'BANK_TELEGRAPHIC'" v-t="'Custom.Withdraw.addWire'"></text>
                      <text v-if="channelData.type == 'BANK_TELEGRAPHIC'" class="add-btn crm-cursor"
                        @click="openAddBankCard('add_wireTransfer')">
                        {{ t('Custom.Withdraw.addBank1') }}
                      </text>
                      <text v-if="channelData.type == 'BANK'" v-t="'Custom.Withdraw.addBank'"></text>
                      <text v-if="channelData.type == 'BANK'" class="add-btn crm-cursor"
                        @click="openAddBankCard('add_bankCard')">
                        {{ t('Custom.Withdraw.addBank1') }}
                      </text>
                      <text v-if="channelData.type == 'CHANNEL_TYPE_CARD'"
                        v-t="'PersonalManagement.Label.addCreditCard'"></text>
                      <text v-if="channelData.type == 'CHANNEL_TYPE_CARD'" class="add-btn crm-cursor"
                        @click="openAddBankCard('add_CreditCard')">
                        {{ t('Custom.Withdraw.addBank1') }}
                      </text>
                    </h6>
                  </view>

                  <!-- 通用银行信息展示 (BANK) -->
                  <template v-if="channelData.type == 'BANK'">
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.UserName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankUname" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.BankCardNum'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankCardNum" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.BankName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankName" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.bankBranchName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankBranchName" />
                      </uni-forms-item>
                    </view>
                  </template>

                  <!-- 信用卡信息展示（针对有信用卡列表的通道） -->
                  <template v-if="channelData.type == 'CHANNEL_TYPE_CARD'">
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'PersonalManagement.Label.CreditCardAccountName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankUname" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'PersonalManagement.Label.CreditCardAccount'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankCardNum" />
                      </uni-forms-item>
                    </view>

                    <view class="col-lg-6">
                      <h5 class="mb-3">CVV</h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.cvv" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'PersonalManagement.Label.ExpirationYear'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.expiryYearMonth" />
                      </uni-forms-item>
                    </view>
                  </template>
                  <!-- 银行电汇转账信息展示（针对有银行转账列表的通道） -->
                  <template v-if="channelData.type == 'BANK_TELEGRAPHIC'">
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.UserName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankUname" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.BankCardNum'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankCardNum" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.BankName'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankName" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.swiftCode'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.swiftCode" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.bankCode'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.customBankCode" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.bankAddr'"></h5>
                      <uni-forms-item>
                        <uni-easyinput disabled v-model="form.bankAddr" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6">
                      <h5 class="mb-3"> Account Agency NO</h5>
                      <uni-forms-item name="agencyNo">
                        <uni-easyinput v-model="form.agencyNo" />
                      </uni-forms-item>
                    </view>
                    <view class="col-lg-6" v-if="channelData.code == 'PAY_RETAILER_REMIT_PAY_KEY_BRW'">
                      <h5 class="mb-3" v-t="'Custom.Withdraw.cpf'"></h5>
                      <uni-forms-item name="cpf">
                        <uni-easyinput v-model="form.cpf" />
                      </uni-forms-item>
                    </view>
                  </template>
                  <!-- 金额输入 (电汇带币种) -->
                  <view class="col-lg-6" v-if="channelData.type == 'BANK_TELEGRAPHIC'">
                    <h5 class="mb-3" v-t="'Custom.Withdraw.CurrencyType'"></h5>
                    <uni-forms-item>
                      <cwg-combox :clearable="false" v-model:value="form.currency"
                        :options="[{ text: 'USD', value: 'USD' }]" @change="(val) => form.currency = val" />
                    </uni-forms-item>
                  </view>
                  <view class="col-lg-6">
                    <h5 class="mb-3">
                      <text v-t="'Custom.Withdraw.Title3'"></text>
                      <text v-if="channelData.type !== 'BANK_TELEGRAPHIC'">({{ channelData.currency }})</text>
                    </h5>
                    <view class="amount-box amount-box1">
                      <uni-forms-item name="amount" :error-message="amountErrorMessage" class="amount-input">
                        <uni-easyinput v-model="form.amount" type="number" @blur="validateAmount" />
                      </uni-forms-item>
                      <view class="btn btn-gray waves-effect waves-light" v-t="'State.All'" @click="setAllAmount">
                      </view>
                    </view>
                  </view>

                  <view class="col-lg-12 mb-3">
                    <!-- 协议同意部分 -->
                    <view class="agree mb-3">
                      <uni-forms-item name="agree2">
                        <checkbox-group :value="form.agree2 ? ['1'] : []" @change="onAgree2Change">
                          <label class="checkbox">
                            <checkbox value="1" :checked="form.agree2" />
                            <text class="crm-cursor" style="text-decoration: underline;"
                              @click.stop="dialogCheckTip = true" v-t="'Custom.Withdraw.Des'"></text>
                          </label>
                        </checkbox-group>
                      </uni-forms-item>
                    </view>
                    <view class="agree  mb-3" v-if="dialogTipsIsShow">
                      <uni-forms-item name="agree3">
                        <checkbox-group :value="form.agree3 ? ['1'] : []" @change="onAgree3Change">
                          <label class="checkbox">
                            <checkbox value="1" :checked="form.agree3" />
                            <text>
                              <text v-t="'Custom.Withdraw.item1'"></text><br>
                              <text v-t="'Custom.Withdraw.item1_1'"></text><br>
                              <text v-t="'Custom.Withdraw.item1_2'"></text>
                            </text>
                          </label>
                        </checkbox-group>
                      </uni-forms-item>
                    </view>
                  </view>
                  <button class="btn btn-dark waves-effect waves-light" @click="openTips"><i class="fi fi-rs-check">
                    </i><text v-t="'Btn.Submit'"></text></button>
                </view>
              </uni-forms>
            </view>
          </view>
        </view>
        <view class="col-lg-4">
          <view class="tips" v-if="(introduce.introduce || introduce.enIntroduce)">
            <view class="card card-body">
              <cwg-rich-text class="attention" :nodes="isZh ? introduce.introduce : introduce.enIntroduce" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <template v-if="step4">
      <view class="custom-deposit-container">
        <view class="custom-withdraw">
          <!-- 步骤1：选择账户 -->
          <view class="box box-step1">
            <view class="b-card">
              <view class="card-top">
                <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title11')
                }}</text>
                <view class="base-info-form">
                  <view class="uni-row2">
                    <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                      :placeholder="t('placeholder.choose')" @change="onAccountChange" />
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 步骤2：支付通道列表 -->
          <view class="box box-step2" v-if="step2">
            <view class="b-card">
              <view class="card-top">
                <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title22')
                }}</text>
                <cwg-combox :clearable="false" v-model:value="channelId" :options="channelListOptions"
                  :placeholder="t('placeholder.choose')" needSpace>
                </cwg-combox>
              </view>
            </view>
          </view>

          <!-- 步骤3：填写出金信息 -->
          <view class="box box-step3" v-if="step3">
            <view class="b-card">
              <view class="card-top">
                <!-- 表单 -->
                <uni-forms ref="formRef" :model="form" :rules="rules" labelWidth="200" label-position="top"
                  v-show="isStep3" class="base-info-form" validate-trigger="submit">
                  <view class="demo-uni-row uni-row1 uni-row2">
                    <!-- 银行选择（针对有银行列表的通道） -->
                    <view v-if="bankDate.length">
                      <view class="tit">
                        <text>{{ t('Custom.Withdraw.Title5') }}</text>
                      </view>
                    </view>
                    <view v-if="bankDate.length">
                      <uni-forms-item name="bankCode">
                        <cwg-combox :clearable="false" v-model:value="form.bankCode" :options="bankOptions"
                          :placeholder="t('placeholder.choose')" @change="selectCode" />
                      </uni-forms-item>
                    </view>
                    <!-- 电子钱包地址输入 -->
                    <view v-if="['CHANNEL_TYPE_WALLET', 'CHANNEL_TYPE_ALI_WALLET'].includes(channelData.type)">
                      <view class="tit">
                        <text>{{ getWalletLabel }}</text>
                      </view>
                    </view>
                    <!-- 电子钱包地址输入 -->
                    <view v-if="['CHANNEL_TYPE_WALLET', 'CHANNEL_TYPE_ALI_WALLET'].includes(channelData.type)">
                      <uni-forms-item name="address">
                        <uni-easyinput :clearable="false" v-model="form.address"
                          :placeholder="t('placeholder.input')" />
                      </uni-forms-item>
                    </view>
                    <!-- 数字货币选择（从已保存地址中选择） -->
                    <template v-if="channelData.type === 'DIGITAL_CURRENCY'">
                      <view :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="channelData.type === 'DIGITAL_CURRENCY'">
                        <view
                          style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                          <view class="tit">

                            <text>{{ t('Custom.Withdraw.Title6') }}</text>
                          </view>
                          <view class="add-back">
                            <text>{{
                              t('blockchain.item10') }}</text>
                            <text class="add-btn crm-cursor" @click="openAddBankCard('add_bankBlockchain')">
                              {{ t('Custom.Withdraw.addBank1') }}
                            </text>
                          </view>
                        </view>
                        <uni-forms-item>
                          <cwg-combox :clearable="false" v-model:value="myId" :options="digitalOptions"
                            :placeholder="t('placeholder.choose')" @change="onDigitalCurrencyChange" />
                          <!-- <cwg-combox :clearable="false" v-model:value="myId" :options="digitalOptions"
                            :placeholder="t('placeholder.choose')" @change="onDigitalCurrencyChange"
                            :disabled="!ruleForm.bankBlockchain.length" /> -->
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('blockchain.item3')">
                          <uni-easyinput disabled v-model="form.addressName" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('blockchain.item4')">
                          <uni-easyinput disabled v-model="form.address" />
                        </uni-forms-item>
                      </view>
                      <view v-if="form.addressProve">
                        <uni-forms-item :label="t('blockchain.item5')">
                          <view class="proof">
                            <template v-if="form.addressProve && (form.addressProve.slice(-3).toLowerCase() === 'pdf')">
                              <cwg-link type="pdf1" :url="htmlUrl + form.addressProve" target="_blank"
                                class="state crm_state_blue">PDF</cwg-link>
                            </template>
                            <image v-else :src="imgUrl + form.addressProve" mode="aspectFit"
                              style="width: 100rpx; height: 100rpx;"
                              @click="previewImage(imgUrl + form.addressProve)" />
                          </view>
                        </uni-forms-item>
                      </view>
                      <view :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <text class="tit"><text class="iconfont iconi"></text>{{ t('Custom.Deposit.Des') }}</text>
                      </view>

                    </template>
                    <view class="card-tit"
                      v-if="isStep3 && (channelData.type == 'BANK_TELEGRAPHIC' || channelData.type == 'BANK' || channelData.type == 'CHANNEL_TYPE_CARD')">
                      <view
                        style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                        <view class="tit">

                          <text>{{ t('Custom.Withdraw.Title4') }}</text>
                        </view>
                        <view class="add-back">
                          <text v-if="channelData.type == 'BANK_TELEGRAPHIC'">{{
                            t('Custom.Withdraw.addWire') }}</text>
                          <text v-if="channelData.type == 'BANK_TELEGRAPHIC'" class="add-btn crm-cursor"
                            @click="openAddBankCard('add_wireTransfer')">
                            {{ t('Custom.Withdraw.addBank1') }}
                          </text>
                          <text v-if="channelData.type == 'BANK'">{{
                            t('Custom.Withdraw.addBank')
                          }}</text>
                          <text v-if="channelData.type == 'BANK'" class="add-btn crm-cursor"
                            @click="openAddBankCard('add_bankCard')">
                            {{ t('Custom.Withdraw.addBank1') }}
                          </text>
                          <text v-if="channelData.type == 'CHANNEL_TYPE_CARD'">{{
                            t('PersonalManagement.Label.addCreditCard') }}</text>
                          <text v-if="channelData.type == 'CHANNEL_TYPE_CARD'" class="add-btn crm-cursor"
                            @click="openAddBankCard('add_CreditCard')">
                            {{ t('Custom.Withdraw.addBank1') }}
                          </text>
                        </view>
                      </view>
                    </view>
                    <!-- 银行卡/信用卡选择 -->
                    <view v-if="['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD'].includes(channelData.type)">
                      <uni-forms-item>
                        <cwg-combox :clearable="false" v-model:value="myId" :options="bankCardOptions"
                          @change="chooseBank" :placeholder="t('placeholder.choose')" />
                      </uni-forms-item>
                    </view>
                    <!-- 通用银行信息展示 -->
                    <template v-if="channelData.type == 'BANK'">
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.UserName')">
                          <uni-easyinput disabled v-model="form.bankUname" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.BankCardNum')">
                          <uni-easyinput disabled v-model="form.bankCardNum" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.BankName')">
                          <uni-easyinput disabled v-model="form.bankName" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.bankBranchName')">
                          <uni-easyinput disabled v-model="form.bankBranchName" />
                        </uni-forms-item>
                      </view>
                    </template>
                    <!-- 信用卡信息展示（针对有信用卡列表的通道） -->
                    <template v-if="channelData.type == 'CHANNEL_TYPE_CARD'">
                      <view>
                        <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
                          <uni-easyinput disabled v-model="form.bankUname" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
                          <uni-easyinput disabled v-model="form.bankCardNum" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item label="CVV">
                          <uni-easyinput disabled v-model="form.cvv" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
                          <uni-easyinput disabled v-model="form.expiryYearMonth" />
                        </uni-forms-item>
                      </view>
                    </template>
                    <!-- 银行电汇转账信息展示（针对有银行转账列表的通道） -->
                    <template v-if="channelData.type == 'BANK_TELEGRAPHIC'">
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.UserName')">
                          <uni-easyinput disabled v-model="form.bankUname" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.BankCardNum')">
                          <uni-easyinput disabled v-model="form.bankCardNum" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.BankName')">
                          <uni-easyinput disabled v-model="form.bankName" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.swiftCode')">
                          <uni-easyinput disabled v-model="form.swiftCode" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.bankCode')">
                          <uni-easyinput disabled v-model="form.customBankCode" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.bankAddr')">
                          <uni-easyinput disabled v-model="form.bankAddr" />
                        </uni-forms-item>
                      </view>
                      <view>
                        <uni-forms-item label="Account Agency NO" name="agencyNo"
                          v-if="channelData.code == 'PAY_RETAILER_REMIT_PAY_KEY_BRW'">
                          <uni-easyinput v-model="form.agencyNo" />
                        </uni-forms-item>
                        <uni-forms-item label="Account Agency NO" v-else>
                          <uni-easyinput v-model="form.agencyNo" />
                        </uni-forms-item>
                      </view>
                      <view v-if="channelData.code == 'PAY_RETAILER_REMIT_PAY_KEY_BRW'">
                        <uni-forms-item label="CPF" name="cpf">
                          <uni-easyinput v-model="form.cpf" />
                        </uni-forms-item>
                      </view>
                    </template>
                    <!-- 出金金额 -->
                    <view v-if="channelData.type == 'BANK_TELEGRAPHIC' && isStep3">
                      <view class="tit">
                        <text>{{ t('Custom.Withdraw.Title3') }}</text>
                      </view>
                    </view>
                    <view v-if="channelData.type != 'BANK_TELEGRAPHIC' && isStep3">
                      <view class="tit">
                        <text>{{ t('Custom.Withdraw.Title3') + '(' + channelData.currency + ')'
                        }}</text>
                      </view>
                    </view>
                    <view v-if="channelData.type !== 'BANK_TELEGRAPHIC'" class="amount-box amount-box1">
                      <uni-forms-item name="amount" :error-message="amountErrorMessage" class="amount-input">
                        <uni-easyinput v-model="form.amount" type="number" @blur="validateAmount" />
                      </uni-forms-item>


                      <view class="btn" v-t="'State.All'" @click="setAllAmount"></view>

                    </view>
                    <template v-else>
                      <view>
                        <uni-forms-item :label="t('Custom.Withdraw.CurrencyType')">
                          <cwg-combox :clearable="false" v-model:value="form.currency"
                            :options="[{ text: 'USD', value: 'USD' }]" @change="(val) => form.currency = val" />
                        </uni-forms-item>
                      </view>
                      <view class="amount-box">
                        <uni-forms-item :label="t('Custom.Withdraw.amount')" name="amount"
                          :error-message="amountErrorMessage" class="amount-input">
                          <uni-easyinput v-model="form.amount" type="number" @blur="validateAmount" />
                        </uni-forms-item>
                        <view class="btn" v-t="'State.All'" @click="setAllAmount"></view>
                      </view>
                    </template>
                  </view>
                  <!-- 协议同意 -->
                  <view class="agree">
                    <uni-forms-item name="agree2">
                      <checkbox-group :value="form.agree2 ? ['1'] : []" @change="onAgree2Change">
                        <label class="checkbox">
                          <checkbox value="1" :checked="form.agree2" />
                          <text class="crm-cursor" style="text-decoration: underline;"
                            @click.stop="dialogCheckTip = true">{{
                              t('Custom.Withdraw.Des') }}</text>
                        </label>
                      </checkbox-group>
                    </uni-forms-item>
                  </view>
                  <view class="agree" v-if="dialogTipsIsShow">
                    <uni-forms-item name="agree3">
                      <checkbox-group :value="form.agree3 ? ['1'] : []" @change="onAgree3Change">
                        <label class="checkbox">
                          <checkbox value="1" :checked="form.agree3" />
                          <text>* {{ t('Custom.Withdraw.item1') }}<br>{{ t('Custom.Withdraw.item1_1') }}<br>{{
                            t('Custom.Withdraw.item1_2') }}</text>
                        </label>
                      </checkbox-group>
                    </uni-forms-item>
                  </view>
                  <button class="s-btn" type="primary" @click="openTips">{{ t('Btn.Submit') }}</button>
                </uni-forms>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <!-- 提示弹窗 -->
    <cwg-tips-popup v-model:visible="dialogTips" content="Custom.Withdraw.item2" @confirm="closeTipsConfirm" />
    <!-- 弹窗：确认信息 -->
    <cwg-check-confirm-popup v-model:visible="dialogCheckConfirm" :title="t('Home.page_customer.item3')"
      :channelData="channelData" :code="code" :selectCodes="selectCodes" :params="form" :FreeNumber="FreeNumber"
      :userName="userName" :dialogCheckConfirm_form="dialogCheckConfirm_form" :login="loginValue"
      :loginDoc="loginValueDoc" @confirm="submit" />
    <!-- 协议弹窗 -->
    <cwg-tips-popup v-model:visible="dialogCheckTip" :introduce="isZh ? introduce.introduce : introduce.enIntroduce" />
    <!-- 等待弹窗 -->
    <cwg-wait-popup v-model:visible="dialogCheckWait" type="center" :mask-click="false" :showFooters="false" />
    <!-- 最后失败弹窗 -->
    <cwg-error-popup v-model:visible="dialogError" @confirm="closeDia" :responseMessage="RES" />
    <!-- 最后成功弹窗 -->
    <cwg-success-popup v-model:visible="dialogSuccess" @confirm="closeDia" />
    <!-- kyc成功弹窗 -->
    <cwg-kyc-popup v-model:visible="dialogKyc" :qrText="text1" />
    <!--验证码-->
    <cwg-email-code-popup v-model:visible="dialogDealResult" @confirm="submitCode" :api="emailCodeApi" />
    <!-- 新增银行弹窗 -->
    <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
  </cwg-page-wrapper>

</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, watch, getCurrentInstance, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { showToast } from "@/utils/toast";
import { isAfterJuly28 } from '@/utils/dateUtils'
// import Drawer from "@/views/global/Drawer"
import { customApi } from "@/service/custom"
import { financialApi } from "@/service/financial"
import { activityApi } from "@/service/activity"
import Config from "@/config/index"
import Decimal from "decimal.js"
import QrCode from "@/components/QRCode.vue"
// import logoImage from "@/assets/images/MTBG.jpg"
import AddBankDialog from '@/components/AddBankDialog.vue';
import PaymentMethodsList from './components/PaymentMethodsList.vue'
import CwgCheckConfirmPopup from './components/WithdrawCheckConfirmPopup.vue'
import CwgKycPopup from './components/KycPopup.vue'
let { Code, Host80, Host05 } = Config
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import useRouter from '@/hooks/useRouter'
const router = useRouter()
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
import { useConfirm } from '@/hooks/useConfirm'
const confirm = useConfirm()
const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))
// 获取组件实例，用于访问全局挂载的属性和方法（替代 this）
const { proxy } = getCurrentInstance()

// -------------------- data --------------------
const loginValue = ref("")
const loginValueDoc = ref("")
const hiddenSelect = ref(false)
const metaInfo = ref(null)
const text1 = ref("")
// const logoImageRef = logoImage 
const dialogCheck1 = ref(false)
const flag = ref(false)
const RES = ref("")
//银行
const openType = ref("") //弹出类别
const dialogInfoTradingAdd = ref(false) //新增
const ruleForm = reactive({
  bankInfo: [], //银行信息
  bankWrit: [], //电汇信息
  xykInfo: [], //信用卡信息
  bankBlockchain: [], //区块链
})

const imgUrl = Host05 //图片地址
const htmlUrl = Host80 //html地址地址
const loginOptions = ref([])
const value = ref("") //账号
const code = ref("") //通道code
const bankValid = ref("") //通道是否有银行
const requestUrl = ref("") //通道地址
const isStep3 = ref(false)
const step2 = ref(false)
const step3 = ref(false)
const dialogCheckTip = ref(false)

const isChannel = ref(true)
const pictLoading = ref(false)
const tableData = reactive({

  Digital_Currency: [],
  China_UnionPay: [],
  Electronic_Wallet: [],
  International_Transfer: [],
  CHANNEL_TYPE_CARD: [],
  CHANNEL_TYPE_ALI_WALLET: [],
  Ucard_Wallet: [],
})
//通道table-选择前后
const activeTab = ref(1)
// 🔥 自动过滤掉空数据的 tab
const tabsConfig = computed(() => {

  const allTabs = [
    { text: t('Custom.Deposit.Channel3'), value: 1, type: 'Digital_Currency' },
    { text: t('Custom.Deposit.Channel2'), value: 2, type: 'China_UnionPay' },
    { text: t('Custom.Deposit.Channel4'), value: 3, type: 'Electronic_Wallet' },
    { text: t('Custom.Deposit.Channel1'), value: 4, type: 'International_Transfer' },
    { text: t('PersonalManagement.Label.CreditCard'), value: 5, type: 'CHANNEL_TYPE_CARD' },
    { text: t('card.title'), value: 6, type: 'Ucard_Wallet' },
    { text: t('Label.Ali'), value: 7, type: 'CHANNEL_TYPE_ALI_WALLET' },
  ]
  // ✅ 只保留有数据的 tab
  return allTabs.filter(tab => {
    return tableData[tab.type]?.length > 0
  })
})
// 当前选中的 tab 项
const currentTab = computed(() => tabsConfig.value.find(t => t.value === activeTab.value))

// 当前要渲染的表格数据
const currentTableData = computed(() => {
  const type = currentTab.value?.type
  return type ? tableData[type] || [] : []
})
const bankDate = ref([]) //通道下的银行列表
const channelData = ref({}) //当前选择的通道信息
const WireTransferAccount = ref({}) //银行电汇信息
//表单
const form = reactive({
  currency: "USD",
  amount: "",
  amount1: "",
  bankCode: '',           // 银行代码（普通银行通道选择）
  address: '',           // 电子钱包地址 / 数字货币地址（输入/展示）
  addressName: '',       // 数字货币地址名称（展示）
  addressProve: '',      // 数字货币地址证明文件路径（仅展示））
  bankUname: '',         // 持卡人姓名
  bankCardNum: '',       // 银行卡号
  bankName: '',          // 银行名称
  bankBranchName: '',    // 支行名称
  swiftCode: '',         // SWIFT代码
  customBankCode: '',    // 自定义银行代码
  bankAddr: '',          // 银行地址
  agencyNo: '',          // 代理机构编号（电汇专用，可编辑）
  cpf: '',               // CPF号码（电汇专用，可编辑）
  cvv: '',               // CVV码（电汇专用，可编辑）
  expiryYearMonth: '',   // 过期年（电汇专用，可编辑）
  agree2: false,         // 协议勾选2
  agree3: false          // 协议勾选3（当dialogTipsIsShow为true时显示）
})
const formRef = ref(null)
const resetForm = () => {
  //表单重置后，需要手动重置一些状态
  form.amount = ""
  form.amount1 = ""
  form.bankCode = ""
  form.address = ""
  form.addressName = ""
  form.addressProve = ""
  form.bankUname = ""
  form.bankCardNum = ""
  form.swiftCode = ""
  form.customBankCode = ""
  form.bankAddr = ""
  form.agencyNo = ""
  form.bankName = ""
  form.cpf = ""
  form.bankBranchName = ""
  form.cpf = ""
  form.cvv = ""
  form.expiryYearMonth = ""
  form.agree2 = false
  form.agree3 = false
  amountErrorMessage.value = ""
  dialogDealResult_form.emailCode = ''
}
//数量区间
const mAmount = reactive({
  minAmount: "",
  maxAmount: "",
})
const introduce = reactive({
  introduce: "",
  enIntroduce: "",
})

//银行列表
const bankInfoList = ref([])
const bank = ref("")
const myId = ref(null) //银行列表id
const bankPayType = ref("") //临时放置通道code

//银联/数字货币
const step3_bank_cur = ref("")

const agree2 = ref(false) //条款
//数字表单
const form1 = ref({})

const dialogCheck = ref(false)
const dialogKyc = ref(false)
const dialogVisible = ref(false)
const dialogCheckWait = ref(false)

//新建银行弹窗
const dialogNewBank = ref(false)
const params = reactive({
  bankCardNum: "",
  bankUname: "",
  bankName: "",
  bankBranchName: "",
  bankAddr: "",
  swiftCode: "",
  bankFront: "",
  bankBack: "",
  defaultBank: false,
})

const dialogDealResult = ref(false)
const emailCodeApi = ref(financialApi.withdrawCode)

const dialogDealResult_form = reactive({
  emailCode: "", //数字货币出金，验证码
})

const dialogTips = ref(false) //提交时的确认弹窗
const dialogTipsIsShow = ref(true) //提交时的确认弹窗-是否显示

const dialogFreeNumber = ref(false) //可减免手续费用次数弹窗
const FreeNumber = ref(0)

const dialogCheckConfirm = ref(false)
const dialogCheckConfirm_form = reactive({
  amount: "",
  feeAmount: "",
})

const tableDataNewYear24Flag = ref(false) //24新年庆典
const tableDataNewYear24 = ref(false) //24新年庆典
const NewYear24Data = reactive({
  balance: 0,
  income: 0,
  rate: 0,
})
const rules = computed(() => ({
  myId: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.select.empty'),
        trigger: 'change',
      },
    ],
  },
  bankUname: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.select.empty'),
        trigger: 'change',
      },
    ],
  },
  bankCode: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.select.empty'),
        trigger: 'change',
      },
    ],
  },
  address: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.input.empty'),
        trigger: 'blur',
      },
    ],
  },
  amount: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.amount.format'),
      },
      {
        validateFunction: (rule, value, data, callback) => {
          if (
            !!value &&
            (mAmount.minAmount > value || mAmount.maxAmount < value)
          ) {
            callback(
              t('vaildate.amount.amount') +
              mAmount.minAmount +
              ' - ' +
              mAmount.maxAmount
            );
            return false;
          }
          if (value > loginAmount.value) {
            callback(t('Label.LoginBalance') + '：$' + loginAmount.value);
            return false;
          }
          if (/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)) {
            return true;
          } else {
            callback(t('vaildate.amount.format'));
            return false;
          }
        },
        trigger: 'blur',
      },
    ],
  },
  agree2: {
    rules: [
      {
        validateFunction: (rule, value, data, callback) => {
          if (form.agree2) {
            return true;
          } else {
            callback(t('vaildate.agree.empty'));
            return false;
          }
        },
        trigger: 'change',
      },
    ],
  },
  agree3: {
    rules: [
      {
        validateFunction: (rule, value, data, callback) => {

          if (form.agree3) {
            return true;
          } else {
            callback(t('vaildate.agree.empty'));
            return false;
          }
        },
        trigger: 'change',
      },
    ],
  },
  agencyNo: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.input.empty'),
        trigger: 'blur',
      },
    ],
  },
  cpf: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.input.empty'),
        trigger: 'blur',
      },
    ],
  },
  emailCode: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.code.empty'),
        trigger: 'blur',
      },
    ],
  },
}));
// 验证金额
const amountErrorMessage = ref('')
const validateAmount = () => {
  const amount = Number(form.amount)
  if (mAmount.minAmount && mAmount.maxAmount) {
    const min = Number(mAmount.minAmount);
    const max = Number(mAmount.maxAmount);
    if (!amount && amount !== 0) {
      amountErrorMessage.value = t('vaildate.amount.amount') + min + '-' + max
      return false
    }
    if (amount < min || amount > max) {
      amountErrorMessage.value = t('vaildate.amount.amount') + min + '-' + max
      return false
    }
  }
  if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(amount)) {
    amountErrorMessage.value = t('vaildate.amount.format')
    return false
  }
  if (amount > loginAmount.value) {
    amountErrorMessage.value = t('Label.LoginBalance') + '：$' + loginAmount.value
    return false
  }
  amountErrorMessage.value = ''
  return true
}
// 分组标题映射
const groupTitleMap = {
  'Ucard_Wallet': 'card.title',
  'Digital_Currency': 'Custom.Deposit.Channel3',
  'China_UnionPay': 'Custom.Deposit.Channel2',
  'Electronic_Wallet': 'Custom.Deposit.Channel4',
  'International_Transfer': 'Custom.Deposit.Channel1',
  'CHANNEL_TYPE_CARD': 'PersonalManagement.Label.CreditCard',
  'CHANNEL_TYPE_ALI_WALLET': 'Label.Ali'
}
// -------------------- computed --------------------
const getWalletLabel = computed(() => {
  if (channelData.value.type === 'CHANNEL_TYPE_WALLET') return t('Custom.Withdraw.Title7')
  if (channelData.value.type === 'UCARD_WALLET') return t('card.title')
  if (channelData.value.type === 'CHANNEL_TYPE_ALI_WALLET') return t('Label.AliAccout')
  return ''
})
// 最后确认
const dialogSuccess = computed(() => dialogCheck.value && dialogVisible.value)
// 最后失败
const dialogError = computed(() => dialogCheck.value && !dialogVisible.value)
const loginComboxOptions = computed(() => {
  return loginOptions.value.map((item, index) => ({
    text: item.label,
    value: item.login
  }))
})

const bankOptions = computed(() => {
  return bankDate.value.map((item, index) => ({
    text: isZh.value ? item.name : item.enName,
    value: item.code
  }))
})

const digitalOptions = computed(() => {
  return ruleForm.bankBlockchain.map((item, index) => ({
    text: `${item.addressName}-${item.address}`,
    value: item.id,
    disable: item.authStatus == 0
  }))
})

const bankCardOptions = computed(() => {
  return bankList.value.map((item, index) => ({
    text: getBankLabel(item),
    value: item.id
  }))
})
const getBankLabel = (item) => {
  if (channelData.value.type === 'BANK' || channelData.value.type === 'BANK_TELEGRAPHIC') {
    return `${item.bankName}-${item.bankCardNum}`
  } else if (channelData.value.type === 'CHANNEL_TYPE_CARD') {
    return item.bankCardNum
  }
  return ''
}
const bankList = computed(() => {
  if (channelData.value.type === 'BANK') return ruleForm.bankInfo
  if (channelData.value.type === 'BANK_TELEGRAPHIC') return ruleForm.bankWrit
  if (channelData.value.type === 'CHANNEL_TYPE_CARD') return ruleForm.xykInfo
  if (channelData.value.type === 'DIGITAL_CURRENCY') return ruleForm.bankBlockchain
  return []
})
const isFree = computed(() => {
  let flag = false;
  let startTime1 = "2024/11/01 00:00:00";

  let timezone = 2; //目标时区时间，东3区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数

  let now = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000
  ).getTime();
  let start = new Date(startTime1).getTime();

  if (now > start) {
    flag = true;
  }
  return flag;
})

// -------------------- methods --------------------
const groupCurrency = (type) => {
  const symbol = { GBP: '£', USD: '$', EUR: '€', USC: '￠' }[type] || '$'
  return `: ${symbol}`
}
const groupCurrency1 = (type) => {
  const symbol = { GBP: '£', USD: '$', EUR: '€', USC: '￠' }[type] || '$'
  return `${symbol}`
}

function groupTypeName(type) {
  if (type == "1") {
    return t("AccountType.ClassicAccount");
  } else if (type == "2") {
    return t("AccountType.SeniorAccount");
  } else if (type == "3") {
    return isAfterJuly28() ? "--" : t("AccountType.AgencyAccount");
  } else if (type == "5") {
    return t("AccountType.SpeedAccount");
  } else if (type == "6") {
    return t("AccountType.SpeedAccount");
  } else if (type == "7") {
    return t("AccountType.StandardAccount");
  } else if (type == "8") {
    return t("AccountType.CentAccount");
  }
}
//回显
const onAgree3Change = (e) => {
  form.agree3 = e.detail.value.length > 0
}
const onAgree2Change = (e) => {
  form.agree2 = e.detail.value.length > 0
}
function selectChange() {
  // proxy.$forceUpdate();
}
//新增
// function openAddBankCard(type) {
//   if (type == "add_bankCard") {
//     if (ruleForm.bankInfo.length == 2) {
//       proxy.$pigeon.MessageConfirm(
//         t("Msg.UnionPayCARDS"),
//         t("Msg.SystemPrompt"),
//         t("Btn.Confirm"),
//         t("Btn.Cancel"),
//         async function () { },
//         function () { }
//       );
//     } else {
//       openType.value = "add_bankCard";
//       dialogInfoTradingAdd.value = true;
//     }
//   } else if (type == "add_wireTransfer") {
//     if (ruleForm.bankWrit.length == 2) {
//       proxy.$pigeon.MessageConfirm(
//         t("Msg.WireTransfers"),
//         t("Msg.SystemPrompt"),
//         t("Btn.Confirm"),
//         t("Btn.Cancel"),
//         async function () { },
//         function () { }
//       );
//     } else {
//       openType.value = "add_wireTransfer";
//       dialogInfoTradingAdd.value = true;
//     }
//   } else if (type == "add_CreditCard") {
//     openType.value = "add_CreditCard";
//     dialogInfoTradingAdd.value = true;
//   } else if (type == "add_bankBlockchain") {
//     if (ruleForm.bankBlockchain.length == 2) {
//       proxy.$pigeon.MessageConfirm(
//         t("blockchain.item9"),
//         t("Msg.SystemPrompt"),
//         t("Btn.Confirm"),
//         t("Btn.Cancel"),
//         async function () { },
//         function () { }
//       );
//     } else {
//       openType.value = "add_bankBlockchain";
//       dialogInfoTradingAdd.value = true;
//     }
//   }
// }
// 新增银行信息
const addBankDialogRef = ref(null);
function openAddBankCard(type) {
  console.log(type, 121212)
  switch (type) {
    case 'add_bankBlockchain':
      openAddCrypto()
      break;
    case 'add_bankCard':
      openAddUnionpay()
      break;
    case 'add_wireTransfer':
      openAddBank()
      break;
    case 'add_CreditCard':
      openAddCredit()
      break;
  }
}
function openAddCrypto() {
  const wallets = bankCardOptions.value || []
  // 1️⃣ 没有钱包
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(4);
    return;
  }
  // 2️⃣ 是否存在未认证钱包
  const hasUnAuth = wallets.some(
    item => item.authStatus === 0 || item.approveStatus === 1
  );
  if (hasUnAuth) {
    uni.showToast({
      title: "加密钱包未认证",
      icon: "none"
    });
    return;
  }
  // 3️⃣ 是否达到上限
  if (wallets.length >= 2) {
    uni.showToast({
      title: t('blockchain.item9'),
      icon: "none"
    });
    return;
  }
  // 4️⃣ 正常打开
  addBankDialogRef.value?.open(4);
}
function openAddUnionpay() {
  const wallets = bankCardOptions.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(1);
    return;
  }
  if (wallets.length >= 2) {
    uni.showToast({
      title: t('Msg.UnionPayCARDS'),
      icon: "none"
    });
    return;
  }
  addBankDialogRef.value?.open(1);
}
function openAddBank() {
  const wallets = bankCardOptions.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(2);
    return;
  }
  if (wallets.length >= 2) {
    uni.showToast({
      title: t('Msg.WireTransfers'),
      icon: "none"
    });
    return;
  }
  addBankDialogRef.value?.open(2);
}
function openAddCredit() {
  const wallets = bankCardOptions.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(3);
    return;
  }
  addBankDialogRef.value?.open(3);
}
// 新增银行信息成功回调
const addSuccess = (e) => {
  getBankInfo();
}
function closeDiaAdd() {
  dialogInfoTradingAdd.value = false;
}
function closeAdd(val) {
  dialogInfoTradingAdd.value = val;
}
function confirmToReload() {
  dialogInfoTradingAdd.value = false;
  getBankInfo();
}
const getBankInfo = async () => {
  const res = await financialApi.customBankList({})
  if (res.code === Code.StatusOK) {
    ruleForm.bankInfo = []
    ruleForm.bankWrit = []
    ruleForm.xykInfo = []
    ruleForm.bankBlockchain = []
    res.data.forEach(item => {
      item.customBankCode = item.bankCode
      item.bankCode = null
      if (item.type === 1) ruleForm.bankInfo.push(item)
      else if (item.type === 2) ruleForm.bankWrit.push(item)
      else if (item.type === 3) {
        item.expiryYearMonth = `${item.expiryYear}/${item.expiryMonth}`
        ruleForm.xykInfo.push(item)
      } else if (item.type === 4) ruleForm.bankBlockchain.push(item)
    })
    // 如果有默认选中
    const findDefault = (list, type) => list.find(b => b.defaultBank && b.type === type)


    const defaultBank = findDefault(ruleForm.bankInfo, 1)
    const defaultWire = findDefault(ruleForm.bankWrit, 2)
    const defaultCard = findDefault(ruleForm.xykInfo, 3)
    const defaultDigital = findDefault(ruleForm.bankBlockchain, 4)
    if (channelData.value.type === 'BANK' && defaultBank) selectBankCard(defaultBank)
    if (channelData.value.type === 'BANK_TELEGRAPHIC' && defaultWire) selectBankCard(defaultWire)
    if (channelData.value.type === 'CHANNEL_TYPE_CARD' && defaultCard) selectBankCard(defaultCard)
    if (channelData.value.type === 'DIGITAL_CURRENCY' && defaultDigital && defaultDigital.authStatus != 0) selectDigital(defaultDigital)
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const selectBankCard = (item) => {
  const index = bankList.value.findIndex(b => b.id === item.id)
  if (index !== -1) {
    myId.value = item.id
    nextTick(() => {
      Object.assign(form, item)
    })


  }
}

const selectDigital = (item) => {
  const index = ruleForm.bankBlockchain.findIndex(b => b.id === item.id)
  if (index !== -1) {
    selectedDigitalIndex.value = item.id
    form.addressName = item.addressName
    form.address = item.address
    form.addressProve = item.addressProve
  }
}
const onDigitalCurrencyChange = (val) => {
  const item = ruleForm.bankBlockchain.find(b => b.id === val)
  chooseBank(item.id)
}

function chooseBank(id) {
  const item = bankList.value.find(b => b.id === id)
  if (channelData.value.type == "DIGITAL_CURRENCY") {
    if (item.authStatus == 0) {
      showToast(t("Msg.item11"));
      return;
    }
  }

  let codeTmp = "";
  if (form.bankCode) {
    codeTmp = form.bankCode;
  }
  Object.assign(form, item);
  form.agree2 = false;
  form.agree3 = false;
  if (channelData.value.type == "BANK_TELEGRAPHIC") {
    form.currency = "USD";
    if (codeTmp) {
      form.bankCode = codeTmp;
    }
  }
}

function selectCode(codeVal) {
  bankDate.value.forEach((item) => {
    if (item.code == codeVal) {
      // item.rate = 1
      // mAmount.minAmount = item.minAmount || mAmount.minAmount;
      // mAmount.maxAmount = item.maxAmount || mAmount.maxAmount;
      channelData.value.rate = item.rate || channelData.value.rate;
      channelData.value.transformCurrency =
        item.currency || channelData.value.transformCurrency;
      channelData.value.feeTypeBank = item.feeType || null;
      channelData.value.freeBank = item.free || 0;
      channelData.value.feeAmountBank = item.feeAmount || null;
    }
  });
}

//关闭提交后的弹出框
function closeDia() {
  resetForm()
  showTable();
  dialogCheck.value = false;
  dialogVisible.value = false;
}

//取消
function cancelCode() {
  dialogDealResult.value = false;
}

//提交前弹窗确认
async function openTips() {
  if (channelData.value.type == "BANK_TELEGRAPHIC" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "BANK" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "CHANNEL_TYPE_CARD" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "DIGITAL_CURRENCY" && !myId.value) {
    showToast(t("blockchain.item11"));
    return;
  }
  try {
    if (formRef.value) {
      const valid = await formRef.value.validate()
      if (dialogTipsIsShow.value) {
        dialogTips.value = true;
      } else {
        submit("form");
      }
    }
  } catch (error) {
    if (error instanceof Array) {
      showToast(error[0].errorMessage);
      return
    } else {
      RES.value = error.msg;
    }
  }
}
// 提示同意提交出金
function closeTipsConfirm() {
  if (isFree.value) {
    dialogTips.value = false;
    if (channelData.value.feeTypeBank) {
      if (channelData.value.feeTypeBank == 1) {
        dialogCheckConfirm_form.feeAmount =
          Number(form.amount || 0) *
          (Number(channelData.value.freeBank || 0) / 100);
      } else if (channelData.value.feeTypeBank == 2) {
        dialogCheckConfirm_form.feeAmount = Number(
          channelData.value.feeAmountBank || 0
        );
      }
    } else {
      if (channelData.value.feeType == 1) {
        dialogCheckConfirm_form.feeAmount =
          Number(form.amount || 0) *
          (Number(channelData.value.free || 0) / 100);
      } else if (channelData.value.feeType == 2) {
        dialogCheckConfirm_form.feeAmount = Number(
          channelData.value.feeAmount || 0
        );
      }
    }

    if (FreeNumber.value > 0) {
      dialogCheckConfirm_form.amount = new Decimal(
        Number(form.amount || 0)
      )
        .mul(new Decimal(Number(channelData.value.rate || 0)))
        .toNumber();
    } else {
      dialogCheckConfirm_form.amount = new Decimal(
        Number(form.amount || 0)
      )
        .sub(
          new Decimal(Number(dialogCheckConfirm_form.feeAmount || 0))
        )
        .mul(new Decimal(Number(channelData.value.rate || 0)))
        .toNumber();
    }
    if (
      ["CNY", "THB", "VND"].indexOf(channelData.value.transformCurrency) > -1
    ) {
      dialogCheckConfirm_form.feeAmount = parseInt(
        dialogCheckConfirm_form.feeAmount
      );
      dialogCheckConfirm_form.amount = parseInt(
        dialogCheckConfirm_form.amount
      );
    }
    dialogCheckConfirm.value = true;
  } else {
    dialogTips.value = false;
    submit("form");
  }
}

function getMetaInfo() {
  metaInfo.value = window.getMetaInfo();
  metaInfo.value = { ...metaInfo.value, deviceType: "h5" };
}

async function qrCode(serial) {
  getMetaInfo()
  let res = await customApi.getWebsdkLink({
    serial,
    metaInfo: metaInfo.value,
  });
  if (res.code == Code.StatusOK) {
    text1.value = JSON.parse(res.data).url;
    dialogKyc.value = true;
    flag.value = false;
  } else {
    flag.value = false;
  }
}
const submitCode = async (code) => {
  console.log(code, 111);

  if (channelData.value.type == "DIGITAL_CURRENCY") {
    dialogDealResult_form.emailCode = code;
    submit("form");
  }
}

//提交
async function submit(formName) {
  console.log(channelData.value, 1212);

  if (channelData.value.type == "BANK_TELEGRAPHIC" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "BANK" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "CHANNEL_TYPE_CARD" && !myId.value) {
    showToast(t("vaildate.withdrawBank.empty"));
    return;
  }
  if (channelData.value.type == "DIGITAL_CURRENCY" && !myId.value) {
    showToast(t("blockchain.item11"));
    return;
  }
  try {
    if (formRef.value) {
      await formRef.value.validate()
      if (
        channelData.value.type == "DIGITAL_CURRENCY" &&
        !dialogDealResult_form.emailCode
      ) {
        // let res = await financialApi.withdrawCode({});
        // if (res.code == Code.StatusOK) {
        //   dialogDealResult = true;
        // } else {
        //   $pigeon.MessageWarning(res.msg);
        // }
        dialogDealResult.value = true;
        return;
      }
      // 检查活动参与情况
      // let selectedAccount = loginOptions.find(item => item.login === value);
      // if (selectedAccount) {
      //   let activityRes = await activityApi.ActivityGiveLoginParticipate({
      //     login: value,
      //     platform: selectedAccount.platform,
      //     amount: form.amount
      //   });
      //   
      //   if (activityRes.code == Code.StatusOK && activityRes.data === false) {
      //     // 使用 Promise 包装确认对话框，等待用户选择
      //     try {
      //       await new Promise((resolve, reject) => {
      //         $pigeon.MessageConfirm(
      //           "您参加的活动正在进行中，发起申请后结束活动",
      //           $i18n.t("Msg.SystemPrompt"),
      //           $i18n.t("Btn.Confirm"),
      //           $i18n.t("Btn.Cancel"),
      //           () => {
      //             resolve(); // 确认时继续执行
      //           },
      //           () => {
      //             reject(); // 取消时阻止执行
      //           }
      //         );
      //       });
      //     } catch {
      //       return; // 用户点击取消，阻止执行
      //     }
      //   }
      // }

      if (flag.value) {
        return;
      } else {
        flag.value = true;
      }
      dialogCheckWait.value = true;
      if (channelData.value.type == "DIGITAL_CURRENCY") {
        let res = await financialApi.WithdrawAapplyDigitalCurrency(
          channelData.value.requestUrl,
          {
            ...form,
            login: loginValue.value,
            payType: channelData.value.code,
            emailCode: dialogDealResult_form.emailCode,
          }
        );
        if (res.code == Code.StatusOK) {
          flag.value = false;
          dialogCheck.value = true;
          dialogVisible.value = true;
          // qrCode(res.data)
        } else {
          RES.value = res.msg;
          dialogCheck.value = true;
          dialogVisible.value = false;
          flag.value = false;
        }
        cancelCode();
      } else if (
        channelData.value.type == "CHANNEL_TYPE_WALLET" ||
        channelData.value.type == "UCARD_WALLET" ||
        channelData.value.type == "CHANNEL_TYPE_ALI_WALLET"
      ) {
        let res = await financialApi.WithdrawAapplyDigitalCurrency(
          channelData.value.requestUrl,
          {
            ...form,
            login: loginValue.value,
            payType: channelData.value.code,
          }
        );
        if (res.code == Code.StatusOK) {
          flag.value = false;
          dialogCheck.value = true;
          dialogVisible.value = true;
          // qrCode(res.data)
        } else {
          RES.value = res.msg;
          dialogCheck.value = true;
          dialogVisible.value = false;
          flag.value = false;
        }

        console.log(res, 'res', RES.value);
      } else if (channelData.value.type == "BANK") {
        let res = await financialApi.WithdrawApplyBank(
          channelData.value.requestUrl,
          {
            ...form,
            login: loginValue.value,
            payType: channelData.value.code,
          }
        );
        if (res.code == Code.StatusOK) {
          flag.value = false;
          dialogCheck.value = true;
          dialogVisible.value = true;
          // qrCode(res.data)
        } else {
          RES.value = res.msg;
          dialogCheck.value = true;
          dialogVisible.value = false;
          flag.value = false;
        }
      } else if (channelData.value.type == "BANK_TELEGRAPHIC") {
        let res = await financialApi.WithdrawApplyBank(
          channelData.value.requestUrl,
          {
            ...form,
            login: loginValue.value,
            payType: channelData.value.code,
          }
        );

        if (res.code == Code.StatusOK) {
          flag.value = false;
          dialogCheck.value = true;
          dialogVisible.value = true;
          // qrCode(res.data)
        } else {
          RES.value = res.msg;
          dialogCheck.value = true;
          dialogVisible.value = false;
          flag.value = false;
        }
      } else if (channelData.value.type == "CHANNEL_TYPE_CARD") {
        let res = await financialApi.WithdrawApplyBank(
          channelData.value.requestUrl,
          {
            ...form,
            login: loginValue.value,
            payType: channelData.value.code,
          }
        );
        if (res.code == Code.StatusOK) {
          flag.value = false;
          dialogCheck.value = true;
          dialogVisible.value = true;
          // qrCode(res.data)
        } else {
          RES.value = res.msg;
          dialogCheck.value = true;
          dialogVisible.value = false;
          flag.value = false;
        }
      }
      dialogCheckWait.value = false;
    }
  } catch (error) {
    if (error instanceof Array) {
      showToast(error[0].errorMessage);
      return
    } else {
      RES.value = error.msg;
      dialogCheck.value = true;
      dialogCheckWait.value = false;
      dialogVisible.value = false;
      flag.value = false;
    }
  }
}

//初始化
function Initialize() {
  loginValue.value = "";
  isStep3.value = false;
  step2.value = false;
  step3.value = false;
  showTable();
}

//手续费减免次数接口
async function getFreeNumber() {
  if (!isFree.value) {
    return;
  }
  dialogFreeNumber.value = true;
  let res = await financialApi.remainingReductionNumber({});
  if (res.code == Code.StatusOK) {
    FreeNumber.value = res.data || 0;
  } else {
    showToast(res.msg);
  }
}
function toShop() {
  // $router.push({ path: "/shop/home" }).catch((arr) => arr);
  // uni-app 中可能需要使用 uni.navigateTo，此处保留原逻辑但注释掉，因为原代码是 Vue Router
  // 若需要可以改为 uni.navigateTo
}

//选择支付方式
function isShowStep3(row) {
  console.log(row, 222);
  dialogCheckWait.value = false;
  dialogVisible.value = false;
  flag.value = false;
  isStep3.value = true;
  //判断是否有bank
  if (row.bankValid && isChannel.value) {
    getBankList(row);
    isChannel.value = false;
    step3.value = true;
    channelData.value = row;
    mAmount.minAmount = row.minAmount;
    mAmount.maxAmount = row.maxAmount;
  } else {
    step3.value = true;
    bankDate.value = [];
    channelData.value = row;
    mAmount.minAmount = row.minAmount;
    mAmount.maxAmount = row.maxAmount;
  }
  if (row.code == "UNION_PAY_TELEGRAPHIC") {
    WireTransferAccount.value = JSON.parse(row.property);
  }
  if (['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD', 'DIGITAL_CURRENCY'].includes(row.type)) {
    getBankInfo();
    step3_bank_cur.value = "bank";
    form.login = loginValue.value;
    form.payType = row.code;
    bankPayType.value = row.code;
  }
  tableData.Ucard_Wallet = []
  tableData.Digital_Currency = []
  tableData.China_UnionPay = []
  tableData.Electronic_Wallet = []
  tableData.International_Transfer = []
  tableData.CHANNEL_TYPE_CARD = []
  tableData.CHANNEL_TYPE_ALI_WALLET = []
  if (row.type === 'UCARD_WALLET') tableData.Ucard_Wallet = [row]
  if (row.type === 'DIGITAL_CURRENCY') tableData.Digital_Currency = [row]
  if (row.type === 'BANK') tableData.China_UnionPay = [row]
  if (row.type === 'CHANNEL_TYPE_WALLET') tableData.Electronic_Wallet = [row]
  if (row.type === 'BANK_TELEGRAPHIC') tableData.International_Transfer = [row]
  if (row.type === 'CHANNEL_TYPE_CARD') tableData.CHANNEL_TYPE_CARD = [row]
  if (row.type === 'CHANNEL_TYPE_ALI_WALLET') tableData.CHANNEL_TYPE_ALI_WALLET = [row]
  introduce.introduce = row.introduce
  introduce.enIntroduce = row.enIntroduce




}
//更换支付方式
function showTable() {
  resetForm()
  myId.value = null;
  isChannel.value = true;
  form.currency = "USD";
}

//获取账户信息
async function getDateList() {
  loading.value = true
  let res = await customApi.CustomDropdown({ platform: "" });
  if (res.code == Code.StatusOK) {
    loginOptions.value = res.data.map(item => ({
      ...item,
      label: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
      disable: item.closeFunctions.includes('2')
    }))
    const route = getCurrentPages().pop().$page.options
    if (route.login) {
      const found = loginOptions.value.find(opt => opt.login === Number(route.login))
      loginValue.value = found.login
      loginValueDoc.value = found.label
      step2.value = true;
      // showTable();
    }
  } else {
    showToast(res.msg);
  }
  loading.value = false
}
//获取出金通道
async function getDepositList() {
  pictLoading.value = true;
  tableData.Ucard_Wallet = [];
  tableData.Digital_Currency = [];
  tableData.China_UnionPay = [];
  tableData.Electronic_Wallet = [];
  tableData.International_Transfer = [];
  tableData.CHANNEL_TYPE_CARD = [];
  tableData.CHANNEL_TYPE_ALI_WALLET = [];
  let res = await financialApi.RemitChannelList({});
  if (res.code == Code.StatusOK) {
    res.data.forEach(item => {
      if (item.type === 'UCARD_WALLET') tableData.Ucard_Wallet.push(item)
      if (item.type === 'DIGITAL_CURRENCY') tableData.Digital_Currency.push(item)
      if (item.type === 'BANK') tableData.China_UnionPay.push(item)
      if (item.type === 'CHANNEL_TYPE_WALLET') tableData.Electronic_Wallet.push(item)
      if (item.type === 'BANK_TELEGRAPHIC') tableData.International_Transfer.push(item)
      if (item.type === 'CHANNEL_TYPE_CARD') tableData.CHANNEL_TYPE_CARD.push(item)
      if (item.type === 'CHANNEL_TYPE_ALI_WALLET') tableData.CHANNEL_TYPE_ALI_WALLET.push(item)
    })
    pictLoading.value = false;
  } else {
    showToast(res.msg);
    pictLoading.value = false;
  }
}
//获取出金通道银行列表
async function getBankList(row) {
  let res = await financialApi.BankList({
    channelCode: row.code,
  });
  if (res.code == Code.StatusOK) {
    let bank = res.data;
    let data = [];
    bank.forEach((j) => {
      if (!j.minAmount && j.minAmount != 0) {
        j.minAmount = row.minAmount;
      }
      if (!j.maxAmount && j.maxAmount != 0) {
        j.maxAmount = row.maxAmount;
      }
      j.payType = row.code;
      data.push(j);
    });
    bankDate.value = data;
  } else {
    showToast(res.msg);
  }
}

//取消
function cancelBank() {
  dialogNewBank.value = false;
}

//24新年庆典
//是否到期-2023-11-25 00:00:00-2023-12-31 23:59:59
function isNewYear24Open() {
  let endTime1 = "2025/3/31 23:59:59";
  let startTime1 = "2025/1/1 00:00:00";

  let timezone = 2; //目标时区时间，东3区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数

  let now = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000
  ).getTime();
  let end = new Date(endTime1).getTime();
  let start = new Date(startTime1).getTime();

  if (now < end && start < now) {
    ActivityNewYear24();
  }
}
async function ActivityNewYear24() {
  let res = await activityApi.ActivityNewYear24({});
  if (res.code == Code.StatusOK) {
    tableDataNewYear24.value = res.data;
    if (typeof tableDataNewYear24.value == "object") {
      toIncome();
    }
  } else {
    showToast(res.msg);
  }
}
function toIncome() {
  NewYear24Data.balance = Number(tableDataNewYear24.value.balance) || 0;
  // let rate = 0;
  tableDataNewYear24.value.details.forEach((item) => {
    if (
      NewYear24Data.balance > item.min &&
      NewYear24Data.balance <= item.max
    ) {
      NewYear24Data.rate = item.rate;
    } else if (
      NewYear24Data.balance > item.min &&
      NewYear24Data.balance >= item.max &&
      item.max == 0
    ) {
      NewYear24Data.rate = item.rate;
    }
  });
  // console.log(NewYear24Data);
  NewYear24Data.income = (
    ((NewYear24Data.balance * NewYear24Data.rate) / 100 / 365) *
    NewYear24RemainingTime()
  ).toFixed(2);
  tableDataNewYear24Flag.value = true;
}
function NewYear24RemainingTime() {
  // let endTime1 = '2025/3/31 23:59:59';
  // let startTime1 = '2025/1/1 00:00:00';

  let timezone = 2; //目标时区时间，东3区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数

  let now = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000
  ).getTime();

  // 获取当前月份的最后一天
  let lastDayOfMonth = getFirstDayOfNextMonth();
  // console.log(lastDayOfMonth);
  let end = new Date(lastDayOfMonth).getTime();

  // let now = new Date('2025/1/31 21:59:59').getTime();
  // let end = new Date('2025/1/31 23:59:59').getTime();

  let time = (end - now) / 60 / 60 / 1000 / 24;
  time = Math.ceil(time);

  return time;
}
function getFirstDayOfNextMonth() {
  let timezone = 2; //目标时区时间，东3区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数

  let now = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000
  );

  let lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  // console.log(lastDayOfMonth);
  return lastDayOfMonth;
  // const nextMonth = now.getMonth() + 1; // 当前月份加1
  // const nextYear = now.getFullYear(); // 获取当前年份
  // // 如果下个月大于11（即12月），年份需要增加1
  // if (nextMonth > 11) {
  //   return new Date(nextYear + 1, 0, 1); // 下一年的1月1日
  // } else {
  //   return new Date(nextYear, nextMonth, 1); // 下个月的1日
  // }
}
// 新改内容
// userStore.paymentChannel.value
// userStore.channelList.value
const channel = computed(() => userStore.paymentChannel)
const channelList = computed(() => userStore.channelList)
const channelListOptions = ref([])
const channelId = ref(null)
const loading = ref(false)
const loginAmount = ref(0)
const setAllAmount = () => {
  form.amount = loginAmount.value
  validateAmount()
}
const allTabs = computed(() => {
  return {
    "Ucard_Wallet": t('card.title'),
    "Digital_Currency": t('Custom.Deposit.Channel3'),
    "China_UnionPay": t('Custom.Deposit.Channel2'),
    "Electronic_Wallet": t('Custom.Deposit.Channel4'),
    "International_Transfer": t('Custom.Deposit.Channel1'),
    "CHANNEL_TYPE_CARD": t('PersonalManagement.Label.CreditCard'),
    "CHANNEL_TYPE_ALI_WALLET": t('Label.Ali'),
  }
})

// 固定顺序数组
const tabOrder = [
  "Ucard_Wallet",
  "Digital_Currency",
  "China_UnionPay",
  "Electronic_Wallet",
  "International_Transfer",
  "CHANNEL_TYPE_CARD",
  "CHANNEL_TYPE_ALI_WALLET"
]

function formatChannels(data) {
  const result = []
  // 按固定顺序遍历
  for (const key of tabOrder) {
    const list = data[key] || []
    if (list.length) {
      result.push({
        text: allTabs.value[key],
        value: key,
        disable: true
      })
      list.forEach(item => {
        result.push({
          ...item,
          text: item.name,
          value: item.code
        })
      })
    }
  }
  return result
}
const showCentAccountTransferTip = (login) => {
  const selectedAccount = loginOptions.value.find(
    (item) => item.login == login,
  );
  if (!selectedAccount) {
    return;
  }
  const isCentAccount =
    selectedAccount.type == "8" || selectedAccount.currency === "USC";
  if (isCentAccount) {
    confirm({
      title: t("Msg.SystemPrompt"),
      content: t("vu.item14") + t("vu.item15") + t("vu.item16"),
      confirmText: t("Btn.Confirm"),
      cancelText: t("Btn.Cancel"),
    })
  }
}
// -------------------- lifecycle --------------------
onMounted(() => {
  if (channelList.value) {
    channelListOptions.value = formatChannels(channelList.value)
  }
  channelId.value = channel.value
  getDateList();
  //调用手续费减免次数接口
  getFreeNumber();
  isNewYear24Open();
});
onUnmounted(() => {
  userStore.savePaymentChannel('')
  userStore.saveChannelList('')
})
// -------------------- watch --------------------
watch(channelId, async (newVal) => {
  if (newVal) {
    showTable()
    let row = channelListOptions.value.find(item => item.code == newVal)
    console.log(row, 123123);
    isShowStep3(row)
    validateAmount()
  }
});
watch(loginValue, (newVal) => {
  if (newVal) {
    // const found = loginOptions.value.find(opt => opt.login === Number(newVal))
    // loginValueDoc.value = found.label
    const found = loginOptions.value.find(opt => opt.login === Number(loginValue.value))
    loginAmount.value = found.balance ? Number(found.balance) : 0
    // showCentAccountTransferTip(Number(newVal))
    showTable();
    validateAmount()
  }
});
watch(isStep3, async (newVal) => {
  if (newVal) {
    await nextTick();
    formRef.value?.clearValidate();   // 先清除旧错误
    await nextTick();
    formRef.value?.clearValidate();   // 再次清除可能因数据重置产生的新错误
  }
});

watch(() => form.amount, (newVal) => {
  if (newVal && channelData.value.rate) {
    // form.amount1 = (newVal * channelData.rate).toFixed(2);
    if (isFree.value) {
      let feeAmount = 0;
      if (channelData.value.feeTypeBank) {
        if (channelData.value.feeTypeBank == 1) {
          feeAmount =
            Number(newVal || 0) *
            (Number(channelData.value.freeBank || 0) / 100);
        } else if (channelData.value.feeTypeBank == 2) {
          feeAmount = Number(channelData.value.feeAmountBank || 0);
        }
      } else {
        if (channelData.value.feeType == 1) {
          feeAmount =
            Number(newVal || 0) *
            (Number(channelData.value.free || 0) / 100);
        } else if (channelData.value.feeType == 2) {
          feeAmount = Number(channelData.value.feeAmount || 0);
        }
      }

      if (FreeNumber.value > 0) {
        form.amount1 = new Decimal(Number(newVal || 0))
          .mul(new Decimal(Number(channelData.value.rate || 0)))
          .toNumber();
      } else {
        form.amount1 = new Decimal(Number(newVal || 0))
          .sub(new Decimal(Number(feeAmount || 0)))
          .mul(new Decimal(Number(channelData.value.rate || 0)))
          .toNumber();
      }
    } else {
      form.amount1 = (newVal * channelData.value.rate).toFixed(2);
    }
    if (
      ["CNY", "THB", "VND"].indexOf(channelData.value.transformCurrency) > -1
    ) {
      form.amount1 = parseInt(form.amount1);
    }
  }
});




</script>

<style lang="scss" scoped>
@import "@/uni.scss";
.card{
  color: var(--bs-emphasis-color);
}

.custom-withdraw {
  width: px2rpx(566);
  flex-shrink: 0;

  .box {
    margin-bottom: px2rpx(20);

    .b-card {
      // background: #fff;
      // border-radius: px2rpx(12);
      // padding: px2rpx(20);
      // box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.03);
      border: 1px solid var(--bs-border-color);

      .card-top {
        .tit {
          font-size: px2rpx(16);
          font-weight: 600;
          margin-bottom: px2rpx(16);
          display: flex;
          align-items: center;
          color: var(--bs-heading-color);
          position: relative;
          // padding-left: 20px;

          // &:after {
          //   content: '';
          //   position: absolute;
          //   left: 0;
          //   top: 50%;
          //   transform: translateY(-50%);
          //   width: 0;
          //   height: 0;
          //   border-top: 6px solid transparent;
          //   border-bottom: 6px solid transparent;
          //   border-left: 8px solid currentColor;
          // }

          .iconfont {
            margin-right: px2rpx(8);
            color: var(--color-primary);
            font-size: px2rpx(18);
          }
        }
      }

      .channelType {
        font-size: px2rpx(15);
        font-weight: 600;
        margin: px2rpx(24) 0 px2rpx(12);
        color: var(--color-navy-700);
        padding-left: px2rpx(8);
        border-left: px2rpx(4) solid var(--color-primary);
      }
    }
  }

  .reselect-btn {
    margin-top: px2rpx(20);
    display: flex;
    justify-content: flex-end;
  }

  .s-btn {
    &.reselect {
      background-color: var(--color-zinc-100);
      color: var(--color-navy-700);
      border: none;
      font-size: px2rpx(14);
      padding: px2rpx(8) px2rpx(20);
      border-radius: px2rpx(8);

      &:active {
        background-color: var(--color-zinc-200);
      }
    }

    &[type="primary"] {
      width: 100%;
      height: px2rpx(48);
      background-color: #cf1322;
      color: var(--bs-emphasis-color);
      border-radius: px2rpx(12);
      font-size: px2rpx(16);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      margin-top: px2rpx(30);
      transition: all 0.2s;

      &:active {
        transform: scale(0.98);
        background-color: #cf1322;
      }
    }
  }

  .add-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
    padding: px2rpx(12) px2rpx(16);

    text {
      font-size: px2rpx(14);
      color: var(--color-navy-700);
      font-weight: 500;
    }

    .add-btn {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration: underline;

      &:active {
        opacity: 0.7;
      }
    }
  }

  .proof {
    margin-top: px2rpx(8);
    border: px2rpx(1) dashed var(--color-zinc-300);
    border-radius: px2rpx(8);
    padding: px2rpx(8);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-zinc-50);

    .state {
      padding: px2rpx(4) px2rpx(12);
      border-radius: px2rpx(4);
      font-size: px2rpx(12);
      font-weight: bold;
    }
  }

  .agree {
    margin: px2rpx(24) 0;
    display: flex;
    align-items: flex-start;

    .checkbox {
      display: flex;
      align-items: flex-start;
      gap: px2rpx(8);

      :deep(uni-checkbox .uni-checkbox-input) {
        border-radius: px2rpx(4);
        width: px2rpx(18);
        height: px2rpx(18);
      }

      text {
        font-size: px2rpx(13);
        color: var(--color-zinc-500);
        line-height: 1.5;
      }
    }
  }

  .step3-attention {
    // background: var(--color-error-50, #fff1f0);
    border-radius: px2rpx(12);
    margin-bottom: px2rpx(20);

    .tips {
      line-height: 1.8;
      font-size: px2rpx(12);
      color: var(--bs-heading-color);
      padding: px2rpx(12);
      border-radius: px2rpx(4);
      border-left: px2rpx(2) solid #cf1322;

      .title {
        font-weight: 600;
        margin-bottom: px2rpx(6);
        color: var(--bs-heading-color);
      }
    }

    .attention {
      font-size: px2rpx(14);
      //  color: var(--color-error-600, #cf1322);
      line-height: 1.6;
    }

    .btn-bottom {
      margin-top: px2rpx(20);
      display: flex;
      justify-content: center;

      .btn {
        background: var(--color-error-600, #cf1322);
        color: var(--bs-emphasis-color);
        padding: px2rpx(10) px2rpx(48);
        border-radius: px2rpx(24);
        font-size: px2rpx(15);
        font-weight: 700;
        box-shadow: 0 px2rpx(4) px2rpx(10) rgba(207, 19, 34, 0.2);
        transition: all 0.2s;

        &:active {
          transform: scale(0.96);
          opacity: 0.8;
        }
      }
    }
  }

  :deep(.base-info-form) {
    .uni-row1 {
      .uni-col {
        padding: 0 px2rpx(10) !important;
      }

      .uni-forms-item {
        min-height: px2rpx(36);
        margin-bottom: px2rpx(28);
      }

      .uni-easyinput__content-input {
        height: px2rpx(35) !important;
      }
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}



.amount-box {
  display: flex;
  align-items: center;
  gap: px2rpx(12);

  .amount-input {
    flex: 1;
  }

  // .btn {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   font-size: px2rpx(14);
  //   margin-bottom: px2rpx(12);
  //   height: px2rpx(35);
  //   background-color: #cf1322;
  //   color: #fff;
  //   border-radius: px2rpx(4);
  //   font-weight: 600;
  //   border: none;
  //   padding: 0 px2rpx(20);
  //   margin-top: px2rpx(21);
  //   cursor: pointer;
  // }
}

.amount-box1 {
  align-items: flex-start;

  .btn {

    margin-top: px2rpx(0);
  }

}



.custom-deposit-container {
  width: 100%;
  display: flex;
  gap: px2rpx(60);
  justify-content: space-between;
}

@media (max-width: 992px) {
  .custom-withdraw {
    width: 100%;
    margin-top: px2rpx(20);
  }

  .custom-deposit-container {
    display: flex;
    gap: px2rpx(30);
    flex-wrap: wrap;
  }
}
</style>