<template>
  <div class="report-details">
    <el-button type="text" @click="goBack">返回上一级</el-button>
    <el-row>
      <el-col :span="20">
        <h2>{{ report.title }}</h2>
      </el-col>
      <el-col :span="4" class="text-right">
        <el-button type="primary" @click="handleEdit">编辑</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="basic-info">
      <strong>基本信息</strong>
      <el-row>
        <el-col :span="8">
          <span class="label">报告编号：</span>
          <span class="value">{{ report.reportId }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">主题词：</span>
          <span class="value">{{ report.subject }}</span>
        </el-col>
        <el-col :span="8" style="display: flex; align-items: center;">
          <span class="label">事件类型：</span>
          <dict-tag class="value" :options="mm_event_type" :value="report.eventType" style="margin-left: 8px;" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="label">发布日期：</span>
          <span class="value">{{ report.publishDate }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">来源单位：</span>
          <span class="value">{{ report.sourceUnit }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">通知类型：</span>
          <span class="value">{{ report.notificationType }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="label">摘要：</span>
          <span class="value">{{ report.summary }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="attachments">
      <strong>报告附件：</strong>
    </div>
    <el-link :href="report.attachmentUrl" target="_blank" class="value">{{ report.attachmentName }}</el-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { fetchReportDetail } from '@/api/kenowledge/index';
import { getDicts } from "@/api/system/dict/data/index";

const report = ref({
  reportId: '',
  title: '',
  subject: '',
  eventType: '',
  publishDate: '',
  sourceUnit: '',
  notificationType: '',
  summary: '',
  attachmentName: '',
  attachmentUrl: ''
});

const route = useRoute();
const router = useRouter();

// 初始化事件类型字典
const mm_event_type = ref([]);

// 返回上一级
const goBack = () => {
  router.go(-1);
};

const handleEdit = () => {
  ElMessageBox.prompt('编辑报告', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: report.value.title
  }).then(({ value }) => {
    report.value.title = value;
    ElMessage({
      type: 'success',
      message: '报告已更新'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消编辑'
    });
  });
};

const handleDelete = () => {
  ElMessageBox.confirm('此操作将永久删除该报告, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '报告已删除'
    });
    router.push('/');
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

onMounted(async () => {
  try {
    const dictResponse = await getDicts('mm_event_type');

    // 格式化字典数据
    mm_event_type.value = dictResponse.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue,
    }));

    const reportId = route.query.reportID;
    const response = await fetchReportDetail(reportId);
    const data = response.data[0];

    const publishDate = new Date(data.publishDate).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    }).replace(/\//g, '-');

    report.value = {
      reportId: data.report_id,
      title: data.reportName,
      subject: data.subject,
      eventType: data.eventType,
      publishDate: publishDate,
      sourceUnit: data.publishingUnit,
      notificationType: data.notificationType,
      summary: data.summary,
      attachmentName: data.file.length > 0 ? data.file[0].name : '',
      attachmentUrl: data.file.length > 0 ? data.file[0].url : ''
    };
  } catch (error) {
    ElMessage.error('获取报告详情或字典数据失败');
    console.error(error);
  }
});
</script>

<style scoped>
.report-details {
  padding: 20px;
  background-color: #fff;
}

.basic-info {
  margin-bottom: 20px;
}

.attachments {
  margin-bottom: 20px;
}

.label {
  font-weight: bold; /* 保持标签加粗 */
}

.value {
  font-weight: normal; /* 去除后端数据的加粗 */
  color: #333; /* 可选：更改字体颜色 */
}

.el-divider {
  margin-top: 1px;
}
</style>
