<template>
  <div class="main-wrapper py-5" style="background: #f5f7fa;">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
          <div class="card custom-card">
            <!-- 卡头 -->
            <div class="card-header text-center card-header-gradient">
              <h3 class="card-title mb-0">充值中心</h3>
              <p class="card-subtitle mb-0">为账户充值以调用付费 API</p>
            </div>

            <!-- 卡体 -->
            <div class="card-body">
              <!-- 余额展示 -->
              <div class="balance-box mb-4">
                <div class="balance-left">
                  <i class="fas fa-wallet balance-icon" aria-hidden="true"></i>
                </div>
                <div class="balance-right">
                  <div class="small text-muted">剩余余额</div>
                  <div class="balance-amount">{{ userInfo.balance }} <span class="currency">元</span></div>
                </div>
              </div>

              <!-- 充值金额 -->
              <div class="mb-4">
                <label class="form-label font-weight-bold">充值金额</label>
                <div class="input-group custom-input-group">
                  <input type="text" inputmode="decimal" class="form-control custom-input" placeholder="请输入充值金额"
                    v-model="formattedRechargeAmount" />
                  <span class="input-group-text custom-input-text">元</span>
                </div>
                <small class="form-text text-muted mt-2">支持支付宝、微信等常用支付方式。输入金额后点击立即充值。</small>
              </div>

              <!-- 支付方式 -->
              <div class="mb-4">
                <p class="font-weight-bold mb-2 section-title">选择支付方式</p>
                <div class="d-flex flex-wrap payment-options">
                  <div v-for="item in payOptions" :key="item.id" class="option-box"
                    :class="{ 'selected-box': selectedpay === item.id }" @click="selectedpay = item.id" role="button"
                    :aria-pressed="selectedpay === item.id">
                    <div class="option-inner">
                      <img :src="item.img" :alt="item.name" class="option-img" />
                      <div class="option-name">{{ item.name }}</div>
                    </div>
                    <span v-if="selectedpay === item" class="check-badge"><i class="fa fa-check"></i></span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 卡尾 -->
            <div class="card-footer bg-white border-0 text-center">
              <button class="btn custom-btn w-100" @click="deposit">
                立即充值
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import alipayIcon from '@/assets/images/Alipay.png';
import wechatIcon from '@/assets/images/wechat.png';
import qqIcon from '@/assets/images/qq.png'
import axiosIntance from '@/request/request'

export default {
  name: "Balance",
  data() {
    return {
      userInfo: { balance: 0 },
      rechargeAmount: 0,
      selectedpay: 0,
      payMap: ['支付宝', '微信支付', '银行卡支付', 'QQ'],
      payIconMap: [alipayIcon,wechatIcon,qqIcon,qqIcon],
      payOptions: [
        //{ name: "支付宝", img: require("@/assets/images/Alipay.png") },
        //{ name: "微信支付", img: require("@/assets/images/wechat.png") }
      ]
    };
  },
  computed: {
    formattedRechargeAmount: {
      get() {
        const num = Number(this.rechargeAmount) || 0;
        return num
          .toFixed(2)
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      set(val) {
        const num = parseFloat(String(val).replace(/,/g, ""));
        if (!isNaN(num)) this.rechargeAmount = num;
      }
    }
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await this.$api.getUserInfo();
        if (res.code === 1000) this.userInfo = res.data;
        else this.$alert("加载失败", "danger");
      } catch {
        this.$alert("加载失败", "danger");
      }
    },
    async deposit() {
      if (this.rechargeAmount <= 0) {
        this.$alert('充值金额必须大于0', 'warning')
        return
      }
      const returnUrl = `${location.origin}/paynotice`;
      try {
        const res = await this.$api.createPayment(
          this.selectedpay,
          this.rechargeAmount,
          returnUrl
        );
        if (res.success) window.location.href = res.payUrl;
        else this.$alert("跳转支付失败", "danger");
      } catch {
        this.$alert("跳转支付失败", "danger");
      }
    },
    async getAllPayments() {
      try {
        const res = await this.$api.getAllPublicPayment();
        if (res.code != 1000) {
          this.$alert(res.message, 'danger')
          return
        }
        //this.payments = res.data
        this.setPayoptions(res.data);
      } catch (e) {
        this.$alert('加载支付方式列表失败', 'danger')
        console.error(e)
      }
    },
    setPayoptions(payments) {
      this.payOptions = payments.map(item => ({
        id: item.id,
        name: this.payMap[item.method],
        img: this.payIconMap[item.method]
      }));
    }
  },
  async created() {
    await this.getUserInfo();
    await this.getAllPayments();
  }
};
</script>

<style scoped>
/* 基准色彩，可按需调整 */
:root {
  --brand-1: #5b6cff;
  --brand-2: #6dd3ff;
  --muted: #8b94a6;
  --card-bg: #ffffff;
  --surface: #f5f7fa;
}

/* 容器 */
.main-wrapper {
  background: var(--surface);
  min-height: 60vh;
  font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
}

/* 卡片 */
.custom-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(39, 44, 52, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

/* 渐变卡头 */
.card-header-gradient {
  background: linear-gradient(90deg, rgba(91, 108, 255, 1) 0%, rgba(109, 211, 255, 0.9) 100%);
  color: #fff;
  padding: 20px 18px;
}

.card-header-gradient .card-title {
  font-weight: 700;
  font-size: 1.25rem;
}

.card-header-gradient .card-subtitle {
  opacity: 0.95;
  font-size: 0.85rem;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
}

/* 卡体的内边距更大 */
.card-body {
  padding: 20px;
}

/* 余额盒子 */
.balance-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border-radius: 10px;
  border: 1px solid rgba(16, 24, 40, 0.04);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.03) inset;
}

.balance-left {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(91, 108, 255, 0.12), rgba(109, 211, 255, 0.08));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-icon {
  font-size: 22px;
  color: var(--brand-1);
}

.balance-right .small {
  color: var(--muted);
}

.balance-amount {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0b2b53;
  margin-top: 2px;
}

.currency {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 6px;
}

/* 输入组 */
.custom-input-group {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.06);
  background: #fff;
}

.custom-input {
  border: none;
  padding: 14px;
  font-size: 1.05rem;
  outline: none;
  box-shadow: none;
}

.custom-input:focus {
  outline: none;
  box-shadow: none;
}

.custom-input-text {
  background: #fbfdff;
  padding: 10px 14px;
  border-left: 1px solid rgba(16, 24, 40, 0.03);
  color: var(--muted);
}

/* 支付方式选项 */
.payment-options {
  gap: 12px;
}

.option-box {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(16, 24, 40, 0.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  cursor: pointer;
  min-height: 96px;
  margin-bottom: 6px;
}

.option-box+.option-box {
  margin-left: 8px;
}

.option-box .option-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.option-name {
  font-weight: 600;
  color: #17233b;
}

/* 选中态 */
.option-box.selected-box {
  border-color: rgba(91, 108, 255, 0.55);
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.04), rgba(109, 211, 255, 0.02));
  box-shadow: 0 6px 18px rgba(91, 108, 255, 0.06);
  transform: translateY(-4px);
}

/* 勾选徽章 */
.check-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--brand-1);
  color: #fff;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(91, 108, 255, 0.14);
}

/* 底部按钮 */
.custom-btn {
  background: linear-gradient(90deg, #5b6cff, #2bb7ff);
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.custom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43, 127, 255, 0.14);
}

/* small screens */
@media (max-width: 576px) {
  .option-box {
    flex-basis: 100%;
  }

  .option-box+.option-box {
    margin-left: 0;
  }

  .custom-card {
    margin: 0 12px;
  }

  .card-header-gradient {
    padding: 16px;
  }

  .balance-amount {
    font-size: 1.2rem;
  }
}
</style>
