<template>
  <div style="width: 590px; height: 120px; overflow: auto">
    <lt-a-form contendPadding="0px" style="border-width: 0px" :isOutline="true">
      <a-form ref="refForm" :inline="false" :model="form" :rules="rules" layout="horizontal" :labelCol="{ span: 6 }"
        style="width:100%">
        <a-row style="width:100%">
          <a-col :span="24">
            <a-form-item label="模板名称" name="ModelName">
              <a-input v-model:value="form.ModelName"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="padding: 5px;text-align:center;display:flex">
          <div style="margin:auto">
            <a-button type="primary" v-on:click="handleConfirm" style="margin-top: 8px; margin-bottom: 8px" html-type="submit">
              <template #icon>
                <check-outlined />
              </template>
              确认 </a-button>
            <a-button v-on:click="handleCancel" style="margin-left: 10px;">
              <template #icon>
                <close-outlined />
              </template>
              取消 </a-button>
          </div>
        </a-row>
      </a-form>
    </lt-a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue"
import { Modal } from "ant-design-vue";

import { Form } from 'ant-design-vue';
const useForm = Form.useForm;


const currentInstance = getCurrentInstance()

const emits = defineEmits(["OnOK","OnCancel"])
const visible = ref(true)

const form = reactive({
  ModelName: "",
})
const dlgfullscreen = ref(false)
const rules = reactive({
  ModelName: [
    {
      required: true,
      message: "不能为空",
    },
  ],
})

const { validate } = useForm(form, rules);

const handleConfirm = function (value:any) {
  validate()
    .then(() => {
      emits("OnOK", form);
    })
    .catch(err => {
      Modal.warning({
        title: "警告",
        content: "请输入模板信息"
      })
    });
}
const handleCancel = function () {
  emits("OnCancel", form);
}
</script>