<template>
    <el-dialog v-model="props.imageServiceDialog" :title="title" width="30%" :before-close="handleClose">
        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
            <el-form-item prop="name" label="镜像名">
                <el-input v-model="formData.name" placeholder="请输入镜像名" />
            </el-form-item>
            <el-form-item prop="contextPath" label="服务路径">
                <el-input v-model="formData.contextPath" placeholder="请输入服务路径" />
            </el-form-item>
            <el-form-item prop="describe" label="描述">
                <el-input v-model="formData.describe" placeholder="请输入描述" type="textarea" />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { ruleProps } from '../interface/index'

const props = defineProps({
    imageServiceDialog: {
        type: Boolean,
        require: true
    }
})

const emits = defineEmits(['update:imageServiceDialog', 'imageServiceData'])

const formData = ref<ruleProps>({
    id: '',
    name: '',
    contextPath: '',
    describe: '',
})

const formRef = ref()
const title = ref('新增服务镜像')

const rules = ref({
    name: [{ required: true, message: '请输入镜像名', trigger: 'blur' }],
    // contextPath: [{ required: true, message: '请输入服务路径', trigger: 'blur' }],
})

const handleClose = () => {
    formRef.value?.resetFields()
    formData.value = {
        id: '',
        name: '',
        contextPath: '',
        describe: '',
    }
    emits('update:imageServiceDialog', false)
}

const onConfirm = () => {
    formRef.value?.validate((valid: Boolean, fields: any) => {
        if (valid) {
            emits('imageServiceData', formData.value)
        } else {
            console.log('error submit!', fields)
        }
    })
}

defineExpose({
    formData,
    title
})
</script>
 
<style lang = "scss" scoped>
</style>