<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>事故基本信息</span>
          <el-button type="primary" plain icon="ArrowLeft" @click="goBack">返回列表</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="base">
          <el-descriptions :column="2" border class="mt10">
            <el-descriptions-item label="事故名称">{{ form.acciName }}</el-descriptions-item>
            <el-descriptions-item label="事故等级">
              <dict-tag :options="acci_grad" :value="form.acciGrad" />
            </el-descriptions-item>
            <el-descriptions-item label="事故类别">
              <dict-tag :options="acci_cate" :value="form.acciCate" />
            </el-descriptions-item>
            <el-descriptions-item label="报告状态">
              <dict-tag :options="rep_stat" :value="form.repStat" />
            </el-descriptions-item>
            <el-descriptions-item label="发生时间">{{ form.occuTime }}</el-descriptions-item>
            <el-descriptions-item label="发生地点">{{ form.occuLoc }}</el-descriptions-item>
            <el-descriptions-item label="死亡/重伤/失踪">
              {{ form.casNum || 0 }}/{{ form.serInjNum || 0 }}/{{ form.missNum || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="经济损失(万元)">{{ form.econLoss }}</el-descriptions-item>
            <el-descriptions-item label="事故描述" :span="2">{{ form.acciDesc || form.note }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ form.note }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="事故调查" name="inve">
          <el-table v-loading="inveLoading" :data="inveList">
            <el-table-column label="调查单位" align="center" prop="inveOrg" :show-overflow-tooltip="true" />
            <el-table-column label="调查负责人" align="center" prop="inveLeader" />
            <el-table-column label="调查日期" align="center" prop="inveDate" width="180" />
            <el-table-column label="调查结论" align="center" prop="inveConc" :show-overflow-tooltip="true" />
            <el-table-column label="调查意见" align="center" prop="inveOpin" :show-overflow-tooltip="true" />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="事故进展" name="prog">
          <el-table v-loading="progLoading" :data="progList">
            <el-table-column label="进展内容" align="center" prop="progCont" :show-overflow-tooltip="true" />
            <el-table-column label="处理人" align="center" prop="dealPers" />
            <el-table-column label="处理时间" align="center" prop="dealTime" width="180" />
            <el-table-column label="处理意见" align="center" prop="dealOpin" :show-overflow-tooltip="true" />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="事故报告" name="rep">
          <el-table v-loading="repLoading" :data="repList">
            <el-table-column label="报告标题" align="center" prop="repTitle" :show-overflow-tooltip="true" />
            <el-table-column label="报告单位" align="center" prop="repOrg" :show-overflow-tooltip="true" />
            <el-table-column label="报告人" align="center" prop="repPers" />
            <el-table-column label="报告日期" align="center" prop="repDate" width="180" />
            <el-table-column label="报告内容" align="center" prop="repCont" :show-overflow-tooltip="true" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="ObjAcciDetail">
import { getObjAcci } from "@/api/slaj/acci"
import { listBisAcciInve } from "@/api/slaj/acci"
import { listBisAcciProg } from "@/api/slaj/acci"
import { listBisAcciRep } from "@/api/slaj/acci"

const { proxy } = getCurrentInstance()
const { acci_grad, acci_cate, rep_stat } = proxy.useDict("acci_grad", "acci_cate", "rep_stat")

const route = useRoute()
const activeTab = ref("base")
const form = ref({})
const inveList = ref([])
const progList = ref([])
const repList = ref([])

const inveLoading = ref(false)
const progLoading = ref(false)
const repLoading = ref(false)

/** 查询事故详细 */
function getInfo() {
  const guid = route.query.guid
  if (guid) {
    getObjAcci(guid).then(response => {
      form.value = response.data
      getInveList()
      getProgList()
      getRepList()
    })
  }
}

/** 查询事故调查 */
function getInveList() {
  inveLoading.value = true
  listBisAcciInve({ acciGuid: form.value.guid }).then(res => {
    inveLoading.value = false
    inveList.value = res.rows
  })
}

/** 查询事故进展 */
function getProgList() {
  progLoading.value = true
  listBisAcciProg({ acciGuid: form.value.guid }).then(res => {
    progLoading.value = false
    progList.value = res.rows
  })
}

/** 查询事故报告 */
function getRepList() {
  repLoading.value = true
  listBisAcciRep({ acciGuid: form.value.guid }).then(res => {
    repLoading.value = false
    repList.value = res.rows
  })
}

/** 返回列表 */
function goBack() {
  proxy.$router.push({ path: '/slaj/acci/index' })
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mt10 {
  margin-top: 10px;
}
</style>
