<template>
  <!-- 会员购买弹窗 — 通过 Teleport 挂载到 body -->
  <Teleport to="body">
    <!-- 遮罩层 — 点击关闭弹窗 -->
    <div v-if="modelValue" class="member-dialog-overlay" @click="$emit('update:modelValue', false)">
      <!-- 弹窗主体 — 阻止点击冒泡 -->
      <div class="member-dialog" @click.stop>
        <!-- 右上角关闭按钮 -->
        <span class="member-dialog__close" @click="$emit('update:modelValue', false)">✕</span>

        <!-- 顶部标语 -->
        <div class="member-dialog__slogan">每天不到一元，获得三倍面试机会！</div>

        <!-- 套餐卡片区域 -->
        <div class="member-dialog__plans">
          <div
            v-for="plan in plans"
            :key="plan.key"
            class="member-dialog__plan-card"
            :class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
            @click="selectedPlan = plan.key"
          >
            <!-- 套餐名称 -->
            <div class="member-dialog__plan-name">{{ plan.name }}</div>
            <!-- 原价（划线） -->
            <div class="member-dialog__plan-original">{{ plan.originalPrice }}</div>
            <!-- 现价 -->
            <div class="member-dialog__plan-price">
              <span class="member-dialog__plan-price-num">¥{{ plan.price }}</span>
              <span class="member-dialog__plan-price-unit">/{{ plan.unit }}</span>
              <!-- 省钱标签 -->
              <span v-if="plan.discount" class="member-dialog__plan-discount">省{{ plan.discount }}</span>
            </div>
            <!-- 立刻升级按钮 -->
            <button class="member-dialog__plan-btn" @click.stop="handleUpgrade(plan)">立刻升级</button>
          </div>
        </div>

        <!-- 权益对比区域 -->
        <div class="member-dialog__benefits">
          <!-- 左列：面试率提升工具 -->
          <div class="member-dialog__benefit-col">
            <div class="member-dialog__benefit-title">面试率提升工具</div>
            <div
              v-for="item in toolList"
              :key="item"
              class="member-dialog__benefit-item"
            >{{ item }}</div>
            <div class="member-dialog__benefit-other">
              其他渠道购买 <span class="member-dialog__benefit-highlight">¥210/月</span>
            </div>
          </div>

          <!-- 中列：会员权益 -->
          <div class="member-dialog__benefit-col member-dialog__benefit-col--center">
            <div class="member-dialog__benefit-title member-dialog__benefit-title--accent">会员权益</div>
            <div
              v-for="item in memberBenefits"
              :key="item.label"
              class="member-dialog__benefit-item"
            >
              <span class="member-dialog__benefit-badge">{{ item.badge }}</span>
              <span>{{ item.label }}</span>
            </div>
            <div class="member-dialog__benefit-other">
              打包价 <span class="member-dialog__benefit-highlight">¥19.99/月</span>
            </div>
          </div>

          <!-- 右列：免费权益（当前） -->
          <div class="member-dialog__benefit-col">
            <div class="member-dialog__benefit-title">免费权益（当前）</div>
            <div
              v-for="item in freeBenefits"
              :key="item"
              class="member-dialog__benefit-item"
            >{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

/** 组件 Props — 控制弹窗显示/隐藏 */
const props = defineProps<{ modelValue: boolean }>()

/** 组件 Emits — 通知父组件更新 modelValue */
defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()

// ==================== 类型定义 ====================

/** 套餐项类型 */
interface PlanItem {
  key: string
  name: string
  originalPrice: string
  price: string
  unit: string
  discount: string
}

// ==================== 状态 ====================

/** 当前选中的套餐 */
const selectedPlan = ref('monthly')

/** 监听弹窗开关 — 打开时锁定背景滚动，关闭时恢复 */
watch(() => props.modelValue, (val) => {
  document.body.style.overflow = val ? 'hidden' : ''
})

// ==================== 常量数据 ====================

/** 套餐列表 */
const plans: PlanItem[] = [
  { key: 'quarterly', name: '季度会员', originalPrice: '¥149.97 / 3个月', price: '49.99', unit: '3个月', discount: '67%' },
  { key: 'monthly', name: '月度会员', originalPrice: '¥49.99 / 1个月', price: '19.99', unit: '月', discount: '60%' },
  { key: 'weekly', name: '周会员', originalPrice: '¥71.96 / 1个月', price: '17.99', unit: '1周', discount: '' },
]

/** 面试率提升工具列表 */
const toolList = [
  'AI 求职助手',
  'AI 针对性简历优化',
  '1V1真人导师',
  '一键自动填写网申信息',
  '内推码',
  '实时岗位更新提醒',
]

/** 会员权益列表 */
const memberBenefits = [
  { badge: '无限', label: '自动化网申流程' },
  { badge: '无限', label: '简历过筛率提升' },
  { badge: '✓', label: '找工作不孤单' },
  { badge: '无限', label: '每一次网申节约15Min' },
  { badge: '无限', label: '自动填写最新内推码' },
  { badge: '无限', label: '第一时间投递高质量岗位' },
]

/** 免费权益列表 */
const freeBenefits = [
  '受限',
  '2次/天',
  '不支持',
  '4次/天',
  '4次/天',
  '1次/天',
]

// ==================== 事件处理 ====================

/** 点击立刻升级按钮 */
function handleUpgrade(plan: PlanItem) {
  // TODO: 接入支付接口
  ElMessage.success(`正在跳转 ${plan.name} 支付页面...`)
}
</script>
