<template>
    <el-dialog v-model="showVisiable" title="添加规格属性" width="30%" :before-close="handleClose">
        <el-form ref="formRef" :rules="rules" :model="formData" status-icon label-position="left" label-width="120px"
            style="width: 400px; margin-left: 50px">
            <el-form-item label="BOM编码" prop="bomCode">
                <el-input v-model="formData.bomCode" />
            </el-form-item>
            <el-form-item label="型号" prop="model">
                <el-input v-model="formData.model" />
            </el-form-item>
            <el-form-item label="商品货品名称" prop="productName">
                <el-input v-model="formData.productName" />
            </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

let emits = defineEmits(['clickAdd'])
let showVisiable = ref(false)
let formRef = ref()
let rules = ref({
    bomCode: { required: true, message: '', trigger: 'blur' },
    model: { required: true, message: '', trigger: 'blur' },
    productName: { required: true, message: '', trigger: 'blur' },
})
let formData = ref({
    bomCode: '',
    model: '',
    productName: ''
})

let handleAdd = () => {
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            showVisiable.value = false
            emits('clickAdd', formData.value)
        }
    })
}

let handleClose = () => {
    formData.value = {
        bomCode: '',
        model: '',
        productName: ''
    }
    showVisiable.value = false
}
defineExpose({
    showVisiable,
    formData,
    handleClose
})
</script>
 
<style lang = "scss" scoped>
</style>