<template>
  <div class="bio-automation-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"><Monitor /></el-icon>
              <p>实时监控生产流程和设备状态</p>
              <el-button type="primary" @click="navigateToFeature('production-monitor')">
                进入监控
              </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"><Setting /></el-icon>
              <p>管理和配置自动化设备</p>
              <el-button type="primary" @click="navigateToFeature('equipment-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"><Calendar /></el-icon>
              <p>制定和管理生产计划</p>
              <el-button type="primary" @click="navigateToFeature('production-plan')">
                计划管理
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="bioAutomation">
import { ElMessage } from 'element-plus'
import { Monitor, Setting, Calendar } from '@element-plus/icons-vue'

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

<style scoped lang="scss">
.bio-automation-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: #409EFF;
        margin-bottom: 15px;
      }

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

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