<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>案例详情：{{ caseInfo.caseName }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="案例ID">{{ caseInfo.caseId }}</el-descriptions-item>
        <el-descriptions-item label="案例类型">{{ caseInfo.caseType }}</el-descriptions-item>
        <el-descriptions-item label="案例名称" :span="2">{{ caseInfo.caseName }}</el-descriptions-item>
        <el-descriptions-item label="案例时间">{{ caseInfo.caseTime || '无' }}</el-descriptions-item>
        <el-descriptions-item label="案例地点">{{ caseInfo.caseLocation || '无' }}</el-descriptions-item>
        <el-descriptions-item label="洪水成因" v-if="caseInfo.floodCause">{{ caseInfo.floodCause }}</el-descriptions-item>
        <el-descriptions-item label="洪峰流量" v-if="caseInfo.peakFlow">{{ caseInfo.peakFlow }}</el-descriptions-item>
        <el-descriptions-item label="降雨量" v-if="caseInfo.rainfall">{{ caseInfo.rainfall }}</el-descriptions-item>
        <el-descriptions-item label="持续时间" v-if="caseInfo.duration">{{ caseInfo.duration }}</el-descriptions-item>
        <el-descriptions-item label="经济损失" v-if="caseInfo.economicLoss" :span="2">
          <div v-html="formatDescription(caseInfo.economicLoss)"></div>
        </el-descriptions-item>
        <el-descriptions-item label="人员伤亡" v-if="caseInfo.casualties" :span="2">
          <div v-html="formatDescription(caseInfo.casualties)"></div>
        </el-descriptions-item>
        <el-descriptions-item label="受灾人口" v-if="caseInfo.affectedPopulation">{{ caseInfo.affectedPopulation }}</el-descriptions-item>
        <el-descriptions-item label="影响范围" v-if="caseInfo.affectedArea">{{ caseInfo.affectedArea }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="dict.type.sys_normal_disable" :value="caseInfo.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(caseInfo.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="案例描述" :span="2" v-if="caseInfo.caseDescription">
          <div v-html="formatDescription(caseInfo.caseDescription)" style="white-space: pre-wrap;"></div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 案例数据（JSON格式） -->
      <div v-if="caseData && Object.keys(caseData).length > 0" style="margin-top: 20px;">
        <el-divider content-position="left">案例详细数据</el-divider>
        <el-table :data="formatCaseData(caseData)" border>
          <el-table-column label="字段名称" prop="key" width="200"></el-table-column>
          <el-table-column label="字段值" prop="value"></el-table-column>
        </el-table>
      </div>

      <div v-if="caseInfo.remark" style="margin-top: 20px;">
        <el-divider content-position="left">备注</el-divider>
        <p>{{ caseInfo.remark }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCase } from "@/api/flood/case";

export default {
  name: "CaseDetail",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      caseId: null,
      caseInfo: {},
      caseData: null
    };
  },
  created() {
    this.caseId = this.$route.query.caseId;
    if (this.caseId) {
      this.getCaseInfo();
    }
  },
  methods: {
    /** 获取案例信息 */
    getCaseInfo() {
      getCase(this.caseId).then(response => {
        this.caseInfo = response.data;
        // 解析案例数据（JSON格式）
        if (this.caseInfo.caseData) {
          try {
            this.caseData = JSON.parse(this.caseInfo.caseData);
          } catch (e) {
            console.error("解析案例数据失败", e);
            this.caseData = null;
          }
        }
      });
    },
    /** 格式化描述 */
    formatDescription(desc) {
      if (!desc) return '无';
      return desc.replace(/\n/g, '<br/>');
    },
    /** 格式化案例数据为表格格式 */
    formatCaseData(data) {
      const result = [];
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          result.push({
            key: key,
            value: data[key] || '无'
          });
        }
      }
      return result;
    },
    /** 返回 */
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>
