<template>
  <!-- 导师小程序二维码弹窗 -->
  <teleport to="body">
    <div v-if="visible" class="mentor-qr-overlay" @click.self="close">
      <div class="mentor-qr-card">
        <!-- 头部：标题 + 关闭按钮 -->
        <div class="mentor-qr-card__header">
          <div class="mentor-qr-card__title-wrap">
            <div class="mentor-qr-card__title">扫码进入小程序预约导师咨询</div>
            <div class="mentor-qr-card__desc">查看导师价格、过往评价，并完成预约</div>
          </div>
          <!-- 关闭按钮 -->
          <div class="mentor-qr-card__close" @click="close">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>

        <!-- 二维码展示区域 -->
        <div class="mentor-qr-card__qr-area">
          <div v-if="qrLoading" class="mentor-qr-card__loading">
            <div class="mentor-qr-card__spinner"></div>
          </div>
          <img
            v-else-if="qrImgSrc"
            :src="qrImgSrc"
            alt="小程序二维码"
            class="mentor-qr-card__qr-img"
          />
          <div v-else class="mentor-qr-card__placeholder">二维码加载失败</div>
        </div>

        <!-- 底部提示 -->
        <div class="mentor-qr-card__footer">
          <div class="mentor-qr-card__footer-text">小程序名称：见识星球 | 大学生求职神器</div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { fetchMentorQrCode } from '@/api/mentor'
// 模式一使用的固定二维码图片
import fixedQrCodeImg from '@/assets/images/mentor/jsxqQrCode-mentors-page.png'

// ==================== Props ====================

const props = withDefaults(defineProps<{
  /** 是否显示弹窗 */
  visible: boolean
  /** 导师ID（模式为api时必传） */
  mentorId?: string
  /** 二维码来源模式：fixed=本地固定图 / api=接口获取 */
  source?: 'fixed' | 'api'
}>(), {
  visible: false,
  mentorId: '',
  source: 'api',
})

// ==================== Emits ====================

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

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

/** 二维码图片地址 */
const qrImgSrc = ref('')

/** 加载状态 */
const qrLoading = ref(false)

// ==================== 方法 ====================

/** 关闭弹窗 */
function close() {
  emit('update:visible', false)
}

/**
 * 加载二维码
 * fixed 模式直接用本地图片，api 模式调接口
 */
async function loadQrCode() {
  if (props.source === 'fixed') {
    qrLoading.value = false
    qrImgSrc.value = fixedQrCodeImg
    return
  }

  // api 模式：请求后端生成导师专属二维码
  qrLoading.value = true
  qrImgSrc.value = ''
  try {
    const res: any = await fetchMentorQrCode(props.mentorId)
    // 返回结构：{ code: "0", data: { code: "data:image/png;base64,..." } }
    const base64 = res?.data?.code ?? res?.code ?? ''
    if (typeof base64 === 'string' && base64.length > 0) {
      qrImgSrc.value = base64.startsWith('data:image')
        ? base64
        : `data:image/png;base64,${base64}`
    }
  } catch (e) {
    console.error('[二维码] 获取失败', e)
  } finally {
    qrLoading.value = false
  }
}

// ==================== 监听弹窗打开时加载 ====================

watch(() => props.visible, (val) => {
  if (val) {
    loadQrCode()
  }
})
</script>
