<template>
  <div style="padding: 20px; text-align: center;">
    <h1 style="color: #00d4ff;">车间可视化测试页面</h1>
    <p style="color: #ffffff; margin: 20px 0;">如果你能看到这个页面，说明路由配置是正确的！</p>

    <div style="background: rgba(0, 20, 40, 0.9); padding: 20px; border-radius: 8px; margin: 20px auto; max-width: 400px;">
      <h2 style="color: #7ec8e3;">测试检查清单</h2>
      <ul style="color: #ffffff; text-align: left; line-height: 2;">
        <li>✅ Vue 组件正常加载</li>
        <li>✅ 样式正常显示</li>
        <li>✅ 路由正确配置</li>
      </ul>
    </div>

    <div style="margin-top: 20px;">
      <button @click="testThreeJS" style="padding: 10px 20px; background: #00d4ff; color: white; border: none; border-radius: 4px; cursor: pointer;">
        测试 Three.js
      </button>
    </div>

    <div v-if="threeTestResult" :style="{ marginTop: '20px', padding: '10px', borderRadius: '4px', backgroundColor: threeTestResult.success ? '#52c41a' : '#f5222d' }">
      <p style="color: white; margin: 0;">{{ threeTestResult.message }}</p>
    </div>
  </div>
</template>

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

  const threeTestResult = ref<{ success: boolean; message: string } | null>(null);

  const testThreeJS = () => {
    try {
      // 动态导入 Three.js 来测试
      import('three').then((three) => {
        threeTestResult.value = {
          success: true,
          message: '✅ Three.js 加载成功！版本: ' + three.VERSION
        };
        console.log('Three.js loaded successfully, version:', three.VERSION);
      }).catch((error) => {
        threeTestResult.value = {
          success: false,
          message: '❌ Three.js 加载失败: ' + error.message
        };
        console.error('Three.js loading failed:', error);
      });
    } catch (error) {
      threeTestResult.value = {
        success: false,
        message: '❌ 测试失败: ' + (error as Error).message
      };
      console.error('Test failed:', error);
    }
  };
</script>
