<template>
    <div class="warp" v-loading="loading">
        <!-- <h1>子应用👇</h1> -->
        <!-- name：应用名称, url：应用地址 -->
        <micro-app
            name="my-app"
            router-mode="native"
            :url="url"
            baseroute="/workflow/"
            :data="dataForChild"
            @created="created"
            @beforemount="beforemount"
            @mounted="mounted"
            @unmount="unmount"
            @error="error"
        ></micro-app>
    </div>
</template>

<script setup>
import microApp from "@micro-zoe/micro-app"
import { getRefreshToken } from "@/utils/auth"
const url = import.meta.env.VITE_WORKFLOW_URL
const dataForChild = {
    token: getRefreshToken()
}
const router = useRouter()
const loading = ref(true)
function created() {
    console.log("micro-app元素被创建")
    microApp.unmountApp("my-app")
}
function beforemount() {
    console.log("即将被渲染")
    loading.value = true
}
function mounted() {
    console.log("渲染完成")
    const url = decodeURIComponent(router.currentRoute.value.fullPath)
    //  microApp.setData("app1", { path: path})
    microApp.router.push({ name: "my-app", path: url })
    
    loading.value = false
}
function unmount() {
    console.log("已经卸载")
}
function error() {
    console.log("渲染出错")
    ElMessage({
        message: "工作流项目渲染出错请检查工作流项目",
        type: "error"
    })
    router.push("/index")
}
</script>

<style lang="scss" scoped>
.warp {
  min-height: 600px;
}
</style>