<template>
  <el-dialog
    v-model="visible"
    title="导入排查清单"
    :before-close="fnClose"
    width="70%"
  >
    <el-divider content-position="left">隐患排查清单信息</el-divider>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="清单名称" prop="NAME">
            <el-input v-model="form.NAME" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col v-if="whetherHazards === 1" :span="6">
          <el-form-item
            label="是否包保责任人任务"
            prop="BAO_BAO_TYPE"
            label-width="160px"
          >
            <el-select v-model="form.BAO_BAO_TYPE">
              <el-option
                v-for="item in [
                  { BIANMA: '0', NAME: '否' },
                  { BIANMA: '1', NAME: '是' },
                ]"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.BAO_BAO_TYPE === '1'" :span="6">
          <el-form-item label="任务类型" prop="TASK_TYPE">
            <el-select v-model="form.TASK_TYPE">
              <el-option
                v-for="item in taskTypeList"
                :key="item.DICTIONARIES_ID"
                :label="item.NAME"
                :value="item.DICTIONARIES_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="DEPARTMENT_ID" label="部门">
            <layout-department
              v-model="form.DEPARTMENT_ID"
              @update:model-value="fnDepartmentChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="岗位" prop="POST_ID">
            <el-select v-model="form.POST_ID" @change="fnPostChange">
              <el-option
                v-for="item in data.postList"
                :key="item.POST_ID"
                :label="item.NAME"
                :value="item.POST_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="USER_ID">
            <el-select v-model="form.USER_ID">
              <el-option
                v-for="item in data.userList"
                :key="item.USER_ID"
                :label="item.NAME"
                :value="item.USER_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排查类型" prop="SCREENTYPE">
            <el-select v-model="form.SCREENTYPE">
              <el-option
                v-for="item in troubleshootingTypeList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排查周期" prop="PERIOD">
            <el-select v-model="form.PERIOD">
              <el-option
                v-for="item in troubleshootingCycleList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="清单类型" prop="TYPE">
            <el-select v-model="form.TYPE">
              <el-option
                v-for="item in inventoryTypeList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          v-if="form.TYPE === 'listType0005' || form.TYPE === 'listType0006'"
          :key="form.TYPE"
          :span="6"
        >
          <el-form-item label="排查日期" prop="dates">
            <el-date-picker
              v-model="form.dates"
              :disabled-date="
                form.TYPE === 'listType0006' ? fnDisabledDate : null
              "
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left">导入检查标准文件</el-divider>
    <el-form-item prop="file">
      <layout-upload v-model:file-list="form.file" accept=".xls" />
    </el-form-item>
    <template #footer>
      <el-button @click="fnExportTemplates">导出模板</el-button>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue";
import { useVModels } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import LayoutDepartment from "@/components/department/index.vue";
import {
  layoutFnGetInventoryType,
  layoutFnGetTaskType,
  layoutFnGetTroubleshootingCycle,
  layoutFnGetTroubleshootingType,
} from "@/assets/js/data_dictionary.js";
import { getPostListAll, getUserListAll } from "@/request/data_dictionary.js";
import LayoutUpload from "@/components/upload/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  whetherHazards: {
    type: [String, Number],
    required: true,
    default: "",
  },
});
const VITE_TEMPLATE_URL = import.meta.env.VITE_TEMPLATE_URL;
const emits = defineEmits(["update:visible", "update:form", "submit"]);
const { visible, form } = useVModels(props, emits);
const formRef = ref(null);
const taskTypeList = await layoutFnGetTaskType();
const troubleshootingTypeList = await layoutFnGetTroubleshootingType();
const troubleshootingCycleList = await layoutFnGetTroubleshootingCycle();
const inventoryTypeList = await layoutFnGetInventoryType();
const data = reactive({
  nameValue: "",
  CHECK_CATEGORY_NAME: "",
  CHECK_ITEM_NAME: "",
  standardData: props.standardData,
  itemData: [],
  postList: [],
  importDialogVisible: false,
});

const rules = {
  NAME: [{ required: true, message: "清单名称不能为空", trigger: "blur" }],
  BAO_BAO_TYPE: [
    {
      required: true,
      message: "是否包保责任人任务不能为空",
      trigger: "change",
    },
  ],
  TASK_TYPE: [
    { required: true, message: "任务类型不能为空", trigger: "change" },
  ],
  DEPARTMENT_ID: [
    { required: true, message: "部门不能为空", trigger: "change" },
  ],
  POST_ID: [{ required: true, message: "岗位不能为空", trigger: "change" }],
  USER_IDS: [{ required: true, message: "负责人不能为空", trigger: "change" }],
  USER_ID: [{ required: true, message: "负责人不能为空", trigger: "change" }],
  SCREENTYPE: [
    { required: true, message: "排查类型不能为空", trigger: "change" },
  ],
  PERIOD: [{ required: true, message: "排查周期不能为空", trigger: "change" }],
  TYPE: [{ required: true, message: "清单类型不能为空", trigger: "change" }],
  dates: [{ required: true, message: "排查日期不能为空", trigger: "change" }],
  file: [{ required: true, message: "附件不能为空", trigger: "change" }],
};
const fnDepartmentChange = () => {
  data.postList = [];
  data.userList = [];
  form.value.POST_ID = "";
  form.value.USER_IDS = [];
  form.value.USER_ID = "";
};
const fnPostChange = () => {
  data.userList = [];
  form.value.USER_IDS = [];
  form.value.USER_ID = "";
};
const fnGetPost = async (DEPARTMENT_ID) => {
  const resData = await getPostListAll({ DEPARTMENT_ID });
  data.postList = resData.postList;
};
const fnGetUser = async (POST_ID) => {
  const resData = await getUserListAll({ POST_ID });
  data.userList = resData.userList;
};
const fnClose = () => {
  // form.value.resetFields();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    if (!form.value.file[0]) {
      ElMessage.warning("请上传文件！");
    }
    form.value.FFILE = form.value.file[0].raw;
    form.value.FFILEName = form.value.file[0].name;
    emits("submit", form.value);
    fnClose();
  },
  { atBegin: true }
);
const fnExportTemplates = async () => {
  await ElMessageBox.confirm("确定要下载excel模板吗？", { type: "warning" });
  window.open(
    VITE_TEMPLATE_URL + "/template/hiddenDangerCheckStandardTemplate.xls"
  );
};
watchEffect(() => {
  if (form.value.DEPARTMENT_ID) fnGetPost(form.value.DEPARTMENT_ID);
  if (form.value.POST_ID) fnGetUser(form.value.POST_ID);
});
</script>

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