<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.prevent="fnResetPagination"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字" prop="KEYWORDS">
              <el-input v-model="searchForm.KEYWORDS" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="风险点" prop="RISK_UNIT_ID">
              <el-select
                v-model="searchForm.RISK_UNIT_ID"
                @change="fnGetPartsList"
              >
                <el-option
                  v-for="item in data.unitList"
                  :key="item.RISKUNIT_ID"
                  :label="item.DEPT_NAME + '-' + item.RISKUNITNAME"
                  :value="item.RISKUNIT_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="辨识部位" prop="IDENTIFICATION_ID">
              <el-select v-model="searchForm.IDENTIFICATION_ID">
                <el-option
                  v-for="item in data.partsList"
                  :key="item.IDENTIFICATIONPARTS_ID"
                  :label="item.PARTSNAME"
                  :value="item.IDENTIFICATIONPARTS_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPagination">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        :data="list"
        @get-data="fnGetData"
        v-model:pagination="pagination"
        :span-method="fnSpanMethod"
      >
        <el-table-column
          fixed
          prop="risk_unit_name"
          label="风险点（单元）"
          width="200px"
        />
        <el-table-column prop="parts_name" label="辨识部位" width="200px" />
        <el-table-column prop="is_new" label="改进类型" width="80" />
        <el-table-column prop="label" label="持续改进" width="100" />
        <el-table-column
          prop="risk_causes_name"
          label="风险成因"
          width="150px"
        />
        <el-table-column prop="risk_descr" label="存在风险" width="500px" />
        <el-table-column prop="dname5" label="风险等级" width="100" />
        <el-table-column prop="measures" label="管控措施" width="500px" />
        <el-table-column prop="accidents_name" label="事故类型" width="300px" />
        <el-table-column prop="dept_name_all" label="责任部门" width="150px" />
        <el-table-column label="责任人" width="150px">
          <template v-slot="{ row }">
            {{ row.dept_user_name ? row.dept_user_name : row.user_id }}
          </template>
        </el-table-column>
        <el-table-column prop="creat_time" label="分析时间" width="150px" />
        <el-table-column prop="creator_name" label="分析人员" width="150px" />
        <el-table-column prop="inspector_name" label="审批人员" width="150px" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" text link @click="fnView(row)">
              查看最新信息
            </el-button>
          </template>
        </el-table-column>
      </layout-table>
    </layout-card>
    <view-info
      v-model:visible="data.viewDialog.visible"
      :info="data.viewDialog.info"
    />
  </div>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { reactive } from "vue";
import {
  getRiskAnalysisRecordList,
  getRiskAnalysisRecordView,
} from "@/request/continuous_improvement.js";
import {
  getIdentifyingPartsListAll,
  getRiskPointListAllById,
} from "@/request/risk_control.js";
import ViewInfo from "./components/view.vue";

const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getRiskAnalysisRecordList, { key: "list" });
const data = reactive({
  unitList: [],
  partsList: [],
  viewDialog: {
    visible: false,
    info: {},
  },
});
const fnGetUnitList = async () => {
  const resData = await getRiskPointListAllById({
    DEPARTMENT_ID: "",
  });
  data.unitList = resData.unitList;
};
const fnGetPartsList = async () => {
  searchForm.value.IDENTIFICATION_ID = "";
  const resData = await getIdentifyingPartsListAll({
    RISK_UNIT_ID: searchForm.value.RISK_UNIT_ID,
  });
  data.partsList = resData.partsList;
};
fnGetUnitList();
const fnView = async (row) => {
  const resData = await getRiskAnalysisRecordView({
    RISKPOINT_ANALYSIS_ID: row.riskpoint_analysis_id,
  });
  data.viewDialog.visible = true;
  data.viewDialog.info = resData.form;
};
const fnSpanMethod = ({ rowIndex, columnIndex }) => {
  const arr = [0, 1, 2, 14];
  if (arr.includes(columnIndex)) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
</script>

<style scoped></style>
