<template>
  <div class="knowledge-base-module">
    <el-header class="header">
      <h2>双碳政策知识库</h2>
    </el-header>
    <el-main>
      <el-input
          v-model="searchQuery"
          placeholder="请输入文章关键词"
          style="margin-bottom: 20px;"
          @input="performSearch"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="performSearch"></el-button>
        </template>
      </el-input>
      <el-select v-model="selectedKeyword" placeholder="选择关键词" style="margin-bottom: 20px;" @change="performSearch">
        <el-option label="全部" value="" />
        <el-option v-for="keyword in uniqueKeywords" :key="keyword" :label="keyword" :value="keyword" />
      </el-select>
      <el-select v-model="sortField" placeholder="排序方式" style="margin-bottom: 20px;">
        <el-option label="按标题排序" value="title" />
        <el-option label="按内容摘要排序" value="summary" />
        <el-option label="按政策来源排序" value="source" />
        <el-option label="按日期排序" value="date" />
      </el-select>
      <el-table :data="paginatedResults" style="width: 100%">
        <el-table-column prop="title" label="文件标题" />
        <el-table-column prop="summary" label="内容摘要" />
        <el-table-column prop="content" label="详细内容" />
        <el-table-column prop="source" label="政策来源" />
        <el-table-column prop="date" label="发布日期" />
        <el-table-column label="关键词">
          <template #default="scope">
            <el-tag v-for="keyword in scope.row.keywords" :key="keyword" type="success" style="margin-right: 5px;">
              {{ keyword }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 20px;"
      />
    </el-main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElHeader, ElMain, ElInput, ElButton, ElSelect, ElOption, ElTable, ElTableColumn, ElPagination, ElTag } from 'element-plus'
import { knowledgeBase } from './data.js'

const searchQuery = ref('')
const selectedKeyword = ref('')
const sortField = ref('title')
const results = ref(knowledgeBase)
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(knowledgeBase.length)

const uniqueKeywords = computed(() => {
  const allKeywords = knowledgeBase.flatMap(item => item.keywords)
  return [...new Set(allKeywords)]
})

const performSearch = () => {
  const queryWords = searchQuery.value.split(/\s+/).filter(word => word.trim() !== '')
  results.value = knowledgeBase.filter(item => {
    return queryWords.every(word => {
      return (
          item.title.toLowerCase().includes(word.toLowerCase()) ||
          item.summary.toLowerCase().includes(word.toLowerCase()) ||
          item.content.toLowerCase().includes(word.toLowerCase()) ||
          item.source.toLowerCase().includes(word.toLowerCase()) ||
          item.date.toLowerCase().includes(word.toLowerCase()) ||
          item.keywords.some(keyword => keyword.toLowerCase().includes(word.toLowerCase()))
      )
    }) && (!selectedKeyword.value || item.keywords.includes(selectedKeyword.value))
  })
  total.value = results.value.length
  currentPage.value = 1
}

const sortedResults = computed(() => {
  return results.value.sort((a, b) => {
    if (a[sortField.value] < b[sortField.value]) return -1
    if (a[sortField.value] > b[sortField.value]) return 1
    return 0
  })
})

const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return sortedResults.value.slice(start, end)
})

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize
  currentPage.value = 1
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

onMounted(() => {
  performSearch()
})
</script>

<style scoped>
.knowledge-base-module {
  display: flex;
  flex-direction: column;
  height: 90vh;
}

.header {
  background-color: #409eff;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 20px;
}
</style>
