<template>
  <!-- 这个组件现在作为跳转器使用，实际查看器在 /model-viewer 页面 -->
  <span></span>
</template>

<script setup lang="ts">
import { watch, nextTick } from "vue"
import { useRouter } from "vue-router"

interface Props {
  open: boolean
  modelUrl: string
}

interface Emits {
  (e: "update:open", value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const router = useRouter()

// 监听打开状态，跳转到全屏页面
watch(
  [() => props.open, () => props.modelUrl],
  ([newOpen, newUrl]) => {
    console.log("ModelViewer watch triggered:", { newOpen, newUrl })
    if (newOpen && newUrl) {
      // 延迟一下再跳转，确保状态已更新
      nextTick(() => {
        console.log("正在跳转到模型查看页面:", newUrl)
        // 先关闭
        emit("update:open", false)
        // 再跳转
        router.push({
          path: "/model-viewer",
          query: { url: newUrl }
        })
      })
    }
  },
  { immediate: true }
)
</script>
