<template>
  <div class="app-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>危险源详情</span>
          <el-button type="primary" plain @click="goBack">返回列表</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="危险源编码">{{ detail.hazCode }}</el-descriptions-item>
            <el-descriptions-item label="危险源名称">{{ detail.hazName }}</el-descriptions-item>
            <el-descriptions-item label="危险源等级">
              <dict-tag :options="haz_grad" :value="detail.hiddGrad" />
            </el-descriptions-item>
            <el-descriptions-item label="风险等级">
              <dict-tag :options="risk_grad" :value="detail.riskGrad" />
            </el-descriptions-item>
            <el-descriptions-item label="涉及部位">{{ detail.proPart }}</el-descriptions-item>
            <el-descriptions-item label="危险源状态">
              <dict-tag :options="haz_stat" :value="detail.hazStat" />
            </el-descriptions-item>
            <el-descriptions-item label="责任人">{{ detail.supPers }}</el-descriptions-item>
            <el-descriptions-item label="巡查人员">{{ detail.patPers }}</el-descriptions-item>
            <el-descriptions-item label="是否管控">
              <dict-tag :options="sys_yes_no" :value="detail.ifControl" />
            </el-descriptions-item>
            <el-descriptions-item label="类型">{{ detail.type }}</el-descriptions-item>
            <el-descriptions-item label="部位经度">{{ detail.partLong }}</el-descriptions-item>
            <el-descriptions-item label="部位纬度">{{ detail.partLat }}</el-descriptions-item>
            <el-descriptions-item label="采集时间" :span="2">{{ detail.collTime }}</el-descriptions-item>
            <el-descriptions-item label="更新时间" :span="2">{{ detail.updTime }}</el-descriptions-item>
            <el-descriptions-item label="记录人员">{{ detail.recPers }}</el-descriptions-item>
            <el-descriptions-item label="责任人电话">{{ detail.orgpersTel }}</el-descriptions-item>
            <el-descriptions-item label="现场责任人">{{ detail.onsitePers }}</el-descriptions-item>
            <el-descriptions-item label="现场责任人电话">{{ detail.onsitepersTel }}</el-descriptions-item>
            <el-descriptions-item label="监管单位">{{ detail.supOrg }}</el-descriptions-item>
            <el-descriptions-item label="监管责任人">{{ detail.supPers }}</el-descriptions-item>
            <el-descriptions-item label="责任人电话">{{ detail.offiTel }}</el-descriptions-item>
            <el-descriptions-item label="报送时间">{{ detail.regTime }}</el-descriptions-item>
            <el-descriptions-item label="监管时间">{{ detail.supTime }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="风险信息" name="risk">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="危害风险" :span="2">{{ detail.harmRisk }}</el-descriptions-item>
            <el-descriptions-item label="监测预警" :span="2">{{ detail.moniPrec }}</el-descriptions-item>
            <el-descriptions-item label="安全措施" :span="2">{{ detail.safePrec }}</el-descriptions-item>
            <el-descriptions-item label="应急措施" :span="2">{{ detail.emerPrec }}</el-descriptions-item>
            <el-descriptions-item label="监测手段">{{ detail.monitorMeans }}</el-descriptions-item>
            <el-descriptions-item label="监测措施">{{ detail.monitorMeasure }}</el-descriptions-item>
            <el-descriptions-item label="组织措施">{{ detail.organizingPrec }}</el-descriptions-item>
            <el-descriptions-item label="技术措施">{{ detail.techniquePrec }}</el-descriptions-item>
            <el-descriptions-item label="管理措施" :span="2">{{ detail.systemPrec }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="危险源描述" name="description">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="危险源描述">{{ detail.otlcolQgwNbokgir }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ detail.note }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="辨识评估" name="identify">
          <el-table v-loading="identifyLoading" :data="identifyList">
            <el-table-column label="辨识时间" align="center" prop="createTime" width="180" />
            <el-table-column label="辨识类型" align="center" prop="idenType" />
            <el-table-column label="辨识结果" align="center" prop="idenResult" />
            <el-table-column label="辨识人员" align="center" prop="idenPer" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handleIdentifyDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="管控措施" name="control">
          <el-table v-loading="controlLoading" :data="controlList">
            <el-table-column label="措施类型" align="center" prop="measureType" />
            <el-table-column label="措施内容" align="center" prop="measureContent" :show-overflow-tooltip="true" />
            <el-table-column label="责任人" align="center" prop="respPer" />
            <el-table-column label="管控期限" align="center" prop="controlTerm" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handleControlDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="巡查记录" name="patrol">
          <el-table v-loading="patrolLoading" :data="patrolList">
            <el-table-column label="巡查时间" align="center" prop="patrolTime" width="180" />
            <el-table-column label="巡查人员" align="center" prop="patrolPer" />
            <el-table-column label="巡查结果" align="center" prop="patrolResult" />
            <el-table-column label="问题描述" align="center" prop="problemDesc" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handlePatrolDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="备案核销" name="register">
          <el-table v-loading="registerLoading" :data="registerList">
            <el-table-column label="备案时间" align="center" prop="regTime" width="180" />
            <el-table-column label="备案编号" align="center" prop="regCode" />
            <el-table-column label="备案状态" align="center" prop="regStatus" />
            <el-table-column label="核销时间" align="center" prop="writeOffTime" width="180" />
            <el-table-column label="核销状态" align="center" prop="writeOffStatus" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handleRegisterDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="安全状态" name="lifecycle">
          <el-timeline>
            <el-timeline-item timestamp="危险源发现" placement="top">
              <el-card shadow="hover">
                <p>发现时间：{{ detail.collTime || '未记录' }}</p>
                <p>记录人员：{{ detail.recPers || '未记录' }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="危险源辨识" placement="top">
              <el-card shadow="hover">
                <p v-if="identifyList.length">辨识时间：{{ identifyList[0]?.createTime || '未记录' }}</p>
                <p v-if="identifyList.length">辨识结果：{{ identifyList[0]?.idenResult || '未记录' }}</p>
                <p v-else>尚未进行辨识</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="危险源报送" placement="top">
              <el-card shadow="hover">
                <p>报送状态：
                  <dict-tag :options="haz_stat" :value="detail.hazStat" />
                </p>
                <p>报送时间：{{ detail.regTime || '未报送' }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="危险源监管" placement="top">
              <el-card shadow="hover">
                <p>监管单位：{{ detail.supOrg || '未监管' }}</p>
                <p>监管责任人：{{ detail.supPers || '未设置' }}</p>
                <p>责任人电话：{{ detail.offiTel || '未设置' }}</p>
                <p>监管时间：{{ detail.supTime || '未监管' }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="日常监控" placement="top">
              <el-card shadow="hover">
                <p v-if="patrolList.length">最近巡查：{{ patrolList[0]?.patrolTime || '无记录' }}</p>
                <p v-if="patrolList.length">巡查人员：{{ patrolList[0]?.patrolPer || '无记录' }}</p>
                <p v-else>尚未进行巡查</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="上报信息" name="report">
          <el-table v-loading="reportLoading" :data="reportList">
            <el-table-column label="上报状态" align="center" prop="status" width="120">
              <template #default="scope">
                <dict-tag :options="report_status" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createPer" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
            <el-table-column label="退回原因" align="center" prop="remark" :show-overflow-tooltip="true" v-if="scope.row.status === '3'" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="HazardDetail">
import { useRoute } from 'vue-router'
import { getObjHaz } from "@/api/slaj/hazard"
import { listTBusiHazIden } from "@/api/slaj/hazard"
import { listTBusiControlMeasure } from "@/api/slaj/hazard"
import { listBisHazPatRec } from "@/api/slaj/hazard"
import { listBisHazMajRegWrit, listTBusiHazardReport } from "@/api/slaj/hazard"

const { proxy } = getCurrentInstance()
const { haz_grad, haz_stat, risk_grad, sys_yes_no, report_status } = proxy.useDict("haz_grad", "haz_stat", "risk_grad", "sys_yes_no", "report_status")

const route = useRoute()
const activeTab = ref("basic")
const detail = ref({})
const identifyLoading = ref(false)
const identifyList = ref([])
const controlLoading = ref(false)
const controlList = ref([])
const patrolLoading = ref(false)
const patrolList = ref([])
const registerLoading = ref(false)
const registerList = ref([])
const reportLoading = ref(false)
const reportList = ref([])

/** 获取危险源详情 */
function getDetail() {
  const guid = route.query.guid
  if (guid) {
    getObjHaz(guid).then(res => {
      detail.value = res.data
      getIdentifyList()
      getControlList()
      getPatrolList()
      getRegisterList()
      getReportList()
    })
  }
}

/** 查询辨识评估列表 */
function getIdentifyList() {
  identifyLoading.value = true
  listTBusiHazIden({ hazGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    identifyLoading.value = false
    identifyList.value = res.rows
  })
}

/** 查询管控措施列表 */
function getControlList() {
  controlLoading.value = true
  listTBusiControlMeasure({ hazGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    controlLoading.value = false
    controlList.value = res.rows
  })
}

/** 查询巡查记录列表 */
function getPatrolList() {
  patrolLoading.value = true
  listBisHazPatRec({ hazGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    patrolLoading.value = false
    patrolList.value = res.rows
  })
}

/** 查询备案核销列表 */
function getRegisterList() {
  registerLoading.value = true
  listBisHazMajRegWrit({ hazGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    registerLoading.value = false
    registerList.value = res.rows
  })
}

/** 查询上报列表 */
function getReportList() {
  reportLoading.value = true
  listTBusiHazardReport({ hazGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    reportLoading.value = false
    reportList.value = res.rows
  })
}

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

/** 辨识评估详情 */
function handleIdentifyDetail(row) {
  proxy.$router.push({ path: '/slaj/hazard/identify', query: { hazGuid: detail.value.guid } })
}

/** 管控措施详情 */
function handleControlDetail(row) {
  proxy.$router.push({ path: '/slaj/hazard/controlMeasure', query: { hazGuid: detail.value.guid } })
}

/** 巡查记录详情 */
function handlePatrolDetail(row) {
  proxy.$router.push({ path: '/slaj/hazard/patrol', query: { hazGuid: detail.value.guid } })
}

/** 备案核销详情 */
function handleRegisterDetail(row) {
  proxy.$router.push({ path: '/slaj/hazard/register', query: { hazGuid: detail.value.guid } })
}

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

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