<template>
  <div class="bio-detection-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统入口</el-breadcrumb-item>
        <el-breadcrumb-item>生物多维检测</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 页面标题 -->
    <div class="page-title">
      <h1>生物多维检测</h1>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-area">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>检测分析</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><DataAnalysis /></el-icon>
              <p>多维度生物数据检测与分析</p>
              <el-button type="primary" @click="navigateToFeature('detection-analysis')">
                开始检测
              </el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>报告管理</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><Document /></el-icon>
              <p>检测报告生成和管理</p>
              <el-button type="primary" @click="navigateToFeature('report-management')">
                报告管理
              </el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>质量控制</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><CircleCheck /></el-icon>
              <p>检测质量控制和标准管理</p>
              <el-button type="primary" @click="navigateToFeature('quality-control')">
                质量控制
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="bioDetection">
import { ElMessage } from 'element-plus'
import { DataAnalysis, Document, CircleCheck } from '@element-plus/icons-vue'

const navigateToFeature = (feature: string) => {
  ElMessage.info(`导航到${feature}功能（待开发）`)
  // router.push(`/bio-detection/${feature}`)
}
</script>

<style scoped lang="scss">
.bio-detection-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.breadcrumb-section {
  padding: 15px 20px 10px;
  background: white;
}

.page-title {
  padding: 0 20px 20px;
  background: white;
  border-bottom: 1px solid #e0e0e0;

  h1 {
    margin: 0;
    color: #303133;
    font-size: 28px;
    font-weight: 500;
  }
}

.content-area {
  padding: 30px 20px;

  .feature-card {
    height: 250px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }

    .card-content {
      text-align: center;
      padding: 20px 0;

      .feature-icon {
        font-size: 48px;
        color: #67C23A;
        margin-bottom: 15px;
      }

      p {
        color: #606266;
        margin-bottom: 20px;
        line-height: 1.6;
      }
    }
  }
}

@media (max-width: 768px) {
  .content-area {
    padding: 20px 15px;
  }
}
</style>
