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

    <div style="background: rgba(0, 20, 40, 0.9); padding: 30px; border-radius: 8px; margin: 30px auto; max-width: 600px; border: 1px solid #00d4ff;">
      <h2 style="color: #7ec8e3; margin-bottom: 20px;">测试检查清单</h2>
      <ul style="color: #ffffff; text-align: left; line-height: 2; list-style: none; padding: 0;">
        <li style="margin: 10px 0;">✅ Vue 组件正常加载</li>
        <li style="margin: 10px 0;">✅ 样式正常显示</li>
        <li style="margin: 10px 0;">✅ 路由正确配置</li>
        <li style="margin: 10px 0;">✅ 页面无权限限制</li>
      </ul>
    </div>

    <div style="margin-top: 40px;">
      <a-button type="primary" size="large" @click="showMessage" style="margin-right: 10px;">
        点击测试
      </a-button>
      <a-button size="large" @click="goToMain">
        返回首页
      </a-button>
    </div>

    <div v-if="message" style="margin-top: 30px; padding: 15px; border-radius: 4px; background: #52c41a; color: white; display: inline-block;">
      {{ message }}
    </div>
  </div>
</template>

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

  const message = ref('');
  const router = useRouter();

  const showMessage = () => {
    message.value = '✅ 页面交互正常！现在可以测试完整的车间可视化页面了。';
    setTimeout(() => {
      message.value = '';
    }, 3000);
  };

  const goToMain = () => {
    router.push('/');
  };
</script>