<!--
 * @Date: 2025-12-30 13:58:55
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-12-31 14:43:54
 * @FilePath: /mlaj/src/views/recall/ChoosePage.vue
 * @Description: 文件描述
-->
<template>
  <div class="choose-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
    <VideoBackground />

    <!-- 标题区域 -->
    <div class="mt-20 flex flex-col items-center z-10 w-full px-8">
      <img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="title" />
    </div>

    <!-- 容器靠页面底部对齐 -->
    <div class="flex flex-col items-center h-full w-full px-6 pt-16 pb-8 relative mt-auto">
      <div class="text-white text-center space-y-1 tracking-wider text-shadow-md mb-3">
        <p class="text-lg">{{ viewOther.text }}</p>
      </div>
      <!-- Bottom Section -->
      <div class="mt-auto w-full flex flex-col items-center text-center animate-fade-in-up delay-200">
        <van-button block
          class="submit-btn !rounded-lg  !border-[#FFDD01] !text-[#FFF] !font-bold !text-lg !h-[48px] !max-w-xs !mb-4"
          @click="handleViewOther">
          立即查看
        </van-button>
        <van-button block
          class="submit-btn !rounded-lg  !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px] !max-w-xs"
          @click="handleViewTimeLine">
          我的时光机
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import VideoBackground from '@/components/media/VideoBackground.vue'

import { getQrcodeAPI, trackingAPI } from '@/api/recall_users'

// 导入图片
const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title007@2x.png'

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const id = $route.query.id || '';
const entry = $route.query.entry || '';

const viewOther = ref({})

const handleViewTimeLine = async () => {
  // 进入台历H5登录页的埋点
  await trackingAPI({
    event_type: 'login_page',
    entry
  })
  // 跳转到台历H5登录页
  $router.push({
    path:'/recall/login',
    query: { entry }
  })
}

const handleViewOther = async () => {
  // 点击【查看内容】按钮埋点
  await trackingAPI({
    event_type: 'qrcode_redirect',
    qrcode_id: id,
    entry
  })
  if (viewOther.value.url) {
    location.href = viewOther.value.url
  } else {
    console.error('URL is undefined')
  }
}

onMounted(async () => {
  // 进入这个新页面埋点
  await trackingAPI({
    event_type: 'qrcode_page',
    qrcode_id: id,
    entry
  })

  if (id) {
    try {
      const response = await getQrcodeAPI({ id })
      if (response.code) {
        viewOther.value = {
          id: response.data.id,
          text: response.data.title,
          url: response.data.content_url,
        }
      }
    } catch (error) {
      console.error('Error fetching QR code:', error)
    }
  }
})
</script>

<style lang="less" scoped>
.choose-page {
  .submit-btn {
    background: linear-gradient(180deg, rgba(251, 249, 224, 0.3) 0%, rgba(41, 46, 1, 0.3) 100%) !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }
}
</style>