<template>
  <div>
    <el-dialog v-model="formDiaShow" :title="props.title" width="420px" :before-close="handleClose">
      <el-form ref="ruleFormRef" :model="formData" label-width="80px" :rules="rules">
        <el-form-item label="检查人" prop="userName">
          <el-input
            v-model="formData.userName"
            style="width: 335px"
            clearable
            placeholder="请选择人员"
            readonly
            @click.stop.prevent="chooseUserVisible = true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="检查时间" prop="checkTime">
          <el-date-picker
            v-model="formData.checkTime"
            type="datetime"
            style="width: 335px"
            placeholder="选择日期和时间"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="被检单位" prop="inspectedUnitId">
          <el-input v-model="formData.inspectedUnitId" clearable readonly style="width: 337px">
            <template #append>
              <el-button class="cursor" @click="ChooesDdld">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="被检场所" prop="objId">
          <el-select v-model="formData.objId" clearable style="width: 337px" placeholder="请选择">
            <el-option v-for="item in csmclist" :key="item" :label="item.placename" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="被检单位" prop="inspectedUnitName">
          <el-input v-model="formData.inspectedUnitName" readonly clearable style="width: 335px">
            <template #append> <el-button class="cursor" @click="check('02')">选择</el-button></template>
          </el-input>
        </el-form-item>
        <el-form-item label="被检对象" prop="inspectedObjName">
          <el-input v-model="formData.inspectedObjName" style="width: 335px"></el-input>
        </el-form-item> -->
        <!-- 
        <el-form-item label="责任部门">
          <el-input v-model="formData.responsibleDeptName" style="width: 335px"></el-input>
        </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>
    <!-- 选择人员 -->
    <ChooseUser
      v-model="chooseUserVisible"
      :data="memberList"
      :deptId="deptId"
      :leaderid="leaderid"
      @choosedUsers="getSonValue"
    ></ChooseUser>
    <!-- 选择单位 -->
    <Dwhasbj
      v-if="showdwDept"
      :showDdld="showdwDept"
      @closezzjg="closezzjg"
      @listdata="getDeptValue"
      :zzlx="zzlx"
      :searchType="'03'"
      :Isstrictly="true"
    />
  </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 ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import { ElMessageBox, ElMessage } from "element-plus"

import Dwhasbj from "@/components/MyComponents/ChooseDept/dwhasbj.vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
const emits = defineEmits(["close"])
const ruleFormRef = ref()
const saveloading = ref(false)
const formDiaShow = ref(true)
const props = defineProps({
  tjDiaShow: {
    type: Boolean,
    default: false
  },
  tjId: String,
  title: String
})
const rules = {
  userName: [{ required: true, message: "请选择检查人", trigger: "blur" }],
  checkTime: [{ required: true, message: "请选择时间", trigger: "change" }],
  inspectedUnitId: [{ required: true, message: "请选择被检单位", trigger: "change" }],
  objId: [{ required: true, message: "请选择被检对象", trigger: "change" }]
}
// 关闭弹框
const handleClose = () => {
  ElMessageBox.confirm("离开会丢失页面中修改的内容，确认离开吗？")
    .then(() => {
      emits("close")
      console.log("关闭")
    })
    .catch(() => {
      // catch error
    })
}
const formData = ref({
  objId: "",
  userId: "",
  userName: "",
  checkTime: "",
  inspectedUnitId: "",
  inspectedObjName: ""
})
// /** 选择人员弹框 */
const chooseUserVisible = ref(false)
/** 选中的人员 */
const memberList = ref([])
const deptId = ref()
/** 1 */
const leaderid = ref()
/** 选择人确认 */
const getSonValue = val => {
  formData.value.userName = val[0].userName
  formData.value.userId = val[0].id
}

//根据单位ID 查询 场所
function getcsData() {
  postApi({ pageCurrent: 1, pageSize: 9999999, orgid: formData.value.objId }, "/mosty-jcgl/site/querySceneList").then(
    res => {
      console.log(res, "场所雷彪")
      if (res.records) {
        csmclist.value = res.records
      }
    }
  )
}
// 选择单位使用字段
const showdwDept = ref(false)
const csmclist = ref([]) // 场所下拉框数据
// 根据单位查询场所
const deptChange = () => {
  getcsData()
}

//点击所属单位打开弹窗
function ChooesDdld() {
  showdwDept.value = true
}
//关闭所属单位弹窗
const closezzjg = () => {
  showdwDept.value = false
}
// 获取选中的单位数据，并请求场所数据
const getDeptValue = value => {
  console.log(value, "单位")
  formData.value.inspectedUnitId = value.orgName
  if (value.id) {
    deptChange()
  } else {
    csmclist.value = []
  }
}

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

onMounted(() => {})
</script>

<style></style>
