<template>
  <el-dialog v-model="props.innerShow" :title="props.title" :before-close="handleClose" width="1000px" :rules="rules"
    append-to-body>
    <el-form ref="formRef" :model="form" label-position="right" label-width="150px" :rules="rules"
      style="width: 100%;display: block;" :inline="true">
      <el-form-item label="模板名称：" prop="tname" style="width: 100%;">
        <el-input v-model="form.tname" placeholder="请输入模板名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="submitForm(formRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, watch, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const rules = {
  tname: { required: true, message: '请输入模板名称', trigger: 'blur' },
}
// 数据
const formRef = ref(null);
const props = defineProps({
  innerShow: Boolean,
  title: {
    type: String,
    default: "新增综合检查模板"
  },
  formValue: {
    type: Object,
    default: {}
  },
});
const emits = defineEmits(["confirm"]);
const form = ref({
  tname: "",
});
// 初始化
onMounted(() => {

});
watch(
  () => props.formValue,
  (val) => {
    form.value = val;
  },
  { deep: true, immediate: true }
);
// 方法
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (props.title == "新增综合检查模板") {
        postApi(form.value, `/mosty-jcgl/zhjcmb/add?tname=${form.value.tname}`).then((res) => {
          ElMessage.success("新增成功");
          emits("confirm");
        });
      } else {
        postApi(form.value, `/mosty-jcgl/zhjcmb/update?id=${form.value.id}&tname=${form.value.tname}`).then((res) => {
          ElMessage.success("修改成功");
          emits("confirm");
        });
      }
    } else {
      return false;
    }
  });
};
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("confirm");
    })
    .catch(() => {
      // catch error
    })

};

</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  color: #000000 !important;
}

.el-form {
  display: block !important;
}
</style>