<template>
  <layout-card>
    <el-divider content-position="left">清单信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="清单名称">
        {{ info.NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="排查清单类型">
        {{ info.SCREENTYPENAME }}
      </el-descriptions-item>
      <el-descriptions-item label="包保责任人部门">
        {{ info.DEPARTMENT_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="包保责任人岗位">
        {{ info.POST_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="排查周期">
        {{ info.PERIODNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="清单类型">
        {{ info.TYPENAME }}
      </el-descriptions-item>
      <el-descriptions-item label="包保责任人">
        {{ info.USER_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="55" />
      <el-table-column
        prop="RISKUNITNAME"
        label="风险点（单元）"
        width="150px"
      />
      <el-table-column prop="PARTSNAME" width="200px" label="辨识部位" />
      <el-table-column prop="RISK_DESCR" width="300px" label="存在风险" />
      <el-table-column prop="DNAME5" label="风险分级" width="150" />
      <el-table-column prop="CHECK_CONTENT" width="300px" label="检查内容" />
      <el-table-column prop="BAO_BAO_NUM_NAME" label="包保任务对应项" />
      <el-table-column label="操作" width="80">
        <template v-slot="{ row, $index }">
          <el-button type="primary" text link @click="fnSelect(row, $index)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
    <insurance-coverage-select
      v-model:visible="data.selectDialog.visible"
      :info="data.selectDialog.info"
      @check="fnCheck"
    />
  </layout-card>
</template>

<script setup>
import {
  getInventoryManagementView,
  setInventoryManagementInsuranceCoverageSave,
} from "@/request/hazard_investigation.js";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";
import InsuranceCoverageSelect from "./components/insurance_coverage_select.vue";
import useListData from "@/assets/js/useListData.js";

const route = useRoute();
const router = useRouter();
const { LISTMANAGER_ID } = route.query;
const info = ref({});
const data = reactive({
  selectDialog: {
    visible: false,
    info: {},
    index: 111,
  },
});
const { list } = useListData(getInventoryManagementView, {
  otherParams: {
    LISTMANAGER_ID,
  },
  usePagination: false,
  callbackFn: (list, resData) => {
    info.value = resData.pd;
  },
});
const fnSelect = (row, index) => {
  data.selectDialog.visible = true;
  data.selectDialog.info = row;
  data.selectDialog.index = index;
};
const fnCheck = (row) => {
  list.value[data.selectDialog.index].BAO_BAO_NUM_NAME = row.DESCRIBE;
  list.value[data.selectDialog.index].BAO_BAO_NUM = row.TASK_NUM;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await setInventoryManagementInsuranceCoverageSave({
      list: JSON.stringify(list.value),
    });
    ElMessage.success("保存成功");
    router.back();
  },
  { atBegin: true }
);
</script>

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