<template>
  <view class="membership">
    <view class="current-plan" v-if="subscription">
      <text class="plan-label">当前套餐</text>
      <text class="plan-name">{{ subscription.plan === 'MONTHLY' ? '月卡会员' : '年卡会员' }}</text>
      <text class="plan-expire">到期时间：{{ subscription.endDate?.slice(0, 10) }}</text>
    </view>
    <view class="plans">
      <view class="plan-card" v-for="plan in plans" :key="plan.type" @tap="createOrder(plan)">
        <text class="plan-name">{{ plan.name }}</text>
        <text class="plan-price">¥{{ plan.price }}</text>
        <text class="plan-desc">{{ plan.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'

const subscription = ref<any>(null)
const plans = ref([
  { type: 'MONTHLY', name: '月卡会员', price: 29.9, desc: '30天无限使用AI沙箱' },
  { type: 'YEARLY', name: '年卡会员', price: 299, desc: '365天无限使用，送2个月' },
])

onMounted(async () => {
  try {
    subscription.value = await api.subscriptions.current()
  } catch (e) { /* ignore */ }
})

async function createOrder(plan: any) {
  try {
    const order: any = await api.orders.create({ planType: plan.type, amount: plan.price })
    uni.showToast({ title: '订单创建成功', icon: 'success' })
  } catch (e: any) {
    uni.showToast({ title: e.message || '创建失败', icon: 'none' })
  }
}
</script>

<style scoped>
.membership { padding: 30rpx; }
.current-plan {
  background: linear-gradient(135deg, #f5a623, #f7c948);
  border-radius: 20rpx; padding: 40rpx; text-align: center; margin-bottom: 40rpx;
}
.plan-label { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
.plan-name { font-size: 40rpx; font-weight: bold; color: var(--card); margin: 16rpx 0; display: block; }
.plan-expire { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
.plans { display: flex; gap: 24rpx; }
.plan-card {
  flex: 1; background: var(--card); border-radius: 16rpx; padding: 40rpx 30rpx; text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.plan-name { font-size: 30rpx; font-weight: 500; display: block; }
.plan-price { font-size: 44rpx; font-weight: bold; color: #ff6b6b; margin: 20rpx 0; display: block; }
.plan-desc { font-size: 24rpx; color: var(--muted-foreground); }
</style>
