<template>
  <div class="module-entrance-container">
    <div class="header">
      <h1 class="title">欢迎来到系统入口</h1>
    </div>

    <div class="modules-grid">
      <div
        v-for="module in modules"
        :key="module.id"
        class="module-card"
        @click="navigateToModule(module)"
      >
        <div class="module-icon">
          <div class="icon-placeholder">{{ module.icon }}</div>
        </div>
        <h3 class="module-name">{{ module.name }}</h3>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="moduleEntrance">
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 确保loading结束
onMounted(() => {
  // 手动结束可能的loading状态
  if (window.nextLoading) {
    window.nextLoading = false
    const el = document.querySelector('.loading-next')
    if (el?.parentNode) {
      el.parentNode.removeChild(el)
    }
  }
})

// 模块配置
const modules = reactive([
  {
    id: 1,
    name: '生物自动化生产',
    icon: '⚙️',
    path: '/bio-automation',
  },
  {
    id: 2,
    name: '生物多维检测',
    icon: '📊',
    path: '/bio-detection',
  },
  {
    id: 3,
    name: '异常知识库',
    icon: '📚',
    path: '/knowledge-base',
  },
  {
    id: 4,
    name: '系统设置',
    icon: '🔧',
    path: '/system-settings',
  }
])

// 导航到模块
const navigateToModule = (module: any) => {
  console.log('Navigating to:', module.path)
  router.push(module.path)
}
</script>

<style scoped lang="scss">
.module-entrance-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center;
  margin-bottom: 60px;

  .title {
    color: #2c3e50;
    font-size: 32px;
    font-weight: 300;
    margin: 0;
  }
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 800px;
  width: 100%;
}

.module-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
}

.module-icon {
  margin-bottom: 25px;

  .icon-placeholder {
    font-size: 60px;
    color: #667eea;
  }
}

.module-name {
  color: #2c3e50;
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .module-card {
    padding: 40px 20px;
  }

  .module-name {
    font-size: 18px;
  }

  .header .title {
    font-size: 24px;
  }
}
</style>
