<template>
    <el-drawer v-model="drawerVisible" size="60%" :title="fieldTitle" @close="handleClose">
        <!-- <template #header>
            <span>{{ fieldTitle }}</span>
            <el-button type="primary" size="small" @click="addDetailRef.dialogVisible = true"
                style="margin-right: 20px;">新增明细</el-button>
        </template> -->
        <el-form :model="fieidForm" ref="fieidRef" :rules="fieidRules" label-width="100px" style="padding: 0 20px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="第三方标识" prop="docType">
                        <el-input v-model="fieidForm.docType" placeholder="请输入第三方标识" />
                    </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-show="fieidForm.flag === '1'">
                    <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'">
                    <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'">
                    <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'">
                    <el-form-item label="子源单行内码">
                        <el-input v-model="fieidForm.linkFsIdName" placeholder="请输入子源单行内码" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider />
        <relevant-details @detailFormValue="detailFormValue" :kingdeeFiledDetailData="kingdeeFiledDetailData">
        </relevant-details>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-drawer>
</template>

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

const emits = defineEmits(['initCommonConfig'])

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

const fieidForm = ref({
    sFormId: '',
    docType: '',
    name: '',
    flag: '-1',
    linkFsIdName: '',
    pushRule: '',
    fathersFormId: '',
    entryIdName: '',
    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' }],
    // flag: [{ required: true, message: '', trigger: 'change' }],
})

const onConfirm = () => {
    fieidRef.value?.validate((valid: boolean, fields: any) => {
        if (valid) {
            if (fieldTitle.value === '新增字段') {
                JSON.stringify(fieidForm.value.kingdeeFiledDetail)
                addCommonConfig(fieidForm.value).then((res: any) => {
                    if (res.code === 200) {
                        handleClose()
                        emits('initCommonConfig')
                        ElMessage({ type: 'success', message: '添加成功' })
                    }
                })
            } else {
                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) {
                        handleClose()
                        emits('initCommonConfig')
                        ElMessage({ type: 'success', message: '更新成功' })
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const detailFormValue = (Val: any) => {
    fieidForm.value.kingdeeFiledDetail = Val
    console.log(Val);
}

const handleClose = () => {
    // kingdeeFiledDetailData.value = fieidForm.value.kingdeeFiledDetail
    fieidForm.value = {
        sFormId: '',
        docType: '',
        name: '',
        flag: '-1',
        linkFsIdName: '',
        pushRule: '',
        fathersFormId: '',
        entryIdName: '',
        plugInUrl: '',
        customSql: '',
        kingdeeFiledDetail: {}
    }
    drawerVisible.value = false
}

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

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