<template>
  <div class="page">
    <el-card v-loading="loading">
      <div class="header">
        <div>
          <h3>{{ item?.question }}</h3>
          <el-tag size="small">{{ item?.version ? "v" + item.version : "" }}</el-tag>
        </div>
        <div>
          <el-tag type="info">{{ categoryName }}</el-tag>
          <el-tag :type="item?.is_active ? 'success' : 'info'" class="ml-8">
            {{ item?.is_active ? "启用" : "停用" }}
          </el-tag>
        </div>
      </div>
      <el-divider />
      <div class="content">
        <pre>{{ item?.answer }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { fetchFaqItem, fetchFaqCategories } from "../api/faqs";

const route = useRoute();
const item = ref<any>(null);
const loading = ref(false);
const categories = ref<any[]>([]);

const categoryName = computed(() => {
  const cat = categories.value.find((c) => c.id === item.value?.category_id);
  return cat ? cat.name : item.value?.category_id;
});

const loadData = async () => {
  const id = route.params.itemId as string;
  loading.value = true;
  try {
    const [{ data: catData }, { data: faqData }] = await Promise.all([
      fetchFaqCategories(),
      fetchFaqItem(id),
    ]);
    categories.value = catData.items || catData || [];
    item.value = faqData;
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || "加载失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.page {
  padding: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  white-space: pre-wrap;
  line-height: 1.6;
}
.ml-8 {
  margin-left: 8px;
}
</style>
