<template>
  <!-- 会员权限拦截弹窗 — 无权限页面点击时弹出 -->
  <Teleport to="body">
    <div v-if="modelValue" class="member-access-dialog-overlay" @click="$emit('update:modelValue', false)">
      <div class="member-access-dialog" @click.stop>
        <!-- 提示图标 -->
        <div class="member-access-dialog__icon">
          <svg viewBox="0 0 48 48" fill="none" class="member-access-dialog__lock-svg">
            <rect x="10" y="22" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2.5"/>
            <path d="M16 22V16a8 8 0 1116 0v6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
            <circle cx="24" cy="33" r="3" fill="currentColor"/>
          </svg>
        </div>
        <!-- 提示文字 -->
        <p class="member-access-dialog__text">该功能仅对会员开放，升级会员，享受更强大的AI求职功能</p>
        <!-- 操作按钮 -->
        <div class="member-access-dialog__actions">
          <button class="member-access-dialog__btn member-access-dialog__btn--cancel" @click="$emit('update:modelValue', false)">
            先不升级
          </button>
          <button class="member-access-dialog__btn member-access-dialog__btn--confirm" @click="handleViewDetail">
            了解详情
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
/**
 * 会员权限拦截弹窗
 * 当用户点击无权限（accessible=false）的菜单时弹出
 * "了解详情"按钮打开会员购买组件 MemberDialog
 */

/** 组件 Props */
defineProps<{ modelValue: boolean }>()

/** 组件 Emits */
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'openMember'): void
}>()

/** 点击了解详情 — 关闭当前弹窗，通知父组件打开会员购买弹窗 */
function handleViewDetail() {
  emit('update:modelValue', false)
  emit('openMember')
}
</script>
