<!-- 外层新增弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.diaShow" :title="props.title" :before-close="handleClose" draggable>
      <el-form :model="form" :label-position="right" label-width="100px">
        <el-form-item required :rules="[
          { required: true, message: '请选择隐患等级', trigger: 'blur' }
        ]" prop="yhLv" label="隐患等级：">
          <el-select v-model="form.yhLv">
            <el-option v-for="item in D_DBZ_YHDJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item required :rules="[
          { required: true, message: '请选择隐患类别', trigger: 'blur' }
        ]" prop="yhLv" label="隐患类别：">
          <el-select v-model="form.yhLv">
            <el-option v-for="item in D_DBZ_YHDJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item required :rules="[
          { required: true, message: '请选择排查人', trigger: 'blur' }
        ]" prop="yhLv" label="排查人：">
          <el-select v-model="form.yhLv">
            <el-option v-for="item in D_DBZ_YHDJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item required :rules="[{ required: true, message: '请选择分类', trigger: 'blur' }]" prop="yhLv" label="分类：">
          <el-select v-model="form.yhLv">
            <el-option v-for="item in D_DBZ_YHDJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="排查内容：">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="问题描述：">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="handleClose">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  onUpdated,
  inject,
  getCurrentInstance
} from "vue";
import VerifyPassWordTip from "@/components/verifyPassWordTip.vue";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();

const { D_DBZ_YHDJ, D_BZ_SF, NSFBXSCTP, NJCXLY, NYHBZ } = proxy.$dict(
  "D_DBZ_YHDJ",
  "D_BZ_SF",
  "NSFBXSCTP",
  "NJCXLY",
  "NYHBZ"
);
// 数据
const form = ref({
  name: ""
});
const props = defineProps({
  diaShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  xgName: {
    type: String,
    default: ""
  }
});
const isShowTip = ref(false);
const emits = defineEmits(["changeVi"], ["save"], ["saveItem"]);
// 控制确认弹出框的展示
const confirmShow = ref(false);
const title = ref("");

// 方法
// 关闭弹窗
const closeDialog = () => {
  emits("changeVi", false);
  form.value.name = "";
};
const changePasswordTip = (isShow) => {
  if (isShow) {
    isShowTip.value = true;
  } else {
    // isShowTip.value = false;
  }
};
// 保存
const handleSave = () => {
  confirmShow.value = true;
  if (form.value.name === "") {
    return alert("输入框不能为空哦！");
  }
  // emits('saveItem',form.value.name)
  emits("save", form.value.name);
  form.value.name = "";
  emits("changeVi", false);
};
// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      form.value.name = "";
      emits("changeVi", false);
    })
    .catch(() => {
      // catch error
    })

};
// 控制新增和修改取消弹出框的显示
const changeNvi = (val) => {
  confirmShow.value = val;
};
// 控制新增和修改确认
// const changeYvi = (val)=> {

//   confirmShow.value = val
// }
// // 点击确认后清空
// const clearInput = (val)=> {
//   form.value.name = val
// }

onMounted(() => {
  // emitter.on('my-event',(id) => {
  // })
});

onUpdated(() => {
  form.value.name = props.xgName;
});
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 100%;
}

.el-form {
  flex-wrap: wrap;
}
</style>