<template>
    <el-dialog v-model="dialogVisible" title="添加明细" width="30%" @close="handleClose">
        <el-form :model="detailsForm" ref="detailRef" :rules="detailRules" label-width="100px">
            <el-row>
                <el-col>
                    <el-form-item label="金蝶字段" prop="kingdeeField">
                        <el-input v-model="detailsForm.kingdeeField" placeholder="请输入金蝶字段" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是点编码">
                        <el-switch v-model="detailsForm.isSpotNumber" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是点名称">
                        <el-switch v-model="detailsForm.isSpotName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是明细">
                        <el-switch v-model="detailsForm.isDetailField" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="第三方字段" prop="thirdPartyField">
                        <el-input v-model="detailsForm.thirdPartyField" placeholder="请输入第三方字段" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

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

const emtis = defineEmits(['addDetails'])

const dialogVisible = ref(false)
const detailRef = ref()
const detailsForm = ref({
    kingdeeField: '测试',
    isSpotNumber: false,
    isSpotName: false,
    isDetailField: false,
    thirdPartyField: '测试1',
})

const detailRules = ref({
    kingdeeField: [{ required: true, message: '', trigger: 'blur' }],
    thirdPartyField: [{ required: true, message: '', trigger: 'blur' }]
})


const onConfirm = () => {
    detailRef.value?.validate((valid: boolean, fields: any) => {
        if (valid) {
            const obj = Object.assign({}, detailsForm.value)
            emtis('addDetails', obj)
            dialogVisible.value = false
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleClose = () => {
    detailRef.value?.resetFields()
    dialogVisible.value = false
}

defineExpose({
    dialogVisible,
    detailsForm
})
</script>