<template>
  <div class="help-center">
    <div class="category-list">
      <div
        v-for="cat in categoryList"
        :key="cat.id"
        :class="['category-item', { active: selectedCategoryId === cat.id }]"
        @click="selectCategory(cat.id)"
      >
        {{ cat.name }}
      </div>
    </div>
    <div class="document-list">
      <div
        v-for="doc in documentList"
        :key="doc.id"
        class="document-item"
        @click="goToDetail(doc.id)"
      >
        <span class="doc-title">{{ doc.title }}</span>
        <span class="doc-date">{{ doc.createTime }}</span>
      </div>
      <div v-if="documentList.length === 0" class="empty">暂无文档</div>
    </div>
  </div>
</template>

<script>
import api from '@/pages/index/api/help';

export default {
  name: 'HelpCenter',
  data() {
    return {
      categoryList: [],
      selectedCategoryId: null,
      documentList: []
    }
  },
  mounted() {
    this.loadCategoryList()
    this.loadDocumentList()
  },
  methods: {
    async loadCategoryList() {
      const res = await api.getCategoryList()
      this.categoryList = res.data
    },
    async loadDocumentList() {
      const res = await api.getDocumentList({ status: 1 })
      this.documentList = res.data
    },
    async selectCategory(categoryId) {
      this.selectedCategoryId = categoryId
      const res = await api.getDocumentList({ categoryId, status: 1 })
      this.documentList = res.data
    },
    goToDetail(id) {
      this.$router.push(`/help/${id}`)
    }
  }
}
</script>

<style scoped>
.help-center { padding: 20px; }
.category-list { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.category-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; background: #f5f5f5; }
.category-item.active { background: #0052d9; color: #fff; }
.document-list { display: flex; flex-direction: column; gap: 10px; }
.document-item { padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; }
.document-item:hover { background: #f5f5f5; }
.doc-title { font-size: 14px; }
.doc-date { font-size: 12px; color: #999; }
.empty { text-align: center; padding: 40px; color: #999; }
</style>