<script lang='ts' setup>
import type { Wallet } from "@/store/wallet";
import { toastController } from "@ionic/vue";
import { checkmarkCircleOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";

const props = defineProps<{
  productId: number;
  wallets: Array<Wallet>;
}>();

const emit = defineEmits<{
  close: [];
  success: [];
}>();

const { data: product } = safeClient(() => client.api.subscription.products({ productId: props.productId }).get());

const paymentPassword = ref("");
const selectedWallet = ref<string | null>(null);

// 当前选中的钱包信息
const currentWallet = computed(() => {
  if (!selectedWallet.value) {
    return props.wallets[0];
  }
  return props.wallets.find(w => w.walletTypeId === selectedWallet.value);
});

watchEffect(() => {
  if (props.wallets.length > 0 && !selectedWallet.value) {
    selectedWallet.value = props.wallets[0].walletTypeId;
  }
});

function handleClose() {
  emit("close");
}

async function confirmSubscribe() {
  if (!product.value) {
    return;
  }

  if (!paymentPassword.value) {
    toastController.create({
      message: "请输入交易密码",
      duration: 2000,
      position: "top",
    }).then(toast => toast.present());
    return;
  }

  if (!currentWallet.value || Number(currentWallet.value?.available) < Number(product.value.price)) {
    toastController.create({
      message: "所选钱包余额不足，请选择其他钱包或充值",
      duration: 2000,
      position: "top",
    }).then(toast => toast.present());
    return;
  }

  await safeClient(client.api.subscription.orders.post({
    productId: product.value.id,
    walletTypeId: selectedWallet.value,
    tradePassword: paymentPassword.value,
  }));
  const toast = await toastController.create({
    message: "产品申购成功！",
    duration: 2000,
    position: "bottom",
    color: "success",
  });
  await toast.present();
  setTimeout(() => {
    toast.dismiss();
    emit("success");
  }, 2000);
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-title>产品申购</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding" :fullscreen="true">
      <div v-if="product" class="subscribe-content">
        <!-- 产品信息 -->
        <div class="product-info-section">
          <div class="section-title">
            产品信息
          </div>
          <div class="product-info-card">
            <div class="info-row">
              <span class="label">产品名称</span>
              <span class="value">{{ product.name }}</span>
            </div>
            <div class="info-row">
              <span class="label">申购价格</span>
              <span class="value price">¥{{ Number(product.price) }}</span>
            </div>
          </div>
        </div>

        <!-- 选择付款钱包 -->
        <div class="wallet-section">
          <div class="section-title">
            选择付款钱包
          </div>
          <div class="wallet-list">
            <div
              v-for="wallet in wallets"
              :key="wallet.id"
              class="wallet-item"
              :class="{ active: selectedWallet === wallet.walletTypeId }"
              @click="selectedWallet = wallet.walletTypeId"
            >
              <div class="wallet-info">
                <div class="wallet-name">
                  {{ wallet.walletType.name }}
                </div>
                <div class="wallet-balance">
                  可用余额：¥{{ Number(wallet.available || 0).toFixed(2) }}
                </div>
              </div>
              <div v-if="selectedWallet === wallet.walletTypeId" class="wallet-check">
                <ion-icon :icon="checkmarkCircleOutline" />
              </div>
            </div>
          </div>
        </div>

        <!-- 交易密码 -->
        <div class="password-section">
          <div class="section-title">
            交易密码
          </div>
          <div class="password-input-wrapper">
            <ion-input
              v-model="paymentPassword"
              type="password"
              placeholder="请输入交易密码"
              class="password-input"
              inputmode="numeric"
              :maxlength="20"
            />
          </div>
          <div class="password-hint">
            交易密码用于验证申购操作，请妥善保管
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <ion-button expand="block" fill="outline" @click="handleClose">
            取消
          </ion-button>
          <ion-button expand="block" class="confirm-btn" @click="confirmSubscribe">
            确认支付
          </ion-button>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.subscribe-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.product-info-section {
  margin-bottom: 8px;
}

.product-info-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-row .label {
  font-size: 14px;
  color: #999;
}

.info-row .value {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.info-row .value.price {
  color: #c41e3a;
  font-size: 18px;
}

.info-row .value.profit {
  color: #52c41a;
  font-size: 16px;
}

.wallet-section {
  margin-bottom: 8px;
}

.wallet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wallet-item.active {
  background: #fff7f0;
  border-color: #c41e3a;
}

.wallet-item:active {
  transform: scale(0.98);
}

.wallet-info {
  flex: 1;
}

.wallet-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.wallet-balance {
  font-size: 13px;
  color: #666;
}

.wallet-check {
  color: #c41e3a;
  font-size: 24px;
}

.password-section {
  margin-bottom: 8px;
}

.password-input-wrapper {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

.password-input {
  --padding-start: 8px;
  --padding-end: 8px;
  font-size: 16px;
}

.password-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.action-buttons ion-button {
  flex: 1;
  --border-radius: 12px;
  height: 48px;
  font-weight: 600;
  text-transform: none;
}

.action-buttons ion-button[fill="outline"] {
  --border-color: #e8e8e8;
  --color: #666;
}

.confirm-btn {
  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #6d1523 100%);
}
</style>
