<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- 顶部导航 -->
    <div class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">知识库管理</h1>
          <div class="flex space-x-4">
            <button @click="showAddCategoryModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              添加分类
            </button>
            <button @click="showAddDocumentModal = true" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">
              添加文档
            </button>
            <button @click="exportKnowledgeData" class="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700">
              导出数据
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 知识库统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">总文档数</h3>
          <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ totalDocuments }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">分类数</h3>
          <p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">{{ totalCategories }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">本周新增</h3>
          <p class="mt-2 text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ weeklyNewDocuments }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">热门文档</h3>
          <p class="mt-2 text-3xl font-bold text-red-600 dark:text-red-400">{{ popularDocuments }}</p>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">分类</label>
            <select v-model="filters.category" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">标签</label>
            <select v-model="filters.tag" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="tag in tags" :key="tag.id" :value="tag.id">{{ tag.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">创建时间</label>
            <div class="flex space-x-2">
              <input type="date" v-model="filters.startDate" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <input type="date" v-model="filters.endDate" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">搜索</label>
            <input type="text" v-model="filters.search" placeholder="文档标题/内容" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
        </div>
      </div>

      <!-- 文档列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">文档信息</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">分类信息</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">标签</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">统计</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr v-for="document in filteredDocuments" :key="document.id">
              <td class="px-6 py-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ document.title }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">作者: {{ document.author }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">创建时间: {{ formatDate(document.createdAt) }}</div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-white">{{ getCategoryName(document.categoryId) }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">子分类: {{ document.subCategory }}</div>
              </td>
              <td class="px-6 py-4">
                <div class="flex flex-wrap gap-1">
                  <span v-for="tagId in document.tags" :key="tagId" class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-300">
                    {{ getTagName(tagId) }}
                  </span>
                </div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-white">浏览次数: {{ document.views }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">收藏次数: {{ document.favorites }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">评论数: {{ document.comments }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button @click="viewDocument(document)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</button>
                <button @click="editDocument(document)" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300 mr-3">编辑</button>
                <button @click="deleteDocument(document)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加分类模态框 -->
    <div v-if="showAddCategoryModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">添加分类</h2>
        <form @submit.prevent="addCategory">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">分类名称</label>
            <input type="text" v-model="newCategory.name" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">父分类</label>
            <select v-model="newCategory.parentId" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">无</option>
              <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">分类描述</label>
            <textarea v-model="newCategory.description" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="4"></textarea>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddCategoryModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              创建
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 添加文档模态框 -->
    <div v-if="showAddDocumentModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">添加文档</h2>
        <form @submit.prevent="addDocument">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">文档标题</label>
            <input type="text" v-model="newDocument.title" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">分类</label>
            <select v-model="newDocument.categoryId" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">子分类</label>
            <input type="text" v-model="newDocument.subCategory" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">标签</label>
            <select v-model="newDocument.tags" multiple class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="tag in tags" :key="tag.id" :value="tag.id">{{ tag.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">文档内容</label>
            <textarea v-model="newDocument.content" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="8"></textarea>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddDocumentModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
              创建
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 文档数据
const documents = ref([
  {
    id: 1,
    title: 'Vue.js 入门指南',
    categoryId: 1,
    subCategory: '前端开发',
    tags: [1, 2],
    author: '张三',
    createdAt: '2024-03-15',
    views: 120,
    favorites: 30,
    comments: 15,
    content: 'Vue.js 是一个用于构建用户界面的渐进式框架...'
  },
  {
    id: 2,
    title: 'Spring Boot 最佳实践',
    categoryId: 2,
    subCategory: '后端开发',
    tags: [3, 4],
    author: '李四',
    createdAt: '2024-03-18',
    views: 85,
    favorites: 25,
    comments: 10,
    content: 'Spring Boot 是一个用于简化 Spring 应用开发的框架...'
  }
])

// 分类数据
const categories = ref([
  {
    id: 1,
    name: '前端开发',
    parentId: null,
    description: '前端开发相关文档'
  },
  {
    id: 2,
    name: '后端开发',
    parentId: null,
    description: '后端开发相关文档'
  },
  {
    id: 3,
    name: 'Vue.js',
    parentId: 1,
    description: 'Vue.js 相关文档'
  },
  {
    id: 4,
    name: 'Spring Boot',
    parentId: 2,
    description: 'Spring Boot 相关文档'
  }
])

// 标签数据
const tags = [
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Vue' },
  { id: 3, name: 'Java' },
  { id: 4, name: 'Spring' },
  { id: 5, name: '数据库' },
  { id: 6, name: '微服务' }
]

// 筛选条件
const filters = ref({
  category: '',
  tag: '',
  startDate: '',
  endDate: '',
  search: ''
})

// 模态框状态
const showAddCategoryModal = ref(false)
const showAddDocumentModal = ref(false)

// 新分类表单
const newCategory = ref({
  name: '',
  parentId: '',
  description: ''
})

// 新文档表单
const newDocument = ref({
  title: '',
  categoryId: '',
  subCategory: '',
  tags: [],
  content: ''
})

// 计算属性
const filteredDocuments = computed(() => {
  return documents.value.filter(document => {
    const matchesCategory = !filters.value.category || document.categoryId === filters.value.category
    const matchesTag = !filters.value.tag || document.tags.includes(filters.value.tag)
    const matchesDate = (!filters.value.startDate || document.createdAt >= filters.value.startDate) &&
                       (!filters.value.endDate || document.createdAt <= filters.value.endDate)
    const matchesSearch = !filters.value.search ||
      document.title.toLowerCase().includes(filters.value.search.toLowerCase()) ||
      document.content.toLowerCase().includes(filters.value.search.toLowerCase())
    return matchesCategory && matchesTag && matchesDate && matchesSearch
  })
})

const totalDocuments = computed(() => {
  return documents.value.length
})

const totalCategories = computed(() => {
  return categories.value.length
})

const weeklyNewDocuments = computed(() => {
  const oneWeekAgo = new Date()
  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
  return documents.value.filter(doc => new Date(doc.createdAt) >= oneWeekAgo).length
})

const popularDocuments = computed(() => {
  return documents.value.filter(doc => doc.views > 100).length
})

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未知分类'
}

// 获取标签名称
const getTagName = (tagId) => {
  const tag = tags.find(t => t.id === tagId)
  return tag ? tag.name : '未知标签'
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 添加分类
const addCategory = () => {
  const category = {
    id: categories.value.length + 1,
    ...newCategory.value
  }
  
  categories.value.push(category)
  showAddCategoryModal.value = false
  resetNewCategory()
}

// 添加文档
const addDocument = () => {
  const document = {
    id: documents.value.length + 1,
    author: '当前用户',
    createdAt: new Date().toISOString().split('T')[0],
    views: 0,
    favorites: 0,
    comments: 0,
    ...newDocument.value
  }
  
  documents.value.push(document)
  showAddDocumentModal.value = false
  resetNewDocument()
}

// 重置新分类表单
const resetNewCategory = () => {
  newCategory.value = {
    name: '',
    parentId: '',
    description: ''
  }
}

// 重置新文档表单
const resetNewDocument = () => {
  newDocument.value = {
    title: '',
    categoryId: '',
    subCategory: '',
    tags: [],
    content: ''
  }
}

// 查看文档
const viewDocument = (document) => {
  // 实现查看文档的逻辑
  console.log('查看文档:', document)
}

// 编辑文档
const editDocument = (document) => {
  // 实现编辑文档的逻辑
  console.log('编辑文档:', document)
}

// 删除文档
const deleteDocument = (document) => {
  if (confirm(`确定要删除文档 ${document.title} 吗？`)) {
    const index = documents.value.findIndex(d => d.id === document.id)
    if (index !== -1) {
      documents.value.splice(index, 1)
    }
  }
}

// 导出知识库数据
const exportKnowledgeData = () => {
  // 实现导出知识库数据的逻辑
  console.log('导出知识库数据')
}
</script> 