<template>
    <el-drawer v-model="drawerVisible" size="60%" :title="fieldTitle" :before-close="handleClose">
        <el-form :model="fieidForm" ref="fieidRef" :rules="fieidRules" label-width="130px" 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 :span="8">
                    <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 === 'ERP->MES'">
                    <el-form-item label="金蝶主键字段" prop="primaryKeyField">
                        <el-input v-model="fieidForm.primaryKeyField" placeholder="请输入金蝶主键字段" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieidForm.flag === '-1' || fieidForm.flag === 'ERP->MES'">
                    <el-form-item label="MES分录标识">
                        <el-input v-model="fieidForm.mesEntryName" placeholder="请输入MES分录标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieidForm.flag === '-1' || fieidForm.flag === 'ERP->MES'">
                    <el-form-item label="单据分录主键字段">
                        <el-input v-model="fieidForm.entryPrimaryKeyField" placeholder="请输入单据分录主键字段" />
                    </el-form-item>
                </el-col>
                <!-- <el-col></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.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.fatherEntryName" 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 :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="执行步骤">
                        <el-select v-model="fieidForm.isAutoPerform" placeholder="请选择执行步骤">
                            <!-- <el-option label="暂存" value="0"></el-option> -->
                            <el-option label="保存" value="1"></el-option>
                            <el-option label="提交" value="2"></el-option>
                            <el-option label="审核" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="fieidForm.flag === '1' || fieidForm.flag === 'MES->ERP'">
                    <el-form-item label="在事务中">
                        <el-switch v-model="fieidForm.isInTransaction" active-value="1" inactive-value="0" />
                    </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, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addCommonConfig, putCommonConfig } from '@/services/api/systemApi/fieldConfiguration/commonConfig'
import relevantDetails from './relevantDetails.vue';

const props = defineProps({
    currentPage: {
        type: Number,
    },
    pageSize: {
        type: Number,
    }
})
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: '',
    fatherEntryName: 'ERP_SIC',
    fathersFormId: '',
    isInTransaction: '1',
    entryName: '',
    plugInUrl: '',
    customSql: '',
    primaryKeyField: '',
    mesEntryName: '',
    isAutoPerform: '3',
    entryPrimaryKeyField: '',
    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' }],
    primaryKeyField: [{ required: true, message: '', trigger: 'blur' }],
    // flag: [{ required: true, message: '', trigger: 'change' }],
})

const updateCount = ref(0)
// 监听表单数据是否改变
watch(() => fieidForm.value, () => {
    updateCount.value++
}, { deep: true })

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', props.currentPage, props.pageSize)
                        ElMessage({ type: 'success', message: '添加成功' })
                    }
                })
            } else {
                if (JSON.stringify(fieidForm.value.kingdeeFiledDetail) === '[]') return ElMessage({ type: 'warning', message: '金蝶字段相关明细不能为空' })
                JSON.stringify(fieidForm.value.kingdeeFiledDetail)
                putCommonConfig(fieidForm.value).then((res: any) => {
                    if (res.code === 200) {
                        clear()
                        emits('initCommonConfig', props.currentPage, props.pageSize)
                        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: '',
        fatherEntryName: 'ERP_SIC',
        fathersFormId: '',
        isInTransaction: '1',
        entryName: '',
        plugInUrl: '',
        customSql: '',
        primaryKeyField: '',
        mesEntryName: '',
        isAutoPerform: '3',
        entryPrimaryKeyField: '',
        kingdeeFiledDetail: <any>{}
    }
    updateCount.value = 0
    disabled.value = false
    drawerVisible.value = false
}
const handleClose = () => {
    if (fieldTitle.value !== '详情') {
        if (updateCount.value > 0) {
            ElMessageBox.confirm('是否提交已修改的内容?',
                { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => {
                    onConfirm()
                }).catch(() => {
                    clear()
                })
        } else {
            clear()
        }
    } else {
        clear()
    }
}

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

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