<template>
    <info-dialog
        :options="options"
        @closeDialog="closeDialog"
        @confirmDialog="confirmDialog"
    >
        <div class="approvalDialog">
            <!--单点审批(自定义审批人)--> <!--单点审批(指定审批人)-->
            <infoForm
                ref="approvalFormRef"
                :key="keyUp"
                :config="config"
                :modelData="modelData.data"
            >
                <template #crossEnable>
                    <!--审批流程管理中自定义审批流程-->
                    <div v-if="modelData.data.approvalProcessType==='APPROVAL_FLOW'">
                        <pre style="font-size: 14px; ">{{ $t('approver') }}   </pre>
                        <pre style="font-size: 12px; color:#787879 ; line-height: 45px">
                            {{ $t('accordingTo') }} "{{
                                modelData.data.approvalFlowName
                            }}" {{ $t('approvalTips2') }}</pre>
                    </div>
                    <!--审批流程管理中自定义审批流程-->
                    <div v-else-if="modelData.data.approvalProcessType==='THIRD_SITE'">
                        <pre style="font-size: 14px; ">{{ $t('approver') }}   </pre>
                        <pre style="font-size: 12px; color:#787879 ; line-height: 45px">
                            {{ $t('approverTips') }}
                        </pre>
                    </div>
                </template>
                <template #crossTenantEnabled>
                    <!--审批流程管理中自定义审批流程-->
                    <div v-if="modelData.data.crossTenantApprovalProcessType === 'APPROVAL_FLOW'">
                        <pre style="font-size: 14px; ">{{ $t('approver') }}   </pre>
                        <pre style="font-size: 12px; color:#787879 ; line-height: 45px">
                        {{ $t('accordingTo') }} "{{
                                modelData.data.crossTenantApprovalFlowName
                        }}" {{ $t('approvalTips2') }}</pre>
                    </div>
                    <!--审批流程管理中自定义审批流程-->
                    <div v-else-if="modelData.data.crossTenantApprovalProcessType === 'THIRD_SITE'">
                        <pre style="font-size: 14px; ">{{ $t('approver') }}   </pre>
                        <pre style="font-size: 12px; color:#787879 ; line-height: 45px">
                            {{ $t('approverTips') }}
                        </pre>
                    </div>
                </template>
            </infoForm>
        </div>
    </info-dialog>
    <user-list
        ref="userRef"
        :tableOptions="{
            chooseOne: true,
            mutiSelect: false
        }"
        @selectData="selectData"
    />
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import infoDialog from '../../components/infoDialog/index.vue'
import infoForm from '../../components/infoForm/infoForm.vue'
import { FormConfig } from '../../components/form/formConfig'
import { serverApi, ObjectInterface, getModelApproval, getCrossTenantModuleConfig } from '../../script/index'
import approverApi from './api/index'
import userList from './userList.vue'
export default defineComponent({
    components: {
        infoDialog,
        infoForm,
        userList
    },
    props: {
        moduleConfigApi: {
            type: Object,
            default: () => {}
        },
        supplyData: { // 补充的信息 如：数据提供方配置
            type: Object,
            default: () => {}
        }
    },
    emits: ['close', 'confirmDialog'],
    setup (props, ctx) {
        const approvalFormRef = ref()
        const model = ref()
        const approvalFlowName = ref()
        const modelData = reactive({
            data: {
                'approvalFlowId': '',
                'approvalFlowName': '',
                'approvalProcessType': '',
                'approveOrgId': '',
                'approveOrgName': '',
                'approverId': '',
                'approverName': '',
                'approverTenantId': '',
                'approverTenantName': '',
                'crossTenantApprovalFlowId': '',
                'crossTenantApprovalFlowName': '',
                'crossTenantApprovalProcessType': '',
                'crossTenantApproverId': '',
                'crossTenantApproverName': '',
                'crossTenantApproverOrgId': '',
                'crossTenantApproverOrgName': '',
                'crossTenantApproverTenantId': '',
                'crossTenantApproverTenantName': '',
                'ids': [],
                'isCrossTenant': false,
                'param': {},
                'publishStatus': '',
                'submitApprovalDesc': '',
                'submitApprovalDescUrl': '',
                supplyData: {} as any
            }
        })
        const approvalProcessTypes = [{
            label: 'singlePointApprovalCustomize',
            value: 'SINGLE_POINT_APPROVAL_CUSTOMIZE'
        }, {
            label: 'singlePointApprovalAppoint',
            value: 'SINGLE_POINT_APPROVAL_APPOINT'
        }, {
            label: 'approvalFlowManagement',
            value: 'APPROVAL_FLOW'
        }, {
            labe: 'thirdPartyInheritance',
            value: 'THIRD_SITE'
        }]
        const userRef = ref()
        const approvalType = ref('')
        const options = reactive({
            title: 'selectApprover',
            isShowDialog: false,
            width: '60%',
            clickModalClose: false,
            isShowBtn: true
        })
        const keyUp = ref(0)
        const config = new FormConfig({
            ref: 'approvalFormRef',
            size: 'default',
            labelWidth: '168px',
            mode: 'card',
            // disabled:()=> model.value !== 'SINGLE_POINT_APPROVAL_CUSTOMIZE',
            validate: {
                approverName: [{ required: true, message: 'approverCannotBeEmpty', trigger: 'change' }],
            }
        })
        config.setInputRule({
            collapse: () => 'tenantApprovalConfig',
            type: 'infoInput',
            label: 'approver',
            model: 'approverName',
            disabled: () => true,
            placeholder: () => '',
            collShow: () => !!modelData.data.approvalProcessType,
            show: () => ['SINGLE_POINT_APPROVAL_APPOINT', 'SINGLE_POINT_APPROVAL_CUSTOMIZE'].includes(modelData.data.approvalProcessType),
            button: {
                show: true,
                disabled: () => {
                    return modelData.data.approvalProcessType === 'SINGLE_POINT_APPROVAL_APPOINT'
                },
                methods: () => {
                    userRef.value?.showDialog('all', modelData.data.approverId)
                }
            }
        }).setRule({
            type: 'infoSlot',
            slotName: 'crossEnable',
            show: () => ['APPROVAL_FLOW', 'THIRD_SITE'].includes(modelData.data.approvalProcessType),
            style: {
                marginLeft: '-' + config.labelWidth
            }
        })
        config.setInputRule({
            collapse: () => 'crossTenantApprovalConfig',
            type: 'infoInput',
            label: 'tenantName',
            model: 'crossTenantApproverTenantName',
            disabled: () => true,
            collShow: () => modelData.data.isCrossTenant,
            show: () => modelData.data.crossTenantApproverTenantName
        }).setInputRule({
            label: 'approver',
            model: 'crossTenantApproverName',
            type: 'infoInput',
            disabled: () => true,
            show: () => modelData.data.crossTenantApproverName
        }).setInputRule({
            label: 'flowName',
            model: 'crossTenantApprovalFlowName',
            show: () => modelData.data.crossTenantApprovalFlowName,
            disabled: () => true,
            type: 'infoInput'
        }).setRule({
            type: 'infoSlot',
            slotName: 'crossTenantEnabled',
            show: () => ['APPROVAL_FLOW', 'THIRD_SITE'].includes(modelData.data.crossTenantApprovalProcessType),
            style: {
                marginLeft: '-' + config.labelWidth
            }
        })
        config.setSelectRule({
            collapse: () => 'dataProviderApprovalConfig', // 数据提供方配置
            type: 'infoSelect',
            label: 'approvalProcessType',
            model: 'supplyData.approvalProcessType',
            disabled: () => true,
            placeholder: () => '',
            options: () => approvalProcessTypes,
            collShow: () => ['DATA_APPLICATION_DATA_PROVIDER', 'ASSETS_GRANT_DATA_PROVIDER'].includes(modelData.data.supplyData.code) && !!modelData.data.supplyData.enabled
        })
        /* config.setInputRule({
            collapse: () => 'descConfig',
            label: 'applyDesc',
            model: 'submitApprovalDesc',
            inputType: 'textarea',
            type: 'infoInput'
        }).setUploadRule({
            label: 'uploadAttach',
            model: 'submitApprovalDescUrl',
            type: 'infoUpload',
            multiple: false,
            showClear: false,
            autoUpload: true,
            limit: 1,
            // accept: '.xlsx,.xls,.csv',
            trigger: 'upload',
            name: 'file',
            api: '/sys/center/approval/uploadFile',
            showFileList: true,
            success: (response, file, fileList) => {
                uploadSuccess(response)
            },
            error: (response, file, fileList) => {
                uploadError(response)
            }
        })
        // 上传文件成功
        const uploadSuccess = (res) => {
            modelData.data.submitApprovalDescUrl = res.content
            ElMessage.success('上传文件成功')
        }
        // 上传文件失败
        const uploadError = (response) => {
            ElMessage.error(JSON.parse(response.message).message)
        } */
        const selectData = (list: ObjectInterface[]) => {
            modelData.data.approverName = list[0].name
            modelData.data.approverId = list[0].id
            modelData.data.approverTenantName = list[0].tenantName
            modelData.data.approverTenantId = list[0].tenantId
        }
        const currentIndex = ref(0)
        /***
         * 废弃 请使用init
         * 根据参数显示弹窗
         * @param type  上线或者下线 online, offline
         * @param ids
         * @param index 当前是第几行数据，添加loading时候用
         * @param model 当前所属模块
         *         SINGLE_POINT_APPROVAL_CUSTOMIZE: '单点审批(自定义审批人)',
         *         SINGLE_POINT_APPROVAL_APPOINT: '单点审批(指定审批人)',
         *         APPROVAL_FLOW: '审批流程管理中自定义审批流程'
         */
        const showDialog = (type: string, ids: never[], index: number, custom: string) => { // 打开
            serverApi({
                interface: approverApi[custom] || props.moduleConfigApi,
                success: (resp) => {
                    modelData.data.approverName = resp.approverName
                    modelData.data.approverId = resp.approverId
                    approvalType.value = type
                    model.value = resp.approvalProcessType
                    approvalFlowName.value = resp.approvalFlowName // 流程名称
                    currentIndex.value = index
                    modelData.data.ids = ids
                    options.isShowDialog = true
                }
            })
        }
        /**
         * 初始化 获取审批配置
         * @param type 审批类型 ONLINE
         * @param ids []
         * @param index 0
         * @param code 'DATA_APPLICATION', 'DATA_DATARES', ...
         */
        const init = (type: string, ids: never[], index: number, code: string) => {
            approvalType.value = type
            currentIndex.value = index
            modelData.data.ids = ids
            if (props.supplyData) {
                Object.assign(modelData.data, { supplyData: props.supplyData })
            }
            // 租户内审批配置 INTERNAL
            getModelApproval(code, (data) => {
                const config = data.list[0]
                if (!config.enabled) return
                const {
                    approvalProcessType,
                    approvalFlowId,
                    approvalFlowName,
                    approveOrgId,
                    approveOrgName,
                    approverId,
                    approverName,
                    approverTenantId,
                    approverTenantName
                } = config
                Object.assign(modelData.data, {
                    approvalProcessType,
                    approvalFlowId,
                    approvalFlowName,
                    approveOrgId,
                    approveOrgName,
                    approverId,
                    approverName,
                    approverTenantId,
                    approverTenantName
                })
                keyUp.value++
            })
            options.isShowDialog = true
        }
        const empty = () => {
            modelData.data = {
                'approvalFlowId': '',
                'approvalFlowName': '',
                'approvalProcessType': '',
                'approveOrgId': '',
                'approveOrgName': '',
                'approverId': '',
                'approverName': '',
                'approverTenantId': '',
                'approverTenantName': '',
                'crossTenantApprovalFlowId': '',
                'crossTenantApprovalFlowName': '',
                'crossTenantApprovalProcessType': '',
                'crossTenantApproverId': '',
                'crossTenantApproverName': '',
                'crossTenantApproverOrgId': '',
                'crossTenantApproverOrgName': '',
                'crossTenantApproverTenantId': '',
                'crossTenantApproverTenantName': '',
                'ids': [],
                'isCrossTenant': false,
                'param': {},
                'publishStatus': '',
                'submitApprovalDesc': '',
                'submitApprovalDescUrl': '',
                supplyData: {}
            }
        }
        const closeDialog = () => { // 关闭
            options.isShowDialog = false
            empty()
            ctx.emit('close', currentIndex.value)
        }
        const callback = ()=>{
            ctx.emit('confirmDialog', approvalType.value, modelData.data, currentIndex.value)
            // 这里是调用上线接口
            empty()
            options.isShowDialog = false
        }
        const confirmDialog = () => { // 确定
            if (!approvalFormRef.value?.validate) {
                callback()
            } else {
                approvalFormRef.value?.validate((valid: boolean) => {
                    if (valid) { callback() }
                })
            }
        }
        onMounted(() => {
        })
        return {
            options,
            approvalFlowName,
            model,
            config,
            modelData,
            closeDialog,
            confirmDialog,
            showDialog,
            init,
            keyUp,
            userRef,
            selectData,
            approvalFormRef
        }
    }
})
</script>
<style lang="scss" scoped>
</style>
