<template>
  <view class="recharge">
    <u-navbar
      title=""
      bgColor="transparent"
      :placeholder="true"
      :fixed="true"
      leftIcon=""
      height="60"
    >
      <view slot="left">
        <text class="navbar-lab">{{ $lang.recharge }}</text>
      </view>
    </u-navbar>
    <view class="content">
      <template v-if="userInfo.pay_channel == 'BC' && userInfo.area_id != 3">
        <view class="picker-view" @click="show = true">
          <u-input
            readonly
            :placeholder="$lang.pleaseChoose"
            color="#f7ecd0"
            v-model="type"
            border="none"
          >
            <u--text
              :text="$lang.chooseRecharge"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
            <u-icon
              slot="suffix"
              name="arrow-down-fill"
              color="#b9aa84"
              size="16"
            ></u-icon>
          </u-input>
        </view>
        <u-picker
          :title="$lang.chooseRecharge"
          closeOnClickOverlay
          :show="show"
          :columns="columns"
          :cancelText="$lang.cancel"
          :confirmText="$lang.confirm"
          @cancel="close"
          @close="close"
          @confirm="confirm"
        ></u-picker>
        <view class="list">
          <view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
          <view class="type">TRC20</view>
        </view>

        <view class="list">
          <view class="lab">{{ $lang.walletAddress }}：</view>
          <view class="box">
            <u-input
              readonly
              :placeholder="$lang.walletAddress"
              fontSize="12px"
              color="#f7ecd0"
              :value="address"
            >
              <template slot="suffix">
                <u-button
                  class="btn"
                  :text="$lang.copy"
                  @click="copyCode"
                  color="#e5b932"
                ></u-button>
              </template>
            </u-input>
          </view>
        </view>
        <view class="list qrcode">
          <u--image
            radius="5px"
            :showLoading="true"
            :src="qrcode"
            width="200px"
            height="200px"
            mode="scaleToFill"
          ></u--image>
        </view>
        <view class="list">
          <view class="tip">
            {{ $lang.rechargeTip }}
          </view>
        </view>
      </template>
      <template v-if="userInfo.pay_channel == 'YBF' && userInfo.area_id != 3">
        <view
          class="picker-view"
          @click="fnPicker('currency')"
          v-if="currency_list.length"
        >
          <u-input
            readonly
            :placeholder="$lang.chooseCoin"
            color="#f7ecd0"
            v-model="currency.name"
            border="none"
          >
            <u--text
              :text="$lang.chooseCoin"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
            <u-icon
              slot="suffix"
              name="arrow-down-fill"
              color="#b9aa84"
              size="16"
            ></u-icon>
          </u-input>
        </view>
        <view
          class="picker-view"
          @click="fnPicker('coin_type')"
          v-if="coin_type_list.length"
        >
          <u-input
            readonly
            :placeholder="$lang.chooseLine"
            color="#f7ecd0"
            v-model="coin_type.name"
            border="none"
          >
            <u--text
              :text="$lang.chooseLine"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
            <u-icon
              slot="suffix"
              name="arrow-down-fill"
              color="#b9aa84"
              size="16"
            ></u-icon>
          </u-input>
        </view>
        <view class="picker-view">
          <u-input
            :placeholder="$lang.enterMoney"
            color="#f7ecd0"
            v-model="amount"
            border="none"
          >
            <u--text
              :text="$lang.rechargeAmount"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
          </u-input>
        </view>
        <view class="list mb60">
          <u-button
            class="button"
            color="#e5b932"
            :text="$lang.submit"
            @click="submit"
          ></u-button>
        </view>
        <view class="list">
          <view class="tip">
            {{ $lang.rechargeTip }}
          </view>
        </view>
        <u-picker
          :title="$lang.chooseRecharge"
          closeOnClickOverlay
          :show="showPicker"
          :columns="columnsPicker"
          keyName="name"
          :cancelText="$lang.cancel"
          :confirmText="$lang.confirm"
          @cancel="closePicker"
          @close="closePicker"
          @confirm="confirmPicker"
        ></u-picker>
      </template>
      <!-- 越南地区：银行卡 (AlinPay) / USDT (Epay) 双通道（和 PC 同步按 area_id 判断） -->
      <template v-if="userInfo.area_id == 3">
        <view class="pay-tabs">
          <view
            class="pay-tab"
            :class="{ active: payChannel === 'alin' }"
            @click="payChannel = 'alin'"
          >Thẻ ngân hàng</view>
          <view
            class="pay-tab"
            :class="{ active: payChannel === 'epay' }"
            @click="payChannel = 'epay'"
          >USDT (TRC20)</view>
          <view
            class="pay-tab"
            :class="{ active: payChannel === 'ccpay' }"
            @click="payChannel = 'ccpay'"
          >Ngân hàng QR</view>
        </view>
        <view class="picker-view">
          <u-input
            :placeholder="payChannel === 'epay' ? 'Nhập số tiền VND (vd: 1,000,000)' : 'Tối thiểu 1,000,000'"
            color="#f7ecd0"
            v-model="amount"
            type="number"
            border="none"
          >
            <u--text
              :text="payChannel === 'epay' ? ($lang.rechargeAmount || '充值金额') + ' (VND)' : ($lang.rechargeAmount || '充值金额')"
              slot="prefix"
              margin="0 3px 0 0"
              type="tips"
            ></u--text>
          </u-input>
        </view>
        <view class="list mb60">
          <u-button
            class="button"
            color="#e5b932"
            :text="$lang.submit"
            @click="payChannel === 'ccpay' ? submitCcpay() : (payChannel === 'epay' ? submitEpay() : submitAlin())"
          ></u-button>
        </view>
        <view class="list">
          <view class="tip">
            {{ payChannel === 'epay' ? 'Nhập số tiền theo VND — hệ thống tự động quy đổi sang USDT theo tỷ giá 1 USDT ≈ 27,100 VND. Thanh toán qua mạng TRC20.' : (payChannel === 'ccpay' ? 'Nhập số tiền VND — hệ thống tạo mã QR ngân hàng. Quét mã thanh toán qua ứng dụng ngân hàng.' : $lang.rechargeTip) }}
          </view>
        </view>
      </template>
    </view>
    <view class="mb60"></view>

    <!-- AlinPay 内嵌支付弹窗 -->
    <view class="alin-overlay" v-if="alinPay.visible" @click.self="closeAlinPay">
      <view class="alin-pay-box">
        <view class="alin-pay-header">
          <text class="alin-pay-title">Thanh toán ngân hàng</text>
          <view class="epay-qr-close" @click="closeAlinPay">×</view>
        </view>
        <iframe v-if="alinPay.url" :src="alinPay.url" class="alin-iframe" frameborder="0" allow="payment"></iframe>
      </view>
    </view>

    <!-- USDT 内嵌二维码弹窗 -->
    <u-popup :show="epayQr.visible" mode="center" round="10" :closeOnClickOverlay="false" @close="closeEpayQr">
      <view class="epay-qr-box">
        <view class="epay-qr-close" @click="closeEpayQr">×</view>
        <view class="epay-qr-title">USDT (TRC20)</view>
        <view class="epay-qr-status" :class="epayQr.statusClass">{{ epayQr.statusText }}</view>

        <view class="epay-qr-img-wrap">
          <u--image v-if="epayQr.qrDataUrl" :src="epayQr.qrDataUrl" width="340rpx" height="340rpx" mode="scaleToFill"></u--image>
        </view>

        <view class="epay-qr-field">
          <view class="epay-qr-label">Số tiền USDT (chính xác)</view>
          <view class="epay-qr-value amount">
            <text>{{ epayQr.data.usdt_amount }} USDT</text>
            <view class="epay-qr-btn" @click="copyEpayText(epayQr.data.usdt_amount, 'amount')">
              {{ epayQr.copied === 'amount' ? '✓' : 'Copy' }}
            </view>
          </view>
        </view>

        <view class="epay-qr-field">
          <view class="epay-qr-label">Địa chỉ ví (TRC20)</view>
          <view class="epay-qr-value addr">
            <text>{{ epayQr.data.usdt_address }}</text>
            <view class="epay-qr-btn" @click="copyEpayText(epayQr.data.usdt_address, 'addr')">
              {{ epayQr.copied === 'addr' ? '✓' : 'Copy' }}
            </view>
          </view>
        </view>

        <view class="epay-qr-meta">
          <text>≈ {{ epayQr.data.vnd_amount }} VND</text>
          <text class="epay-qr-countdown">⏱ {{ epayQr.countdownText }}</text>
        </view>

        <view class="epay-qr-tip">
          ⚠ Vui lòng chuyển chính xác số tiền. Sai số sẽ không thể xác định đơn hàng!
        </view>
      </view>
    </u-popup>

    <!-- CCpay 银行QR弹窗 -->
    <u-popup :show="bankQr.visible" mode="center" round="10" :closeOnClickOverlay="false" @close="closeBankQr">
      <view class="epay-qr-box">
        <view class="epay-qr-close" @click="closeBankQr">×</view>
        <view class="epay-qr-title">Ngân hàng QR</view>
        <view class="epay-qr-status" :class="bankQr.statusClass">{{ bankQr.statusText }}</view>

        <view class="epay-qr-img-wrap" v-if="bankQr.qrDataUrl">
          <u--image :src="bankQr.qrDataUrl" width="340rpx" height="340rpx" mode="scaleToFill"></u--image>
        </view>

        <view class="epay-qr-field">
          <view class="epay-qr-label">Số tài khoản</view>
          <view class="epay-qr-value amount">
            <text>{{ bankQr.data.bank_account }}</text>
            <view class="epay-qr-btn" @click="copyEpayText(bankQr.data.bank_account, 'bank_acc')">
              {{ epayQr.copied === 'bank_acc' ? '✓' : 'Copy' }}
            </view>
          </view>
        </view>

        <view class="epay-qr-field">
          <view class="epay-qr-label">Tên tài khoản — Ngân hàng</view>
          <view class="epay-qr-value addr">
            <text>{{ bankQr.data.bank_name }} — {{ bankQr.data.bank_short }}</text>
          </view>
        </view>

        <view class="epay-qr-meta">
          <text>{{ Number(bankQr.data.amount).toLocaleString() }} VND</text>
          <text class="epay-qr-countdown">⏱ {{ bankQr.countdownText }}</text>
        </view>

        <view class="epay-qr-tip">
          ⚠ Vui lòng chuyển khoản chính xác số tiền. Sai thông tin sẽ không thể xác nhận đơn hàng!
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";
import qr from "qr-image";
export default {
  data() {
    return {
      address: "",
      qrcode: "",
      // 币种选择
      type: "USDT",
      show: false,
      columns: [["USDT"]],
      // 支付方式
      showPicker: false,
      columnsPicker: [],
      pickerType: "",
      amount: "",
      currency: { name: "", key: "" },
      coin_type: { name: "", key: "" },
      // 越南地区在线支付通道：'alin'(银行卡) | 'epay'(USDT)
      payChannel: "alin",
      // 内嵌 USDT 二维码弹窗状态
      epayQr: {
        visible: false,
        data: { usdt_address: "", usdt_amount: "", vnd_amount: "", expires_at: 0, order_sn: "" },
        qrDataUrl: "",
        countdownText: "",
        statusText: "",
        statusClass: "waiting",
        copied: "",
      },
      _epayPollTimer: null,
      _epayCountdownTimer: null,
      bankQr: {
        visible: false,
        data: { bank_account: "", bank_name: "", bank_short: "", qr_data: "", amount: 0, order_sn: "", expires_at: 0, timeout_sec: 600 },
        qrDataUrl: "",
        countdownText: "",
        statusText: "",
        statusClass: "waiting",
      },
      _bankPollTimer: null,
      _bankCountdownTimer: null,
      alinPay: {
        visible: false,
        url: "",
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
      coin_type_list: (state) => {
        return state.app?.userInfo?.pay_channel_coin_chain || [];
      },
      currency_list: (state) => {
        return state.app?.userInfo?.pay_channel_currency || [];
      },
    }),
  },
  onLoad() {
    if (this.userInfo && this.userInfo.wallet) {
      this.address = this.userInfo.wallet.address;
      this.setQrCode();
    }
    if (
      this.userInfo &&
      this.userInfo.pay_channel_coin_chain &&
      this.userInfo.pay_channel_coin_chain.length
    ) {
      this.coin_type = this.userInfo.pay_channel_coin_chain[0];
    }
    if (
      this.userInfo &&
      this.userInfo.pay_channel_currency &&
      this.userInfo.pay_channel_currency.length
    ) {
      this.currency = this.userInfo.pay_channel_currency[0];
    }
  },
  methods: {
    confirm(chose) {
      this.type = chose.value[0];
      this.close();
    },
    close() {
      this.show = false;
    },
    setQrCode() {
      const qrcode =
        "data:image/png;base64," +
        uni.arrayBufferToBase64(
          qr.imageSync(this.address, {
            margin: 2,
          })
        );
      this.qrcode = qrcode;
    },
    // 复制链接
    copyCode() {
      uni.setClipboardData({
        data: this.address,
        success: () => {
          this.$toast({
            message: this.$lang.copySuccessfully,
            duration: 2000,
          });
        },
      });
    },
    fnPicker(type) {
      this.pickerType = type;
      this.columnsPicker = [this[`${type}_list`]];
      this.showPicker = true;
    },
    confirmPicker(chose) {
      this[this.pickerType] = chose.value[0];
      this.closePicker();
    },
    closePicker() {
      this.showPicker = false;
    },
    submit() {
      if (!this.amount) {
        this.$toast({
          message: this.$lang.enterWithdrawalamount,
          duration: 2000,
        });
      } else {
        const params = {
          user_id: this.userInfo.id,
          pay_channel: this.userInfo.pay_channel,
          amount: this.amount,
          currency: this.currency.key,
          coin_type: this.coin_type.key,
        };
        this.$toast({
          type: "loading",
          message: `${this.$lang.submit}...`,
          duration: 200000,
        });
        this.$api
          .ybfDeposit(params)
          .then((res) => {
            if (res.Success == 1) {
              const o = navigator.userAgent;
              const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
              if (isiOS) {
                window.location.href = res.data.payUrl;
              } else {
                window.open(res.data.payUrl, "_blank");
              }
            }
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.$toastHide();
          });
      }
    },
    // 越南 AlinPay 充值
    submitAlin() {
      if (!this.amount || this.amount <= 0) {
        this.$toast({
          message: 'Vui lòng nhập số tiền',
          duration: 2000,
        });
        return;
      }
      if (this.amount < 1000000) {
        this.$toast({
          message: 'Số tiền tối thiểu là 1,000,000',
          duration: 2000,
        });
        return;
      }
      const params = {
        user_id: this.userInfo.id,
        price: this.amount,
        client: 3,
        username: this.userInfo.username,
      };
      this.$toast({
        type: "loading",
        message: `${this.$lang.submit}...`,
        duration: 200000,
      });
      this.$api
        .alinDeposit(params)
        .then((res) => {
          const d = res.Data || {};
          if (d.status == 1 && d.url) {
            this.alinPay.url = d.url;
            this.alinPay.visible = true;
          } else {
            this.$toast({
              message: d.message || '充值失败',
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.$toastHide();
        });
    },
    submitEpay() {
      if (!this.amount || this.amount <= 0) {
        this.$toast({ message: 'Vui lòng nhập số tiền', duration: 2000 });
        return;
      }
      if (this.amount < 1000000) {
        this.$toast({ message: 'Số tiền tối thiểu là 1,000,000', duration: 2000 });
        return;
      }
      const params = {
        user_id: this.userInfo.id,
        price: this.amount,
        client: 3,
        username: this.userInfo.username,
        pay_type: 'usdt',
      };
      this.$toast({
        type: "loading",
        message: `${this.$lang.submit}...`,
        duration: 200000,
      });
      this.$api
        .epayDeposit(params)
        .then((res) => {
          const d = res.Data || {};
          if (d.status == 1 && d.qrcode) {
            this.openEpayQr(d.qrcode);
          } else if (d.status == 1 && d.url) {
            // 后端未升级时兼容跳转
            const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isiOS) window.location.href = d.url; else window.open(d.url, "_blank");
          } else {
            this.$toast({ message: d.message || 'Nạp thất bại', duration: 2000 });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.$toastHide();
        });
    },
    openEpayQr(qrcode) {
      this.epayQr.data = qrcode;
      this.epayQr.statusText = "Đang chờ thanh toán...";
      this.epayQr.statusClass = "waiting";
      this.epayQr.copied = "";
      // 生成二维码图片（复用现有 qr-image 库）
      try {
        this.epayQr.qrDataUrl =
          "data:image/png;base64," +
          uni.arrayBufferToBase64(qr.imageSync(qrcode.usdt_address, { margin: 2 }));
      } catch (e) {
        this.epayQr.qrDataUrl = "";
      }
      this.epayQr.visible = true;
      this.startEpayCountdown();
      this.startEpayPolling();
    },
    startEpayCountdown() {
      const tick = () => {
        const left = Math.max(0, this.epayQr.data.expires_at - Math.floor(Date.now() / 1000));
        const m = Math.floor(left / 60);
        const s = left % 60;
        this.epayQr.countdownText = (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
        if (left <= 0) {
          this.epayQr.statusText = "Đơn hàng đã hết hạn";
          this.epayQr.statusClass = "expired";
          this.stopEpayTimers();
        }
      };
      tick();
      this._epayCountdownTimer = setInterval(tick, 1000);
    },
    startEpayPolling() {
      const poll = () => {
        if (!this.epayQr.visible || !this.epayQr.data.order_sn) return;
        this.$api
          .epayOrderStatus({
            user_id: this.userInfo.id,
            order_sn: this.epayQr.data.order_sn,
          })
          .then((res) => {
            const d = res.Data || {};
            if (d.status == 1) {
              this.epayQr.statusText = "Thanh toán thành công!";
              this.epayQr.statusClass = "success";
              this.stopEpayTimers();
              this.$store.dispatch("app/getUserInfo");
              setTimeout(() => this.closeEpayQr(), 2500);
            } else if (d.status == 2) {
              this.epayQr.statusText = "Đơn hàng đã hết hạn";
              this.epayQr.statusClass = "expired";
              this.stopEpayTimers();
            }
          })
          .catch(() => {});
      };
      this._epayPollTimer = setInterval(poll, 3000);
      setTimeout(poll, 1000);
    },
    copyEpayText(text, tag) {
      uni.setClipboardData({
        data: String(text),
        success: () => {
          this.epayQr.copied = tag;
          setTimeout(() => {
            if (this.epayQr.copied === tag) this.epayQr.copied = "";
          }, 1500);
        },
      });
    },
    closeAlinPay() {
      this.alinPay.visible = false;
      this.alinPay.url = "";
    },
    closeEpayQr() {
      this.epayQr.visible = false;
      this.stopEpayTimers();
    },
    stopEpayTimers() {
      if (this._epayPollTimer) {
        clearInterval(this._epayPollTimer);
        this._epayPollTimer = null;
      }
      if (this._epayCountdownTimer) {
        clearInterval(this._epayCountdownTimer);
        this._epayCountdownTimer = null;
      }
    },
    submitCcpay() {
      if (!this.amount || this.amount <= 0) {
        this.$toast({ message: 'Vui lòng nhập số tiền', duration: 2000 });
        return;
      }
      if (this.amount < 1000000) {
        this.$toast({ message: 'Số tiền tối thiểu là 1,000,000', duration: 2000 });
        return;
      }
      const params = {
        user_id: this.userInfo.id,
        price: this.amount,
        client: 3,
        username: this.userInfo.username,
      };
      this.$toast({ type: "loading", message: `${this.$lang.submit}...`, duration: 200000 });
      this.$api
        .ccpayDeposit(params)
        .then((res) => {
          const d = res.Data || {};
          if (d.status == 1 && d.qrcode) {
            this.openBankQr(d.qrcode);
          } else if (d.status == 1 && d.url) {
            const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isiOS) window.location.href = d.url; else window.open(d.url, "_blank");
          } else {
            this.$toast({ message: d.message || 'Nạp thất bại', duration: 2000 });
          }
        })
        .catch((err) => { console.log(err); })
        .finally(() => { this.$toastHide(); });
    },
    openBankQr(qrcode) {
      this.bankQr.data = qrcode;
      this.bankQr.statusText = "Đang chờ thanh toán...";
      this.bankQr.statusClass = "waiting";
      try {
        this.bankQr.qrDataUrl = qrcode.qr_data
          ? "data:image/png;base64," + uni.arrayBufferToBase64(qr.imageSync(qrcode.qr_data, { margin: 2 }))
          : "";
      } catch (e) { this.bankQr.qrDataUrl = ""; }
      this.bankQr.visible = true;
      this.startBankCountdown();
      this.startBankPolling();
    },
    startBankCountdown() {
      const tick = () => {
        const left = Math.max(0, this.bankQr.data.expires_at - Math.floor(Date.now() / 1000));
        const m = Math.floor(left / 60);
        const s = left % 60;
        this.bankQr.countdownText = (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
        if (left <= 0) {
          this.bankQr.statusText = "Đơn hàng đã hết hạn";
          this.bankQr.statusClass = "expired";
          this.stopBankTimers();
        }
      };
      tick();
      this._bankCountdownTimer = setInterval(tick, 1000);
    },
    startBankPolling() {
      const poll = () => {
        if (!this.bankQr.visible || !this.bankQr.data.order_sn) return;
        this.$api
          .ccpayOrderStatus({ user_id: this.userInfo.id, order_sn: this.bankQr.data.order_sn })
          .then((res) => {
            const d = res.Data || {};
            if (d.status == 1) {
              this.bankQr.statusText = "Thanh toán thành công!";
              this.bankQr.statusClass = "success";
              this.stopBankTimers();
              this.$store.dispatch("app/getUserInfo");
              setTimeout(() => this.closeBankQr(), 2500);
            } else if (d.status == 2) {
              this.bankQr.statusText = "Đơn hàng đã hết hạn";
              this.bankQr.statusClass = "expired";
              this.stopBankTimers();
            }
          })
          .catch(() => {});
      };
      this._bankPollTimer = setInterval(poll, 3000);
      setTimeout(poll, 1000);
    },
    closeBankQr() {
      this.bankQr.visible = false;
      this.stopBankTimers();
    },
    stopBankTimers() {
      if (this._bankPollTimer) { clearInterval(this._bankPollTimer); this._bankPollTimer = null; }
      if (this._bankCountdownTimer) { clearInterval(this._bankCountdownTimer); this._bankCountdownTimer = null; }
    },
  },
  beforeDestroy() {
    this.stopEpayTimers();
    this.stopBankTimers();
  },
};
</script>

<style lang="scss" scoped>
.pay-tabs {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16px;
}

.pay-tab {
  flex: 1;
  min-height: 44px;
  padding: 0 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #b9aa84;
  background: linear-gradient(
    180deg,
    rgba(21, 18, 15, 0.96) 0%,
    rgba(13, 11, 9, 0.96) 100%
  );
  border: 1rpx solid rgba(223, 189, 120, 0.14);
  border-radius: 16px;
  font-size: 24rpx;
  line-height: 1.3;
  transition: all 0.2s;

  &.active {
    color: #231705;
    font-weight: 700;
    background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
    border-color: rgba(242, 223, 182, 0.5);
    box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.36);
  }
}

.recharge {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
  color: #f7ecd0;

  ::v-deep .u-navbar {
    background: rgba(0, 0, 0, 0.72) !important;
  }

  ::v-deep .u-navbar__content {
    background: transparent !important;
  }

  ::v-deep .u-picker__view__column__item {
    color: #f3e3b8 !important;
  }

  ::v-deep .u-toolbar {
    background: #15120f !important;
    border-bottom-color: rgba(223, 189, 120, 0.12) !important;
  }

  ::v-deep .u-toolbar__title {
    color: #f4dfae !important;
  }

  .navbar-lab {
    color: #fbf2de;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.3px;
  }

  .content {
    width: calc(100% - 24px);
    max-width: 760px;
    margin: 10px auto 0;
    padding: 18px 16px 22px;
    box-sizing: border-box;
    border-radius: 24px;
    background: linear-gradient(
      180deg,
      rgba(16, 13, 11, 0.96) 0%,
      rgba(10, 8, 7, 0.96) 100%
    );
    border: 1px solid rgba(223, 189, 120, 0.18);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 245, 223, 0.03);

    .picker-view {
      min-height: 56px;
      margin-bottom: 14px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      background: linear-gradient(
        180deg,
        rgba(25, 21, 18, 0.96) 0%,
        rgba(17, 14, 12, 0.96) 100%
      );
      border: 1px solid rgba(223, 189, 120, 0.14);
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);

      ::v-deep .u-input {
        flex: 1;
      }

      ::v-deep .u-input__content {
        min-height: 54px;
        padding: 0;
      }

      ::v-deep .u-input__content__field-wrapper {
        width: 100%;
      }

      ::v-deep input {
        color: #f7ecd0 !important;
        font-size: 15px !important;
        letter-spacing: 0.2px;
      }

      ::v-deep input::placeholder {
        color: rgba(245, 228, 184, 0.4) !important;
      }

      ::v-deep .u-text__value {
        color: #baa67f !important;
        font-size: 13px !important;
      }
    }

    .list {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(
        180deg,
        rgba(23, 19, 16, 0.92) 0%,
        rgba(14, 12, 10, 0.92) 100%
      );
      border: 1px solid rgba(223, 189, 120, 0.1);
      font-size: 14px;
      text-align: center;

      &.qrcode {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: 20px 14px;

        ::v-deep .u-image {
          border-radius: 18px !important;
          overflow: hidden;
          border: 1px solid rgba(223, 189, 120, 0.12);
          background: #fff;
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
        }
      }

      .lab {
        color: #b9aa84;
        margin: 0 0 10px;
        text-align: left;
        font-size: 13px;
      }

      .box {
        ::v-deep .u-input {
          min-height: 48px;
          padding: 0 12px;
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(223, 189, 120, 0.12);
          border-radius: 14px;
        }

        ::v-deep .u-input__content {
          min-height: 48px;
        }

        ::v-deep input {
          color: #f7ecd0 !important;
        }
      }

      .btn {
        min-width: 76px;
        height: 34px;
        font-weight: 700;
        border: none !important;
        border-radius: 12px !important;
        color: #231705 !important;
        box-shadow: 0 8px 18px rgba(125, 84, 22, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
      }

      .type {
        min-width: 86px;
        height: 36px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
        border-radius: 999px;
        text-align: center;
        line-height: 36px;
        font-weight: 700;
        color: #231705;
        box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
        margin: 0 auto;
      }

      .button {
        height: 50px !important;
        margin-top: 8px;
        margin-bottom: 2px;
        border: none !important;
        border-radius: 16px !important;
        color: #231705 !important;
        font-weight: 700;
        letter-spacing: 0.3px;
        box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.36);
      }

      .tip {
        color: #bca47a;
        font-size: 13px;
        text-align: justify;
        line-height: 1.6;
      }
    }

    .mb60 {
      margin-bottom: 0 !important;
    }
  }
}

/* ============ 内嵌 USDT / 银行二维码弹窗 ============ */
.epay-qr-box {
  width: 620rpx;
  padding: 34rpx 34rpx 28rpx;
  background: linear-gradient(
    180deg,
    rgba(20, 16, 12, 0.98) 0%,
    rgba(11, 9, 7, 0.98) 100%
  );
  border: 1rpx solid rgba(223, 189, 120, 0.18);
  border-radius: 20rpx;
  color: #f0dbab;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
}

.epay-qr-close {
  position: absolute;
  top: 12rpx;
  right: 16rpx;
  color: #b7a37d;
  font-size: 38rpx;
  line-height: 1;
  padding: 10rpx 16rpx;
}

.epay-qr-title {
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
  margin-bottom: 10rpx;
  color: #f7e6bd;
}

.epay-qr-status {
  width: fit-content;
  min-width: 180rpx;
  margin: 0 auto 20rpx;
  padding: 8rpx 18rpx;
  text-align: center;
  font-size: 22rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.03);

  &.waiting {
    color: #e5b932;
  }

  &.success {
    color: #7cd992;
  }

  &.expired {
    color: #e67e72;
  }
}

.epay-qr-img-wrap {
  width: 340rpx;
  height: 340rpx;
  margin: 0 auto 24rpx;
  background: #fff;
  padding: 16rpx;
  border-radius: 20rpx;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.18);
}

.epay-qr-field {
  margin-bottom: 16rpx;
}

.epay-qr-label {
  color: #ab9770;
  font-size: 22rpx;
  margin-bottom: 8rpx;
}

.epay-qr-value {
  display: flex;
  align-items: center;
  gap: 12rpx;
  background: rgba(255, 255, 255, 0.03);
  border: 1rpx solid rgba(223, 189, 120, 0.12);
  border-radius: 14rpx;
  padding: 14rpx 16rpx;
  font-size: 24rpx;
  word-break: break-all;

  &.amount {
    color: #fff8e6;
    font-weight: 700;
    font-size: 28rpx;
  }

  &.addr {
    color: #f0dbab;
    font-family: "Courier New", monospace;
    font-size: 20rpx;
  }

  text {
    flex: 1;
  }
}

.epay-qr-btn {
  flex-shrink: 0;
  min-width: 90rpx;
  text-align: center;
  background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
  color: #231705;
  font-size: 22rpx;
  padding: 8rpx 18rpx;
  border-radius: 10rpx;
  font-weight: 700;
}

.epay-qr-meta {
  display: flex;
  justify-content: space-between;
  color: #b7a37d;
  font-size: 24rpx;
  margin: 20rpx 0 12rpx;
}

.epay-qr-countdown {
  color: #e5b932;
  font-weight: 700;
}

.epay-qr-tip {
  color: #d58c65;
  font-size: 22rpx;
  text-align: center;
  line-height: 1.6;
  margin-top: 14rpx;
  opacity: 0.92;
}

.alin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.alin-pay-box {
  width: 92vw;
  height: 85vh;
  background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
  border: 1px solid rgba(223, 189, 120, 0.16);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
}

.alin-pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(20, 17, 14, 0.96);
  border-bottom: 1px solid rgba(223, 189, 120, 0.12);
}

.alin-pay-title {
  color: #f4dca3;
  font-size: 16px;
  font-weight: 700;
}

.alin-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}
</style>
