<template>
  <el-row :gutter="24">
    <el-col
      :span="
        hiddenType === 'unqualified' || hiddenType === 'otherHidden' ? 12 : 24
      "
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24" v-if="hiddenType === 'unqualified'">
            <el-form-item label="检查内容" prop="CHECK_CONTENT">
              <el-input
                :model-value="info.CHECK_CONTENT"
                disabled
                type="textarea"
                autosize
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患部位" prop="HIDDENPART">
              <el-input
                v-model="form.HIDDENPART"
                placeholder="请输入内容"
                @blur="fnGetHiddenDangerDatabaseList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患描述" prop="HIDDENDESCR">
              <el-input
                v-model="form.HIDDENDESCR"
                placeholder="请输入内容"
                type="textarea"
                :autosize="{ minRows: 3 }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患级别" prop="HIDDENLEVEL">
              <el-select
                v-model="form.HIDDENLEVEL"
                @change="
                  form.HIDDENLEVEL === 'hiddenLevel0002'
                    ? (form.RECTIFICATIONTYPE = '2')
                    : null
                "
              >
                <el-option
                  v-for="item in hazardLevelList"
                  :key="item.BIANMA"
                  :label="item.NAME"
                  :value="item.BIANMA"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="info.BAO_BAO_TYPE === '1'">
            <el-form-item label="隐患类别" prop="HIDDEN_CATEGORY">
              <el-select v-model="form.HIDDEN_CATEGORY">
                <el-option
                  v-for="item in hazardCategoriesList"
                  :key="item.DICTIONARIES_ID"
                  :label="item.NAME"
                  :value="item.DICTIONARIES_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患类型" prop="HIDDENTYPE">
              <layout-hidden-danger-type
                v-model="form.HIDDENTYPE"
                ref="hiddenDangerTypeRef"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患图片" prop="hiddenImgs">
              <layout-upload
                v-model:file-list="form.hiddenImgs"
                list-type="picture-card"
                accept=".jpg,.jpeg,.png"
                :limit="99"
                delete-to-server
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患视频" prop="videoFiles">
              <layout-upload
                v-model:file-list="form.videoFiles"
                accept=".mp4"
                :size="50"
                @preview="fnVideoPreview"
              >
                <template #tip>只能上传mp4文件，且不超过50M</template>
              </layout-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患处置" prop="RECTIFICATIONTYPE">
              <el-radio-group v-model="form.RECTIFICATIONTYPE">
                <el-radio
                  :disabled="form.HIDDENLEVEL === 'hiddenLevel0002'"
                  label="1"
                >
                  立即整改
                </el-radio>
                <el-radio label="2">限期整改</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <template v-if="form.RECTIFICATIONTYPE === '1'">
            <el-col :span="24">
              <el-form-item prop="RECTIFYDESCR" label="整改描述">
                <el-input
                  v-model="form.RECTIFYDESCR"
                  placeholder="请输入内容"
                  type="textarea"
                  :autosize="{ minRows: 3 }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="整改后图片" prop="rectifyImgs">
                <layout-upload
                  v-model:file-list="form.rectifyImgs"
                  list-type="picture-card"
                  accept=".jpg,.jpeg,.png"
                  :limit="99"
                  delete-to-server
                />
              </el-form-item>
            </el-col>
          </template>
          <template v-if="form.RECTIFICATIONTYPE === '2'">
            <el-col :span="24">
              <el-form-item prop="RECTIFICATIONDEADLINE" label="整改期限">
                <el-date-picker
                  v-model="form.RECTIFICATIONDEADLINE"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="整改部门" prop="RECTIFICATIONDEPT">
                <layout-department
                  v-model="form.RECTIFICATIONDEPT"
                  @update:model-value="form.RECTIFICATIONOR = ''"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="整改人" prop="RECTIFICATIONOR">
                <el-select v-model="form.RECTIFICATIONOR">
                  <el-option
                    v-for="item in data.rectifyUserList"
                    :key="item.USER_ID"
                    :label="item.NAME"
                    :value="item.USER_ID"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </el-col>
    <el-col
      :span="12"
      v-if="hiddenType === 'unqualified' || hiddenType === 'otherHidden'"
    >
      <div
        v-for="item in data.list"
        :key="item.HIDDEN_LIBRARY_ID"
        class="item"
        @click="fnChoice(item)"
      >
        <el-descriptions :column="1" border>
          <el-descriptions-item label="风险单元名称">
            {{ item.RISK_UNIT_NAME }}
          </el-descriptions-item>
          <el-descriptions-item label="隐患部位">
            {{ item.HIDDEN_PART }}
          </el-descriptions-item>
          <el-descriptions-item label="隐患描述">
            {{ item.INSPECTION_BASIS }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-col>
  </el-row>
  <layout-video
    v-model:visible="data.videoDialog.visible"
    :src="data.videoDialog.src"
  />
</template>

<script setup>
import LayoutDepartment from "@/components/department/index.vue";
import LayoutHiddenDangerType from "@/components/hazard_type/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import LayoutVideo from "@/components/video/index.vue";
import { reactive, ref, watchEffect } from "vue";
import { useVModel } from "@vueuse/core";
import { getHiddenDangerDatabaseList } from "@/request/hazard_investigation.js";
import {
  layoutFnGetHazardCategories,
  layoutFnGetHazardLevel,
} from "@/assets/js/data_dictionary.js";
import { getUserListAll } from "@/request/data_dictionary.js";
import useFormValidate from "@/assets/js/useFormValidate.js";

defineOptions({
  name: "LayoutHiddenAdd",
});
const props = defineProps({
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  info: {
    type: Object,
    default: () => ({}),
  },
  // unqualified 清单检查不合格隐患
  // otherHidden 清单检查其他隐患
  // ledger 隐患台账
  hiddenType: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:form"]);
const form = useVModel(props, "form", emits);
const rules = {
  HIDDENPART: [{ required: true, message: "请输入隐患部位", trigger: "blur" }],
  HIDDENDESCR: [{ required: true, message: "请输入隐患描述", trigger: "blur" }],
  HIDDENLEVEL: [
    { required: true, message: "请选择隐患级别", trigger: "change" },
  ],
  HIDDEN_CATEGORY: [
    { required: true, message: "请选择隐患类别", trigger: "change" },
  ],
  HIDDENTYPE: [
    { required: true, message: "请选择隐患类型", trigger: "change" },
  ],
  hiddenImgs: [
    { required: true, message: "请上传隐患图片", trigger: "change" },
  ],
  RECTIFICATIONTYPE: [
    { required: true, message: "请选择隐患处置", trigger: "change" },
  ],
  RECTIFYDESCR: [
    { required: true, message: "请输入整改描述", trigger: "blur" },
  ],
  rectifyImgs: [
    { required: true, message: "请上传整改后图片", trigger: "change" },
  ],
  RECTIFICATIONDEADLINE: [
    { required: true, message: "请选择整改期限", trigger: "change" },
  ],
  RECTIFICATIONDEPT: [
    { required: true, message: "请选择整改部门", trigger: "change" },
  ],
  RECTIFICATIONOR: [
    { required: true, message: "请选择整改人", trigger: "change" },
  ],
};
const formRef = ref(null);
const hiddenDangerTypeRef = ref(null);
const data = reactive({
  list: [],
  rectifyUserList: [],
  videoDialog: {
    visible: false,
    src: "",
  },
});
const fnVideoPreview = (event) => {
  if (event.url) {
    data.videoDialog.visible = true;
    data.videoDialog.src = event.url;
  }
};
const fnGetHiddenDangerDatabaseList = async () => {
  if (props.hiddenType !== "unqualified" && props.hiddenType !== "otherHidden")
    return;
  if (!form.value.HIDDENPART) return;
  const resData = await getHiddenDangerDatabaseList({
    RISK_UNIT_NAME: props.info.RISKUNITNAME,
    HIDDEN_PART: form.value.HIDDENPART,
  });
  data.list = resData.varList;
};
const fnChoice = (item) => {
  form.value.HIDDENPART = item.HIDDEN_PART;
  form.value.HIDDENDESCR = item.INSPECTION_BASIS;
  form.value.HIDDENLEVEL = "hiddenLevel0001";
  form.value.HIDDENTYPE = [
    item.HIDDEN_TYPE_ONE,
    item.HIDDEN_TYPE_TWO,
    item.HIDDEN_TYPE_THREE,
  ];
};
const fnRectificationDepartmentChange = async (event) => {
  const resData = await getUserListAll({
    DEPARTMENT_ID: event,
  });
  data.rectifyUserList = resData.userList;
};
const fnReset = () => {
  formRef.value.resetFields();
  data.list = [];
  data.rectifyUserList = [];
};
const fnFormValidate = async () => {
  await useFormValidate(formRef);
};
const fnHiddenDangerTypeLabel = () => {
  return hiddenDangerTypeRef.value.getCheckedNodes();
};
defineExpose({
  reset: fnReset,
  formValidate: fnFormValidate,
  hiddenDangerTypeLabel: fnHiddenDangerTypeLabel,
});
const hazardLevelList = await layoutFnGetHazardLevel();
const hazardCategoriesList = await layoutFnGetHazardCategories();
watchEffect(() => {
  if (form.value.RECTIFICATIONDEPT)
    fnRectificationDepartmentChange(form.value.RECTIFICATIONDEPT);
});
</script>

<style scoped lang="scss">
.item {
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  padding: 10px 0;

  &:first-child {
    padding-top: 0;
  }
}
</style>
