<template>
    <el-dialog v-model="dialogVisible" :title="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>
                    <el-form-item label="名称" prop="erpName">
                        <el-input v-model="detailsForm.erpName" placeholder="请输入名称" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="字段类型" prop="type">
                        <el-select v-model="detailsForm.type" placeholder="请选择类型" @change="handleChange">
                            <el-option label="文本" value="文本" />
                            <el-option label="数值" value="数值" />
                            <el-option label="基础资料" value="基础资料" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="detailsForm.type === '基础资料'">
                    <el-form-item label="检索字段" prop="indexField">
                        <el-input v-model="detailsForm.indexField" placeholder="请输入检索字段" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="是否是明细" prop="isDetailField">
                        <el-switch v-model="detailsForm.isDetailField" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="MES字段" prop="thirdPartyField">
                        <el-input v-model="detailsForm.thirdPartyField" placeholder="请输入MES字段" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="名称" prop="mesName">
                        <el-input v-model="detailsForm.mesName" 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', 'editDetails'])

const dialogVisible = ref(false)
const detailRef = ref()
const title = ref('添加明细')
const detailsForm = ref({
    kingdeeField: '',
    type: '',
    erpName: '',
    mesName: '',
    isDetailField: false,
    thirdPartyField: '',
    indexField: ''
})

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

// 更新select的值
const handleChange = (value: any) => {
    if (value != '基础资料') detailsForm.value.indexField = ''
    else detailsForm.value.indexField = 'FNumber'
}

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

const handleClose = () => {
    // detailRef.value?.resetFields()
    detailsForm.value = {
        kingdeeField: '',
        type: '',
        erpName: '',
        mesName: '',
        isDetailField: false,
        thirdPartyField: '',
        indexField: ''
    }
    dialogVisible.value = false
}


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