<template>
    <el-dialog v-model="dialogVisible" title="添加明细" width="30%">
        <el-form :model="detailsForm" label-width="100px">
            <el-row>
                <el-col>
                    <el-form-item label="金蝶字段">
                        <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="第三方字段">
                        <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="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialogVisible = ref(false)
const detailsForm = ref({
    kingdeeField: '',
    isSpotNumber: true,
    isSpotName: true,
    isDetailField: true,
    thirdPartyField: '',
})

const onCancel = () => { dialogVisible.value = false }
const onConfirm = () => {
    console.log(typeof detailsForm.value);
    console.log(JSON.stringify(detailsForm.value), 'Json');

    dialogVisible.value = false
}

defineExpose({
    dialogVisible
})
</script>