<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">报告编号：{{ report.reportId }}</el-col>
        <el-col :span="8">主题词：{{ report.keyword }}</el-col>
        <el-col :span="8">事件类型：{{ report.eventType }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">发布日期：{{ report.publishDate }}</el-col>
        <el-col :span="8">来源单位：{{ report.sourceUnit }}</el-col>
        <el-col :span="8">通知类型：{{ report.notificationType }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">摘要：{{ report.summary }}</el-col>
      </el-row>
    </div>
    <div class="attachments">
      <strong>报告附件：</strong>
    </div>
    <el-link :href="report.attachmentUrl" target="_blank">{{ 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';

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

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

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(() => {
  const reportId = route.params.reportId;

  // 模拟数据对象
  const mockData = {
    reportId: 'YJYA0000000001',
    title: '广东省城市轨道交通运营突发事件总结报告',
    keyword: '轨道交通',
    eventType: '自然灾害',
    publishDate: '2024-07-11 16:09:09',
    sourceUnit: '茂名市应急管理局',
    notificationType: '总结报告',
    summary: '广东省城市轨道交通运营突发事件总结报告。',
    attachmentName: '关于X市公交XXX公交车司机出现状况的调查报告.pdf',
    attachmentUrl: '/path/to/attachment.pdf'
  };

  // 直接赋值给 report
  report.value = mockData;
});
</script>

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

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

.attachments {
  margin-bottom: 20px;
}
</style>
