<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

interface PaymentOption {
  label: string
  value: number
}

const list = ref<PaymentOption[]>([
  { label: '支付宝', value: 1 },
  { label: '微信', value: 2 },
  { label: '国际银行卡', value: 3 },
])

// 当前选中的值，默认选中第一个
const selectedValue = ref(1)

const handleSelect = (value: number) => {
  selectedValue.value = value
}
</script>

<template>
  <div>
    <div class="bg-[#A8FF53] px-6 pt-7 font-sans text-black">
      <h2 class="mb-1 text-center text-2xl font-bold">选择付款方式</h2>

      <div class="flex flex-col gap-4 pt-[43px]">
        <div
          v-for="item in list"
          :key="item.value"
          @click="handleSelect(item.value)"
          :class="[
            'flex h-[66px] cursor-pointer items-center justify-between border-[5px] border-black px-6 transition-all active:scale-[0.98]',
            'rounded-[32px]', // 超大圆角
            selectedValue === item.value ? 'bg-[#A8FF53]' : 'bg-[#A8FF53]',
          ]"
        >
          <span class="text-xl font-semibold">{{ item.label }}</span>

          <div
            class="flex h-7 w-7 items-center justify-center rounded-full border-[1px] border-black bg-transparent"
          >
            <div
              v-if="selectedValue === item.value"
              class="h-3.5 w-3.5 rounded-full bg-black"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="px-6 pt-[55px]">
      <h2 class="mb-1 text-center text-2xl font-bold">订单信息</h2>
      <div class="ml-[11px] pt-[22px] text-[16px] font-semibold">365天套餐</div>
      <div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
        <div>订单金额</div>
        <div>USD 44.99</div>
      </div>
    </div>
    <div class="px-6 pt-[85px] pb-[23px]">
      <Button
        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white hover:bg-black/90"
      >
        立即支付
      </Button>
    </div>
  </div>
</template>

<style scoped>
/* 如果需要特殊的斜体感，可以在这里微调 */
span {
  letter-spacing: -0.02em;
}
</style>
