<template>
  <Dialog
    v-model="diaVisible"
    diaTitle="新增配置"
    :width="500"
    :height="200"
    showFooter
    show-confirm-button
    :confirm-closable="false"
  >
    <div class="form">
      <el-form ref="formRef" :model="formData" label-width="auto">
        <el-form-item label="配置名称" prop="name" :rules="[{ required: true, message: '请输入配置名称', trigger: 'blur' }]">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div>
        <el-button @click="closeFun">取消</el-button>
        <el-button type="primary" @click="confirmFun">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emit = defineEmits(['update:modelValue', 'confirm']);
const diaVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});
const formData = ref<any>({
  name: '',
});
const formRef = ref();

const closeFun = () => {

  formRef.value.resetFields();
  emit('update:modelValue', false);
};
const confirmFun = () => {
  formRef.value.validate((valid:any) => {
    console.log('1054', valid);
    if (valid) {
      emit('confirm', formData.value);
      formRef.value.resetFields();
      emit('update:modelValue', false);
    } else {

      return false;
    }
  });

};
</script>
