<template>
  <layout-card>
    <el-divider content-position="left"> 风险点（单元）信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="风险点（单元）">
        {{ RISKUNITNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="管控部门">
        {{ DEPT_NAME }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left"> 检查内容</el-divider>
    <layout-table :data="list" :show-pagination="false">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="PARTSNAME" label="辨识部位" />
      <el-table-column prop="risk_descr" label="存在风险" />
      <el-table-column label="风险分级">
        <template v-slot="{ row }">
          <span v-if="row.LEVELID === 'levelD'" class="text-blue">
            低风险/D级
          </span>
          <span v-else-if="row.LEVELID === 'levelC'" class="text-yellow">
            一般风险/C级
          </span>
          <span v-else-if="row.LEVELID === 'levelB'" class="text-orange">
            较大风险/B级
          </span>
          <span v-else-if="row.LEVELID === 'levelA'" class="text-red">
            重大风险/A级
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="MEASURES" label="管控措施" />
      <el-table-column prop="ACCIDENTS_NAME" label="事故类型" />
      <el-table-column prop="EME_MEASURES" label="应急处置措施" />
    </layout-table>
  </layout-card>
</template>

<script setup>
import { useRoute } from "vue-router";
import { getRiskPointInspectList } from "@/request/risk_control.js";
import useListData from "@/assets/js/useListData.js";

const route = useRoute();
const { RISKUNIT_ID, RISKUNITNAME, DEPT_NAME } = route.query;
const { list } = useListData(getRiskPointInspectList, {
  otherParams: { RISK_UNIT_ID: RISKUNIT_ID },
  usePagination: false,
});
</script>

<style scoped lang="scss"></style>
