<template>
  <div>
    <el-dialog v-model="formDiaShow" title="新增隐患" width="620px" :before-close="handleClose">
      <el-form ref="ruleFormRef" :model="formData" label-width="80px" :rules="rules">
        <el-form-item label="隐患描述" prop="pitfallDescribe">
          <el-input
            v-model="formData.pitfallDescribe"
            style="width: 600px"
            clearable
            placeholder="请输入内容"
            type="textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="隐患等级" prop="pitfallLevel">
          <MOSTY.DictRidioAndSelectV2
            v-model="formData.pitfallLevel"
            :dictKey="DICT_TYPE.D_DBZ_YHDJ"
            selectType="select"
            style="width: 600px"
            placeholder="请选择"
            @change="handleDangerLevelChange"
          />
        </el-form-item>
        <el-form-item label="隐患类别" prop="pitfallType">
          <MOSTY.DictTree
            :zdbh="'D_TB_SBYHLB'"
            v-model="formData.pitfallType"
            :placeholder="'请选择隐患类别'"
            style="width: 600px"
          />
        </el-form-item>
        <el-form-item label="隐患图片">
          <MOSTY.Upload
            :widthNumber="width"
            :disabled="props.type == 'view'"
            :limit="3"
            :nopicer="false"
            :isImgOrVideo="true"
            :ShowfileList="false"
            v-model="formData.pics"
            :nameshow="true"
            :gsgfList="['jpg', 'jpeg', 'png', 'gif']"
          >
          </MOSTY.Upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="loading" @click="submit(ruleFormRef)" v-loading="saveloading">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineAsyncComponent, defineProps, defineEmits } from "vue"
import { DICT_TYPE } from "@/components/MyComponents/Dict/const/dict"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessageBox, ElMessage } from "element-plus"

import { getApi, postApi } from "@/api/tobAcco_api.js"

const emits = defineEmits(["close"])
const ruleFormRef = ref()
const formDiaShow = ref(true)
const props = defineProps({
  tjDiaShow: {
    type: Boolean,
    default: false
  },
  id: String,
  rowData: {
    type: Object,
    default: {}
  }
})
const rules = {
  pitfallDescribe: [{ required: true, message: "隐患描述不能为空", trigger: "blur" }],
  pitfallLevel: [{ required: true, message: "隐患等级不能为空", trigger: "change" }],
  pitfallType: [{ required: true, message: "隐患类别不能为空", trigger: "change" }]
}
// 表单数据
const formData = ref({
  founderId: "", // 发现人ID
  founderName: "", // 发现人名称
  founderTime: "", // 发现时间
  objtype: "S", // 类别，默认为场所
  objname: "", // 对象名称
  belongDeptid: "", // 隐患所属部门编码
  belongDeptname: "", // 隐患所属部门
  pitfallDescribe: "", // 隐患描述
  pitfallLevel: "", // 隐患等级
  pics: [], // 隐患图片
  pitfallType: "", // 隐患类别
  jcId: "" // 随机检查ID检查ID
})

// 关闭弹框
const handleClose = () => {
  ElMessageBox.confirm("离开会丢失页面中修改的内容，确认离开吗？")
    .then(() => {
      emits("close")
      console.log("关闭")
    })
    .catch(() => {
      // catch error
    })
}
const handleDangerLevelChange = (value, option) => {
  console.log(value, option)
  // formData.value.dangerLevel = value
  // formData.value.dangerLevelName = option?.label || ""
}

// 保存
const submit = async ruleFormRef => {
  // saveloading.value = true
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      formData.value.pics = formData.value.pics.join(",")
      console.log("保存", formData.value)
      // let params = {
      //   ...formData.value
      // }
      postApi(formData.value, "/mosty-jcgl/gwzc/addGwzcCheckLogPCYh")
        .then(res => {
          console.log("保存成功", res)
          ElMessage.success("保存成功")
          // 通知父组件关闭弹窗
          emits("close")
          emits("refresh")
          emits("backRefresh")
        })
        .catch(err => {
          ElMessage.error(err)
        })
    } else {
      ElMessageBox.error("请输入必填项!")
      saveloading.value = false
    }
  })
}

onMounted(() => {
  console.log(props.rowData, "props.rowData")
  formData.value.jcId = props.rowData.id
  formData.value.founderId = props.rowData.userid
  formData.value.founderName = props.rowData.username
  formData.value.founderTime = props.rowData.addtime
  formData.value.objname = props.rowData.objname
  formData.value.belongDeptid = props.rowData.deptId
  formData.value.belongDeptname = props.rowData.deptname
  console.log(formData.value.checkId, "formData.value.checkId")
})
</script>

<style></style>
