<template>
  <div class="page-stack">
    <section class="page-toolbar">
      <div>
        <h1>知识库管理</h1>
        <p>维护病例相关指南、课件和文档资料，支持上传 PDF 等附件。</p>
      </div>
      <div class="toolbar-actions">
        <el-button :icon="Upload">批量上传</el-button>
        <el-button :icon="Plus" type="primary" @click="openCreateDialog">新增知识库</el-button>
      </div>
    </section>

    <section class="filter-bar">
      <el-input v-model="keyword" :prefix-icon="Search" clearable placeholder="搜索知识库名称/编号" />
      <el-select v-model="category" clearable placeholder="分类">
        <el-option label="临床指南" value="临床指南" />
        <el-option label="教学课件" value="教学课件" />
        <el-option label="诊疗规范" value="诊疗规范" />
        <el-option label="病例资料" value="病例资料" />
      </el-select>
      <el-select v-model="status" clearable placeholder="状态">
        <el-option label="已发布" value="已发布" />
        <el-option label="整理中" value="整理中" />
        <el-option label="草稿" value="草稿" />
      </el-select>
      <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
    </section>

    <section class="data-section">
      <el-table :data="filteredRows" row-key="id">
        <el-table-column prop="id" label="编号" width="150" />
        <el-table-column prop="name" label="知识库名称" min-width="220" />
        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column prop="owner" label="负责人" width="120" />
        <el-table-column label="附件" width="150">
          <template #default="{ row }">
            <el-tag type="info">{{ row.fileCount }} 个文件</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="130" />
        <el-table-column prop="status" label="状态" width="110">
          <template #default="{ row }">
            <el-tag :type="tagType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default>
            <el-button link type="primary">编辑</el-button>
            <el-button link type="primary">预览</el-button>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <el-dialog v-model="dialogVisible" title="新增知识库" width="560px">
      <el-form label-position="top">
        <el-form-item label="知识库名称" required>
          <el-input v-model="form.name" placeholder="例如：急诊胸痛诊疗资料库" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option label="临床指南" value="临床指南" />
            <el-option label="教学课件" value="教学课件" />
            <el-option label="诊疗规范" value="诊疗规范" />
            <el-option label="病例资料" value="病例资料" />
          </el-select>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="补充说明资料范围或适用病例" />
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            v-model:file-list="fileList"
            drag
            multiple
            :auto-upload="false"
            accept=".pdf,.doc,.docx,.ppt,.pptx,.txt"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">拖拽文件到此处，或点击选择</div>
            <template #tip>
              <div class="el-upload__tip">支持 PDF、Word、PPT、TXT，当前为本地选择演示。</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createKnowledgeBase">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadUserFile } from 'element-plus'
import { Plus, Refresh, Search, Upload, UploadFilled } from '@element-plus/icons-vue'

interface KnowledgeBaseItem {
  id: string
  name: string
  category: string
  owner: string
  fileCount: number
  updatedAt: string
  status: string
}

const keyword = ref('')
const category = ref('')
const status = ref('')
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([])

const form = reactive({
  name: '',
  category: '临床指南',
  description: ''
})

const rows = ref<KnowledgeBaseItem[]>([
  { id: 'KB-202606-001', name: '胸痛中心诊疗指南库', category: '临床指南', owner: '王内容', fileCount: 8, updatedAt: '2026-06-05', status: '已发布' },
  { id: 'KB-202606-002', name: '儿科发热问诊课件', category: '教学课件', owner: '李医生', fileCount: 5, updatedAt: '2026-06-03', status: '整理中' },
  { id: 'KB-202605-029', name: '糖尿病慢病随访规范', category: '诊疗规范', owner: '陈医生', fileCount: 12, updatedAt: '2026-05-28', status: '已发布' },
  { id: 'KB-202605-017', name: '神经内科病例资料包', category: '病例资料', owner: '王内容', fileCount: 3, updatedAt: '2026-05-21', status: '草稿' }
])

const filteredRows = computed(() =>
  rows.value.filter(item => {
    const matchKeyword = !keyword.value || item.name.includes(keyword.value) || item.id.includes(keyword.value)
    const matchCategory = !category.value || item.category === category.value
    const matchStatus = !status.value || item.status === status.value
    return matchKeyword && matchCategory && matchStatus
  })
)

function openCreateDialog() {
  form.name = ''
  form.category = '临床指南'
  form.description = ''
  fileList.value = []
  dialogVisible.value = true
}

function createKnowledgeBase() {
  if (!form.name.trim()) {
    ElMessage.warning('请输入知识库名称')
    return
  }

  rows.value.unshift({
    id: createId(),
    name: form.name.trim(),
    category: form.category,
    owner: '王内容',
    fileCount: fileList.value.length,
    updatedAt: new Date().toISOString().slice(0, 10),
    status: fileList.value.length > 0 ? '整理中' : '草稿'
  })
  dialogVisible.value = false
  ElMessage.success('知识库已添加')
}

function resetFilters() {
  keyword.value = ''
  category.value = ''
  status.value = ''
}

function createId() {
  const number = String(rows.value.length + 1).padStart(3, '0')
  return `KB-202606-${number}`
}

function tagType(value: string) {
  if (value === '已发布') return 'success'
  if (value === '整理中') return 'warning'
  return 'info'
}
</script>
