<template>
  <div class="knowledge-base">
    <div class="knowledge-header">
      <el-input 
        v-model="searchKeyword" 
        placeholder="搜索知识库..."
        prefix-icon="Search"
        clearable
      />
    </div>

    <div class="knowledge-list">
      <div 
        class="knowledge-item" 
        v-for="item in filteredKnowledge" 
        :key="item.id"
        @click="viewKnowledge(item)"
      >
        <div class="item-icon">{{ item.icon }}</div>
        <div class="item-info">
          <h4>{{ item.title }}</h4>
          <p>{{ item.description }}</p>
          <div class="item-meta">
            <span class="item-category">{{ item.category }}</span>
            <span class="item-date">{{ item.updateDate }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ElInput } from 'element-plus';

const searchKeyword = ref('');
const knowledgeList = ref<any[]>([]);

const filteredKnowledge = computed(() => {
  if (!searchKeyword.value) return knowledgeList.value;
  return knowledgeList.value.filter(item => 
    item.title.includes(searchKeyword.value) || 
    item.description.includes(searchKeyword.value)
  );
});

onMounted(() => {
  // TODO: 加载知识库数据
  knowledgeList.value = [
    {
      id: 1,
      icon: '📚',
      title: '党的二十大精神',
      description: '深入学习党的二十大精神要点',
      category: '党史学习',
      updateDate: '2024-01-15'
    },
    {
      id: 2,
      icon: '🎯',
      title: '社会主义核心价值观',
      description: '践行社会主义核心价值观',
      category: '理论学习',
      updateDate: '2024-01-10'
    }
  ];
});

function viewKnowledge(item: any) {
  // TODO: 查看知识详情
}
</script>

<style lang="scss" scoped>
.knowledge-base {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.knowledge-header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.knowledge-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #ffe6e6;
    transform: translateX(4px);
  }
}

.item-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  
  h4 {
    font-size: 15px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 6px;
  }
  
  p {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
  }
}

.item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.item-category {
  color: #C62828;
}

.item-date {
  color: #999;
}
</style>

