<template>
    <el-dialog v-model="dialogVisible" :title="title" width="30%" @close="handleClose">
        <el-form :model="fromData" ref="fromRef" :rules="fromRules" label-width="120px">
            <el-row>
                <el-col v-for="(item, index) in fromList" :key="index">
                    <el-form-item :label="item.lable" :prop="item.prop">
                        <el-input v-model="fromData[item.prop]" :type="item.type" :placeholder="'请输入' + item.lable" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="字段类型" prop="fieldType">
                        <el-select v-model="fromData.fieldType" placeholder="请选择" @change="selectChange">
                            <el-option label="文本" value="文本" />
                            <el-option label="数值" value="数值" />
                            <el-option label="精准数值" value="精准数值" />
                            <el-option label="基础资料" value="基础资料" />
                            <el-option label="附件" value="附件" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="fromData.fieldType === '基础资料'">
                    <el-form-item label="检索字段">
                        <el-input v-model="fromData.retrievalField" placeholder="请输入检索字段" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="是否是分录字段" prop="isEntryField">
                        <el-switch v-model="fromData.isEntryField" />
                    </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';
import { fromList } from '../../tableData/configMapTable'
import { createMap, updateMap } from '@/services/api/configMap'
import { ElMessage } from 'element-plus';

const emits = defineEmits(['initMap'])
const dialogVisible = ref(false)
const fromRef = ref()
const title = ref('新增')
const fromData = ref({
    kingdeeCommonConfigId: '',
    kingDeeField: '',
    kingDeeFieldName: '',
    fieldType: '',
    retrievalField: '',
    isEntryField: false,
    thirdPartyField: '',
    thirdPartyFieldName: '',
    sortOrder: '',
    defaultValue: ''
} as any)

// 校验规则
const fromRules = ref({
    kingDeeField: [{ required: true, message: '', trigger: 'blur' }],
    kingDeeFieldName: [{ required: true, message: '', trigger: 'blur' }],
    fieldType: [{ required: true, message: '', trigger: 'change' }],
    // thirdPartyField: [{ required: true, message: '', trigger: 'blur' }],
    // thirdPartyFieldName: [{ required: true, message: '', trigger: 'blur' }],
    sortOrder: [{ required: true, message: '', trigger: 'blur' }]
})

// 确认操作
const onConfirm = () => {
    fromRef.value?.validate((valid: boolean, fields: any) => {
        console.info("fromData", fromData)
        if (valid) {
            if (title.value === '新增') {
                createMap(fromData.value).then((res: any) => {
                    if (res.code === 200) {
                        emits('initMap')
                        handleClose()
                        ElMessage({ type: 'success', message: '添加成功！' })
                    }
                })
            } else {
                updateMap(fromData.value).then((res: any) => {
                    if (res.code === 200) {
                        emits('initMap')
                        handleClose()
                        ElMessage({ type: 'success', message: '修改成功！' })
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const selectChange = (value: any) => {
    if (value === '基础资料') fromData.value.retrievalField = 'FNumber'
    else fromData.value.retrievalField = ''

}

const handleClose = () => {
    fromData.value = {
        kingdeeCommonConfigId: '',
        kingDeeField: '',
        kingDeeFieldName: '',
        fieldType: '',
        retrievalField: '',
        isEntryField: false,
        thirdPartyField: '',
        thirdPartyFieldName: '',
        sortOrder: '',
        defaultValue:'',
    }
    dialogVisible.value = false
}


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