<template>
    <el-drawer v-model="drawerVisible" size="60%" :title="fieldTitle" :before-close="handleClose">
        <el-form :model="fieidForm" ref="fieidRef" :rules="fieidRules" label-width="120px" style="padding: 0 20px"
            :disabled="disabled">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="docType" prop="docType">
                        <el-input v-model="fieidForm.docType" placeholder="请输入docType标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单据唯一标识" prop="sFormId">
                        <el-input v-model="fieidForm.sFormId" placeholder="请输入金碟标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单据名称" prop="name">
                        <el-input v-model="fieidForm.name" placeholder="请输入单据名称" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="同步方向">
                        <el-select v-model="fieidForm.flag" placeholder="请选择">
                            <el-option label="ERP->MES" value="-1"></el-option>
                            <el-option label="MES->ERP" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="分录标识" prop="entryName">
                        <!-- :prop="fieidForm.flag === '1' && fieidForm.flag === 'MES->ERP' ? '' : 'entryName'" -->
                        <el-input v-model="fieidForm.entryName" placeholder="请输入分录标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="子行内码">
                        <el-input v-model="fieidForm.entryIdName" placeholder="请输入子行内码" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="源单标识">
                        <el-input v-model="fieidForm.fathersFormId" placeholder="请输入父标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="下推规则">
                        <el-input v-model="fieidForm.pushRule" placeholder="请输入下推规则" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="子源单行内码">
                        <el-input v-model="fieidForm.linkFsIdName" placeholder="请输入子源单行内码" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="插件地址">
                        <el-input v-model="fieidForm.plugInUrl" type="textarea" :rows="4" placeholder="请输入插件地址" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="自定义Sql">
                        <el-input v-model="fieidForm.customSql" type="textarea" :rows="4" placeholder="请输入自定义Sql" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider />
        <relevant-details @detailFormValue="detailFormValue" :kingdeeFiledDetailData="kingdeeFiledDetailData"
            :fieldTitle="fieldTitle">
        </relevant-details>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
                <el-button type="primary" @click="onConfirm" v-show="fieldTitle !== '详情'">确认</el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addCommonConfig, putCommonConfig } from '@/services/api/systemApi/fieldConfiguration/commonConfig'
import relevantDetails from './relevantDetails.vue';

const emits = defineEmits(['initCommonConfig'])

const disabled = ref(false)
const drawerVisible = ref(false)
const fieidRef = ref()
const fieldTitle = ref('新增字段')

const fieidForm = ref({
    sFormId: '',
    docType: '',
    name: '',
    flag: '-1',
    linkFsIdName: '',
    pushRule: '',
    fathersFormId: '',
    entryIdName: '',
    entryName: '',
    plugInUrl: '',
    customSql: '',
    kingdeeFiledDetail: <any>{}
})
const kingdeeFiledDetailData = ref<any>([])
const fieidRules = ref({
    docType: [{ required: true, message: '', trigger: 'blur' }],
    sFormId: [{ required: true, message: '', trigger: 'blur' }],
    name: [{ required: true, message: '', trigger: 'blur' }],
    entryName: [{ required: true, message: '', trigger: 'blur' }],
    // flag: [{ required: true, message: '', trigger: 'change' }],
})

const onConfirm = () => {
    fieidRef.value?.validate((valid: boolean, fields: any) => {
        if (valid) {
            if (fieldTitle.value === '新增字段') {
                if (JSON.stringify(fieidForm.value.kingdeeFiledDetail) === '{}') return ElMessage({ type: 'warning', message: '金蝶字段相关明细不能为空' })
                JSON.stringify(fieidForm.value.kingdeeFiledDetail)
                addCommonConfig(fieidForm.value).then((res: any) => {
                    if (res.code === 200) {
                        clear()
                        emits('initCommonConfig')
                        ElMessage({ type: 'success', message: '添加成功' })
                    }
                })
            } else {
                if (JSON.stringify(fieidForm.value.kingdeeFiledDetail) === '[]') return ElMessage({ type: 'warning', message: '金蝶字段相关明细不能为空' })
                if (fieidForm.value.flag === 'ERP->MES') fieidForm.value.flag = '-1'
                else fieidForm.value.flag = '1'
                JSON.stringify(fieidForm.value.kingdeeFiledDetail)
                putCommonConfig(fieidForm.value).then((res: any) => {
                    if (res.code === 200) {
                        clear()
                        emits('initCommonConfig')
                        ElMessage({ type: 'success', message: '更新成功' })
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const detailFormValue = (Val: any) => fieidForm.value.kingdeeFiledDetail = Val
const clear = () => {
    kingdeeFiledDetailData.value = []
    fieidForm.value = {
        sFormId: '',
        docType: '',
        name: '',
        flag: '-1',
        linkFsIdName: '',
        pushRule: '',
        fathersFormId: '',
        entryIdName: '',
        entryName: '',
        plugInUrl: '',
        customSql: '',
        kingdeeFiledDetail: {}
    }
    disabled.value = false
    drawerVisible.value = false
}
const handleClose = () => {
    if (fieldTitle.value !== '详情') {
        ElMessageBox.confirm('是否有尚未提交的内容，确认退出?',
            { confirmButtonText: '退出', cancelButtonText: '取消', type: 'warning', }).then(() => {
                clear()
            }).catch(() => { })
    } else {
        clear()
    }
    // if (fieldTitle.value === '新增字段') {
    //     if (JSON.stringify(kingdeeFiledDetailData.value) !== '[]') {
    //         ElMessageBox.confirm('填写内容尚未提交，确认退出?', '明细',
    //             { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => {
    //                 clear()
    //             }).catch(() => { })
    //     } else {
    //         clear()
    //     }
    // } else {
    //     console.log(kingdeeFiledDetailData.value);
    //     console.log(isObjEqual(oldValue.value, kingdeeFiledDetailData.value));
    //     isObjEqual(oldValue.value, kingdeeFiledDetailData.value)
    //     if (!valueBoolean.value) {
    //         ElMessageBox.confirm('填写内容尚未提交，确认退出?', '明细',
    //             { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => {
    //                 clear()
    //             }).catch(() => { })
    //     } else {
    //         clear()
    //     }
    // }
}
const oldValue = ref<any>([])
// const valueBoolean = ref(false)
const oldObj = () => {
    oldValue.value = kingdeeFiledDetailData.value
    oldValue.value.kingdeeField = ''
}
// 判断数据是否改变
// function isObjEqual(obj1: any, obj2: any) {
//     //  Object.getOwnPropertyNames 返回对象所有的属性或对象中属性的个数
//     let aProps = Object.getOwnPropertyNames(obj1);
//     let bProps = Object.getOwnPropertyNames(obj2);
//     //先判断两个数据length
//     if (aProps.length == bProps.length) {
//         //循环拿到数值进行对比
//         aProps.forEach(e => {
//             if (obj1[e] !== obj2[e]) {
//                 console.log('数据改变')
//                 return valueBoolean.value = false
//             } else {
//                 console.log('数据不变')
//                 return valueBoolean.value = true
//             }
//         });
//     } else {
//         console.log('111');

//         return valueBoolean.value = false

//     }
// }

defineExpose({
    drawerVisible,
    fieldTitle,
    fieidForm,
    kingdeeFiledDetailData,
    disabled,
    oldObj
})
</script>

<style scoped>
.el-divider--horizontal {
    margin: 12px 0;
}
</style>