<template>
  <div class="page">
    <div class="page-header">
      <div>
        <h1 class="page-title">注意事项详情</h1>
        <p class="page-subtitle">查看注意事项与附件</p>
      </div>
      <div class="actions">
        <el-button type="primary" @click="goEdit">编辑</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>

    <el-card v-loading="loading">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="分中心">{{ detail.site_name || "—" }}</el-descriptions-item>
        <el-descriptions-item label="重要等级">{{ detail.level || "—" }}</el-descriptions-item>
        <el-descriptions-item label="标题" :span="2">{{ detail.title || "—" }}</el-descriptions-item>
        <el-descriptions-item label="内容" :span="2">{{ detail.content || "—" }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <AttachmentList
      v-if="noteId"
      :study-id="studyId"
      entity-type="knowledge_note"
      :entity-id="noteId"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStudyStore } from "../../store/study";
import { getKnowledgeNote } from "../../api/knowledgeNotes";
import AttachmentList from "../../components/attachments/AttachmentList.vue";

const route = useRoute();
const router = useRouter();
const study = useStudyStore();
const loading = ref(false);
const noteId = route.params.noteId as string;
const studyId = study.currentStudy?.id || "";

const detail = reactive<any>({
  site_name: "",
  title: "",
  level: "",
  content: "",
});

const load = async () => {
  if (!studyId || !noteId) return;
  loading.value = true;
  try {
    const { data } = await getKnowledgeNote(studyId, noteId);
    Object.assign(detail, data);
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || "加载失败");
  } finally {
    loading.value = false;
  }
};

const goEdit = () => router.push(`/knowledge/notes/${noteId}/edit`);
const goBack = () => router.push("/knowledge/notes");

onMounted(load);
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.page-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ctms-text-secondary);
}

.actions {
  display: flex;
  gap: 8px;
}
</style>
