<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2025-03-14 11:46:47
 * @LastEditors: gcz
 * @LastEditTime: 2025-03-14 14:08:58
 * @FilePath: \knowledge_userui\src\views\knowledgeList.vue
 * @Copyright: Copyright (c) 2016~2025 by gcz, All Rights Reserved. 
-->

<template>
  <div class="knowledge-list">
    <div class="search-bar">
      <el-input
        v-model="searchForm.name"
        placeholder="请输入知识库名称"
        class="search-input"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>

    <div class="list-content">
      <el-card v-for="item in knowledgeList" 
               :key="item.id" 
               class="list-item"
               @click="handleItemClick(item)">
        <div class="item-title">{{ item.name }}</div>
        <div class="item-desc">{{ item.knowSnapshot }}</div>
      </el-card>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="page.total"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { post,get } from '../utils/request'

const router = useRouter()

const knowledgeList = ref([])

const searchForm = reactive({
  name: ''
})

const page = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 获取知识库列表
const getKnowledgeList = async () => {
  try {
    const params = {
      name: searchForm.name,
      pageNum: page.current,
      pageSize: page.size
    }
    const res = await get('/admin/knowInfo/getList', params)
    console.log('res', res);
    if (res.code === 0) {
      knowledgeList.value = res.data.rows
      page.total = Number(res.data.total)
    } else {
      ElMessage.error(res.msg || '获取列表失败')
    }
  } catch (error) {
    console.log('error', error);
    console.error('获取知识库列表失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  page.current = 1
  getKnowledgeList()
}

// 页码改变
const handleCurrentChange = (val) => {
  page.current = val
  getKnowledgeList()
}

// 每页条数改变
const handleSizeChange = (val) => {
  page.size = val
  page.current = 1
  getKnowledgeList()
}

// 点击列表项
const handleItemClick = (item) => {
    console.log('item', item);
  router.push({
    name: 'KnowledgeFile',
    query: {
        konwInfoId: item.id
    }
  })
}

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

<style scoped lang="scss">
.knowledge-list {
  padding: 20px;

  .search-bar {
    margin-bottom: 20px;
    .search-input {
      width: 300px;
    }
  }

  .list-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    .list-item {
      cursor: pointer;
      transition: all 0.3s;
      background-image: url('@/assets/knowledgeBg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 10px;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      }

      .item-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .item-desc {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
