<template>
  <div class="md:flex md:h-full md:flex-col md:justify-between">
    <div class="bg-[#A8FF53] px-6 font-sans text-black md:flex-1">
      <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">
        {{ selectedPlan?.days }}天套餐
      </div>
      <div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
        <div>订单金额</div>
        <div>USD {{ selectedPlan?.price }}</div>
      </div>
    </div>
    <div class="px-6 pt-[85px] pb-[23px]">
      <Button
        :disabled="isPaying"
        @click="$emit('pay', selectedValue)"
        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white transition-all hover:bg-black/90 active:scale-[0.98] disabled:opacity-50"
      >
        <Loader2 v-if="isPaying" class="mr-2 h-4 w-4 animate-spin" />
        {{ isPaying ? '正在支付...' : '立即支付' }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-vue-next'

interface PaymentOption {
  label: string
  value: number | string
}

const props = defineProps<{
  methods: any[]
  selectedPlan: any
  isPaying?: boolean
}>()

const list = computed(() =>
  props.methods.map((item) => ({
    label: item.name,
    value: item.id,
  })),
)

// 当前选中的值，默认选中第一个
const selectedValue = ref<number | string>(props.methods[0]?.id || 1)

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

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