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

  // 定义 Props，控制显示状态
  const { modelValue = false } = defineProps<{
    modelValue?: boolean // 用于 v-model 控制显隐
  }>()

  // 联系方式配置
  const wechatQrImageUrl = 'https://image-admin.laosankeji.com/assets/wx-qr/m1352251.jpg'
  const phoneNumber = '+8613522515407'
  const qqUin = '2039814060'

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

  // 关闭弹窗逻辑
  const closeModal = () => {
    emit('update:modelValue', false)
    emit('close')
  }

  // 复制功能逻辑
  const copySuccess = ref(false)
  const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text)
      copySuccess.value = true
      setTimeout(() => {
        copySuccess.value = false
      }, 2000)
    } catch (err) {
      console.error('复制失败:', err)
    }
  }

  // 唤起腾讯 QQ（失败则复制 QQ 号）
  const qqOpenFailed = ref(false)
  const openTencentQq = async () => {
    // 1. 尝试唤起客户端
    const schemeUrl = `tencent://message/?uin=${qqUin}&Site=&Menu=yes`
    const opened = window.open(schemeUrl, '_blank')

    // 2. 浏览器阻止或不支持 scheme 时，降级为复制 QQ 号
    if (!opened) {
      qqOpenFailed.value = true
      await copyToClipboard(qqUin)
      setTimeout(() => {
        qqOpenFailed.value = false
      }, 2000)
    }
  }
</script>

<template>
  <!-- Teleport 确保弹窗挂载到 body，避免被父级 overflow:hidden 截断 -->
  <Teleport to="body">
    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition duration-150 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <!-- 遮罩层 & 容器 -->
      <div
        v-if="modelValue"
        class="fixed inset-0 z-[100] overflow-y-auto"
        role="dialog"
        aria-modal="true"
      >
        <!-- 背景遮罩 -->
        <div
          class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"
          @click="closeModal"
        ></div>

        <div class="flex min-h-full items-center justify-center p-4 text-center">
          <Transition
            enter-active-class="transition duration-300 ease-out transform"
            enter-from-class="opacity-0 scale-95 translate-y-4"
            enter-to-class="opacity-100 scale-100 translate-y-0"
            leave-active-class="transition duration-200 ease-in transform"
            leave-from-class="opacity-100 scale-100 translate-y-0"
            leave-to-class="opacity-0 scale-95 translate-y-4"
          >
            <!-- 弹窗主体 -->
            <!-- 修复：添加 v-if="modelValue" 解决 ESLint 报错，并确保动画触发 -->
            <div
              v-if="modelValue"
              class="relative w-full max-w-3xl transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all border border-indigo-50"
            >
              <!-- 关闭按钮 -->
              <button
                @click="closeModal"
                class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 transition-colors z-20"
              >
                <!-- 这里的 icon 可以换成你项目中使用的组件，如 <IconClose /> -->
                <i class="fa-solid fa-times text-xl">X</i>
              </button>

              <div class="grid grid-cols-1 md:grid-cols-2">
                <!-- 左侧：微信引导 -->
                <div
                  class="bg-indigo-600 p-8 text-white flex flex-col justify-center items-center text-center relative overflow-hidden"
                >
                  <div
                    class="absolute top-0 left-0 w-full h-full bg-indigo-700 opacity-10 rotate-12 scale-150 transform pointer-events-none"
                  ></div>

                  <h3 class="text-xl font-bold mb-2 relative z-10">添加客户经理</h3>
                  <p class="text-indigo-100 text-sm mb-6 relative z-10"
                    >1对1 解答疑问 · 获取专属优惠</p
                  >

                  <div
                    class="bg-white p-2 rounded-lg shadow-lg mb-4 relative z-10 transform hover:scale-105 transition-transform duration-300"
                  >
                    <img
                      :src="wechatQrImageUrl"
                      alt="微信二维码"
                      class="w-32 h-32 object-cover rounded-md"
                      referrerpolicy="no-referrer"
                      loading="lazy"
                    />
                  </div>

                  <div class="text-xs text-indigo-200 relative z-10 flex items-center">
                    <span class="mr-1">🏷️</span> 微信扫一扫，极速响应
                  </div>
                </div>

                <!-- 右侧：其他方式 -->
                <div class="p-8 bg-white flex flex-col justify-center">
                  <h3 class="text-lg font-bold text-slate-800 mb-6">其他联系方式</h3>

                  <!-- 电话 -->
                  <div class="mb-6 group cursor-pointer" @click="copyToClipboard(phoneNumber)">
                    <div class="flex items-center mb-1">
                      <div
                        class="w-8 h-8 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center mr-3 group-hover:bg-indigo-600 group-hover:text-white transition-colors"
                      >
                        📞
                      </div>
                      <span class="text-sm font-bold text-slate-700">电话咨询</span>
                    </div>
                    <div class="pl-11">
                      <div
                        class="text-xl font-mono text-slate-900 font-semibold group-hover:text-indigo-600"
                        >{{ phoneNumber }}</div
                      >
                      <p class="text-xs text-slate-400 mt-1">工作日 9:00 - 18:00</p>
                    </div>
                  </div>

                  <!-- QQ -->
                  <div class="mb-6 group cursor-pointer" @click="openTencentQq">
                    <div class="flex items-center mb-1">
                      <div
                        class="w-8 h-8 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center mr-3 group-hover:bg-blue-500 group-hover:text-white transition-colors"
                      >
                        🐧
                      </div>
                      <span class="text-sm font-bold text-slate-700">在线客服 (QQ)</span>
                    </div>
                    <div class="pl-11 flex items-center">
                      <span class="text-slate-600 mr-2 font-mono">{{ qqUin }}</span>
                      <span
                        class="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded hover:bg-blue-100 hover:text-blue-600 transition-colors"
                      >
                        {{ qqOpenFailed ? '未检测到 QQ，已复制' : '点击打开 QQ' }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>
