<!-- 外层新增弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.diaShow" :title="props.title" :before-close="handleClose" width="30%" draggable>
      <el-form :model="form">
        <el-form-item label="名称（必填）" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="form.xh" autocomplete="off" />
        </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, getCurrentInstance } from "vue";
import confirm from "./confirm.vue";
const { proxy } = getCurrentInstance();
// 数据
const form = ref({
  name: ""
});
const props = defineProps({
  diaShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "修改"
  },
  xgName: {
    type: String,
    default: ""
  },
  diaShow: {
    type: Object,
    default: {}
  }
});
const emits = defineEmits(["changeVi"], ["save"]);
// 控制确认弹出框的展示
const confirmShow = ref(false);
const title = ref("");

// 方法
// 关闭弹窗
const closeDialog = () => {
  emits("changeVi", false);
  form.value.name = "";
};
// 保存
const handleSave = () => {
  confirmShow.value = true;
  if (form.value.name === "") {
    return alert("输入框不能为空哦！");
  }
  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(() => {

});

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

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

::v-deep .el-dialog__body {
  height: 100px !important;
}

::v-deep .el-form {
  display: block !important;
}

::v-deep .el-dialog .el-dialog__body {
  height: 100px !important;
}
</style>