<template>
  <div class="knowledge-base-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"><Search /></el-icon>
              <p>快速搜索异常处理知识</p>
              <el-button type="primary" @click="navigateToFeature('knowledge-search')">
                知识搜索
              </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"><Collection /></el-icon>
              <p>维护和管理知识库内容</p>
              <el-button type="primary" @click="navigateToFeature('knowledge-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"><TrendCharts /></el-icon>
              <p>异常案例统计和分析</p>
              <el-button type="primary" @click="navigateToFeature('case-analysis')">
                案例分析
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="knowledgeBase">
import { ElMessage } from 'element-plus'
import { Search, Collection, TrendCharts } from '@element-plus/icons-vue'

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

<style scoped lang="scss">
.knowledge-base-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: #E6A23C;
        margin-bottom: 15px;
      }

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

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