<template>
        <BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="data-migration-modal" >
            <template #title>
                    <a-steps  :current="current">
                        <a-step
                            v-for="step in steps"
                            :title="t(step.name)"
                        />
                    </a-steps>
                <div class="btn-box">
                    <a-button type="primary" @click="handleStepPrev" :disabled="current == 0">{{t('上一步')}}</a-button>
                    <a-button type="primary" @click="handleStepNext" :disabled="current>=steps.length-1">{{t('下一步')}}</a-button>
                     <a-button type="primary" @click="handleExport"  :disabled="current<steps.length-1">{{t('导出')}}</a-button>
                    <a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
                </div>
            </template>
            <div class="step-container">
                <Tenant ref="tenantRef"  v-show="showIf('租户')"/>
                <Role ref="roleRef"  v-show="showIf('角色')"/>
                <Post ref="postRef"  v-show="showIf('岗位')"/>
                <UserGroup ref="userGroupRef"  v-show="showIf('用户组')"/>
                <Menu  ref="menuRef"  v-show="showIf('菜单')"/>
                <Form  ref="formRef"  v-show="showIf('表单')"/>
                <Workflow  ref="workflowRef"  v-show="showIf('流程定义')"/>
                <SystemConfig  ref="systemConfigRef"  v-show="showIf('系统配置')"/>
                <Dictionary  ref="dictionaryRef"  v-show="showIf('数据字典')"/>
                <CodeRule  ref="codeRuleRef"  v-show="showIf('自动编码')"/>
                <Desktop  ref="desktopRef"  v-show="showIf('桌面设计')"/>
                <!-- <span  ref="roleMenuAuthRef" v-show="showIf('角色-菜单授权')" >角色-菜单授权 选择列表</span> -->
                <RoleMenuAuth  ref="roleMenuAuthRef"  v-show="showIf('角色-菜单授权')"/>
                <InterfaceAuth  ref="roleInterfaceAuthRef"  v-show="showIf('角色-自定义接口授权')"/>
                <TenantAuthorize  ref="tenantMenuAuthRef"  v-show="showIf('租户-菜单授权')"/>
            </div>
        </BasicModal>
</template>
<script lang="ts" setup>
    import { ref,unref,provide,Ref,onMounted} from 'vue';
    import { useI18n } from '/@/hooks/web/useI18n';
    import {isFunction } from 'lodash-es';
    import { isNumber } from '/@/utils/is';
    import { downloadByData } from '/@/utils/file/download';
    import { dateUtil } from '/@/utils/dateUtil';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import { exportDatas,downloadDatas} from '/@/api/system/dataMigration';
    import Tenant from './components/Tenant.vue';
    import Role from './components/Role.vue';
    import Post from './components/Post.vue';
    import Menu from './components/Menu.vue';
    import Form from './components/Form.vue';
    import Workflow from './components/Workflow.vue';
    import SystemConfig from './components/SystemConfig.vue';
    import Dictionary from './components/Dictionary.vue';
    import CodeRule from './components/CodeRule.vue';
    import Desktop from './components/Desktop.vue';
    import UserGroup from './components/UserGroup.vue';
    import RoleMenuAuth from './components/RoleMenuAuth.vue';
    import InterfaceAuth from './components/InterfaceAuth.vue';
    import TenantAuthorize from './components/TenantAuthorize.vue';
    

    const { t } = useI18n();
    const current = ref(0);
    const steps=ref([]);
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        steps.value=data.items;
        current.value=0;
        selectedModel.value={};
        initStep(0);
        setModalProps({
            confirmLoading: false,
            canFullscreen: false,
            defaultFullscreen: true,
            destroyOnClose: true,
            draggable: false,
            showOkBtn: false,
            showCancelBtn: false,
            footer: null,
            closable: false,
        });
    });

    const tenantRef=ref();
    const roleRef=ref();
    const postRef= ref();
    const userGroupRef= ref();
    const menuRef = ref();
    const formRef=ref();
    const workflowRef=ref();
    const systemConfigRef= ref();
    const dictionaryRef= ref();
    const codeRuleRef= ref();
    const desktopRef= ref();
    const roleMenuAuthRef= ref();
    const roleInterfaceAuthRef= ref();
    const tenantMenuAuthRef= ref();

    const refs = {
        tenantRef,
        roleRef,
        postRef,
        userGroupRef,
        menuRef,
        formRef,
        workflowRef,
        systemConfigRef,
        dictionaryRef,
        codeRuleRef,
        desktopRef,
        roleMenuAuthRef,
        roleInterfaceAuthRef,
        tenantMenuAuthRef
    };

    const selectedModel: Ref<{
        menu?:{
            menuIds: number[],
            buttonIds: number[],
            columnIds:number[],
            formIds:number[]
        },
        tenant?:{
           tenantIds:number[]
        }
    }> = ref({});

    provide('selectedModel', selectedModel);

    function handleClose() {
        closeModal();
    }

    function showIf(itemType:string){
        let currentStep=getStep('current');
        if(currentStep==null){
            return false;
        }
        return currentStep.code==itemType;
    }

    //上一步
    function handleStepPrev() {
        completeStep(current.value);
        current.value--;
        initStep(current.value);

    }
    //下一步
    async function handleStepNext() {
        completeStep(current.value);
        current.value++;
        initStep(current.value);
    }

    //导出
    async function handleExport(){
        completeStep(current.value);
        let result= await exportDatas({
            exportType:'exportSelected',
            ...unref(selectedModel)
        });
        
        if(result){
           const fileName='data-mg-'+dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
           const res = await downloadDatas({uuid:result});
            downloadByData(
                res.data,
                fileName+".zip"
            );
        }
        handleClose();
    }

    function getStep(key:string|number){
        let stepList=unref(steps);
        if(!stepList||stepList.length==0){
            return null;
        }
        let step=null;
        if(key=='current'){
             step=unref(stepList[current.value]);
        }else if(key=='prev'){
            step=unref(stepList[current.value-1]);
        }else if(key=='next'){
            step=unref(stepList[current.value+1]);
        }else if(isNumber(key)&&key>=0&&key<stepList.length){
            step=unref(stepList[key]);
        }
        return step;
    }

    function initStep(key:string|number){
        let stepRef = refs[getStep(key).ref].value;
        stepRef.initStep&& stepRef.initStep();

    };

    function completeStep(key:string|number){
        let stepRef = refs[getStep(key).ref].value;
        stepRef.completeStep&& stepRef.completeStep();
    };


</script>

<style lang="less">
    .data-migration-modal{
        .step-container {
            max-height: 90vh;
            overflow-y: auto;
            padding-bottom: 16px;
        }
        .ant-modal-header{
           height: 100px;
        }
        .ant-steps{
            display: flex;
            flex-wrap: wrap;
        }
       .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
            padding-left:16px!important;
            margin-bottom: 10px;
            flex: 1 1 auto;
        }

    }

</style>
<style lang="less" scoped>
    .btn-box {
        height: 100px;
        position: absolute;
        right: 10px;
        top:60px;
        :deep(.ant-btn) {
            margin-right: 10px;
        }
    }

</style>
