<template>
  <layout-card>
    <el-divider content-position="left">辨识部位信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="管控部门" :span="2">
        {{ data.info.DEPTNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="风险点（单元）">
        {{ data.info.RISKUNITNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="辨识部位">
        {{ data.info.PARTSNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="风险分级">
        <span v-if="data.info.LEVELID === 'levelD'" class="text-blue">
          低风险/D级
        </span>
        <span v-else-if="data.info.LEVELID === 'levelC'" class="text-yellow">
          一般风险/C级
        </span>
        <span v-else-if="data.info.LEVELID === 'levelB'" class="text-orange">
          较大风险/B级
        </span>
        <span v-else-if="data.info.LEVELID === 'levelA'" class="text-red">
          重大风险/A级
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="事故类型">
        {{ data.info.ACCIDENTS_NAME }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">资源库标准项</el-divider>
    <layout-table
      ref="tableRef"
      :data="data.ideResList"
      :show-pagination="false"
      row-key="ID"
    >
      <el-table-column
        :reserve-selection="true"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="RISK_DESCR" label="存在风险" />
      <el-table-column prop="LEVELIDNAME" label="风险分级" />
      <el-table-column prop="ACCIDENTS_NAME" label="事故类型" />
      <el-table-column label="操作" width="80">
        <template v-slot="{ row }">
          <el-button type="primary" text link @click="fnAddOrEdit(row.ID, 3)">
            选入
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <el-divider content-position="left">自定义项</el-divider>
    <div class="tr mb-10">
      <el-button type="primary" @click="fnAddOrEdit('', '')">
        添加存在风险
      </el-button>
    </div>
    <layout-table
      :data="[...data.riskPointList, ...data.rpTimeList]"
      :show-pagination="false"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="RISK_DESCR" label="存在风险" />
      <el-table-column prop="LEVELIDNAME" label="风险分级" />
      <el-table-column prop="ACCIDENTS_NAME" label="事故类型" />
      <el-table-column label="操作" width="80">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="
              fnAddOrEdit(
                row.asd ? row.RISKPOINT_ID : row.RISKPOINTTEMPORARY_ID,
                row.asd ? 1 : 2
              )
            "
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
    <add-risk
      v-model:visible="data.addDialog.visible"
      v-model:form="data.addDialog.form"
      :type="data.addDialog.type"
      :title="data.addDialog.title"
      :info="data.info"
      :id="IDENTIFICATIONPARTS_ID"
      :time="data.time"
      @get-data="fnGetData"
    />
  </layout-card>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import {
  getIdentifyingPartsResourcesRisk,
  setIdentifyingPartsResourcesRiskSave,
  getIdentifyingPartsRiskView1,
  getIdentifyingPartsRiskView2,
  getIdentifyingPartsRiskView3,
} from "@/request/risk_control.js";
import { useRoute, useRouter } from "vue-router";
import AddRisk from "./components/add_risk.vue";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const { IDENTIFICATIONPARTS_ID, PARTSNAME, RISKUNITNAME } = route.query;
const tableRef = ref(null);
const data = reactive({
  time: new Date().getTime(),
  info: {},
  ideResList: [],
  riskPointList: [],
  rpTimeList: [],
  addDialog: {
    visible: false,
    form: {
      USER_ID: "",
      RISK_DESCR: "",
      LIKELIHOOD: "",
      EXPOSURE: "",
      CONSEQUENCE: "",
      LEVEL_NAME: "",
      DANGER: "",
      MEASURES: "",
      ACCIDENTS: [],
      EME_MEASURES: "",
    },
    type: 0,
    title: "",
  },
});
const fnGetData = async () => {
  const resData = await getIdentifyingPartsResourcesRisk({
    IDENTIFICATIONPARTS_ID,
    IDENTIFICATION: PARTSNAME,
    RISKUNIT: RISKUNITNAME,
    SETUPTIME: data.time,
  });
  for (let i = 0; i < resData.riskPointList.length; i++) {
    resData.riskPointList[i].asd = "asd";
  }
  data.info = resData.pd;
  data.ideResList = resData.ideResList;
  data.riskPointList = resData.riskPointList;
  data.rpTimeList = resData.rpTimeList;
};
fnGetData();
const fnAddOrEdit = async (RISKPOINT_ID, type) => {
  data.addDialog.visible = true;
  await nextTick();
  data.addDialog.type = type;
  const title = {
    1: "修改",
    2: "修改",
    3: "选入",
  };
  data.addDialog.title = title[type] || "新增";
  if (!type) return;
  let resData = {};
  if (type === 1)
    resData = await getIdentifyingPartsRiskView1({ RISKPOINT_ID });
  else if (type === 2)
    resData = await getIdentifyingPartsRiskView2({ RISKPOINT_ID });
  else if (type === 3)
    resData = await getIdentifyingPartsRiskView3({ RISKPOINT_ID });
  data.addDialog.form = resData.pd;
  data.addDialog.form.ACCIDENTS = resData.pd.ACCIDENTS.split(",");
  data.addDialog.form.DEPTNAME = resData.pd.DEPT_NAME;
  data.addDialog.form.LEVEL_NAME = resData.pd.DNAME5;
  if (type === 2)
    data.addDialog.form.RISKPOINT_ID = resData.pd.RISKPOINTTEMPORARY_ID;
  else if (type === 3)
    data.addDialog.form.RISKPOINT_ID = resData.pd.IDEREPOSITORY_ID;
};
const fnSubmit = debounce(
  1000,
  async () => {
    const selectionData = tableRef.value.getSelectionRows();
    const DATA_IDS = selectionData.map((item) => item.ID).join(",");
    await setIdentifyingPartsResourcesRiskSave({
      IDENTIFICATION_ID: IDENTIFICATIONPARTS_ID,
      DEPARTMENT_ID: data.info.DEPARTMENT_ID,
      ISMATCHING: data.info.ISMATCHING,
      RISK_UNIT_ID: data.info.RISK_UNIT_ID,
      SETUPTIME: data.time,
      USER_ID: data.info.USERNAME,
      DATA_IDS,
    });
    ElMessage.success("保存成功");
    router.back();
  },
  { atBegin: true }
);
</script>

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