<template>
    <el-drawer v-model="drawerVisible" size="60%">
        <template #header>
            <span>新增字段</span>
            <el-link :underline="false" icon="PictureRounded" style="margin-right: 10px">流程图</el-link>
        </template>
        <!-- <template #header>
            <span>新增字段</span>
            <el-button type="primary" @click="addDetailRef.dialogVisible = true">新增明细</el-button>
        </template> -->
        <el-form :model="fieidForm" label-width="100px" style="padding: 0 20px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="第三方标识">
                        <el-input v-model="fieidForm.docType" placeholder="请输入第三方标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="金碟标识">
                        <el-input v-model="fieidForm.sformId" placeholder="请输入金碟标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="名称">
                        <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-divider />
                <span style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">金蝶字段相关明细</span>
                <el-col>
                    <el-form-item label="插件地址">
                        <el-input type="textarea" :rows="4" v-model="fieidForm.plugInUrl" placeholder="请输入插件地址" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="SQL语句">
                        <el-input type="textarea" :rows="4" v-model="fieidForm.customSql" placeholder="请输入SQL语句" />
                    </el-form-item>
                </el-col>
                <el-divider />
                <el-col>
                    <el-form-item label="金蝶字段">
                        <el-input v-model="fieidForm.kingdeeFiledDetail.kingdeeField" placeholder="请输入金蝶字段" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是点编码">
                        <el-switch v-model="fieidForm.kingdeeFiledDetail.isSpotNumber" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是点名称">
                        <el-switch v-model="fieidForm.kingdeeFiledDetail.isSpotName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否是明细">
                        <el-switch v-model="fieidForm.kingdeeFiledDetail.isDetailField" />
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="第三方字段">
                        <el-input v-model="fieidForm.kingdeeFiledDetail.thirdPartyField" placeholder="请输入第三方字段" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider />
        <relevant-details></relevant-details>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-drawer>

    <add-details ref="addDetailRef"></add-details>
</template>

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

const drawerVisible = ref(false)
const addDetailRef = ref()

const fieidForm = ref({
    sformId: '',
    docType: '',
    name: '',
    flag: '-1',
    linkFsIdName: '',
    pushRule: '',
    fathersFormId: '',
    entryIdName: '',
    plugInUrl: '',
    customSql: '',
    kingdeeFiledDetail: {
        kingdeeField: '',
        thirdPartyField: '',
        isSpotNumber: true,
        isSpotName: true,
        isDetailField: true,
    }
})

const onConfirm = () => {
    JSON.stringify(fieidForm.value.kingdeeFiledDetail)
    addCommonConfig(fieidForm.value).then((res: any) => {
        console.log(res);
    })
    // drawerVisible.value = false
}

const onCancel = () => {
    drawerVisible.value = false
}

defineExpose({
    drawerVisible
})
</script>

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