<!--
 * @Author: 曹捷
 * @Date: 2020-04-22 14:28:39
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-05-25 11:26:35
 * @Description:  布局layout 

 -->
<template>
  <!-- router mate  fullPage  不使用布局  直接全屏 -->
  <div class="loadingFull" loading-spinner="pacman" v-if="!config.isQianKun" v-show="loadPermission" v-loading="loadPermission"></div>
  <!-- 1、单独启动子应用或者主框架，需要加载权限  -->
  <!-- 2、子应用集成到主框架 权限交给主框架统一控制 -->
  <template v-if="(!loadPermission || config.isQianKun) && customLoading">
    <template v-if="routeMate.fullPage">
      <router-view></router-view>
    </template>
    <!-- 子应用 乾坤环境  ，调用layoutQiankun 布局 -->
    <component class="wui-main" :class="config.theme.theme" :is="config.isQianKun ? 'layoutQk' : config.layout" v-else>
      <template v-slot:menu>
        <Sidebar class="" />
      </template>
      <template v-slot:header>
        <navbar />
      </template>
      <template v-slot:body>
        <div id="subapp-viewport" class="h100" v-show="!config.subApp && !routeMate.mainApp"></div>
        <!-- routeMate.mainApp 只在主应用的二级路由  目前只有home 首页-->
        <template v-if="routeMate.mainApp">
          <app-main />
        </template>
        <template v-else>
          <app-main v-show="config.subApp" />
        </template>
      </template>
      <template v-slot:foot>
        <obitFoot />
      </template>
    </component>
  </template>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import layoutLeft from "./layout/layoutLeft.vue";
import topLeftRight from "./layout/topLeftRight.vue";
import layoutQk from "./layout/layoutQk.vue";
import Sidebar from "./components/Sidebar/sidebar.vue";
import AppMain from "./components/AppMain.vue";
import { routerPermission } from "./../utils/validate.js";
import {
  inject,
  reactive,
  ref,
  computed,
  onMounted,
  watch,
  toRaw,
  toRefs,
  nextTick,
} from "vue";
import { useStore, mapGetters } from "vuex";
import { useRoute, useRouter } from "vue-router";
import themeServer from "../config/theme";
import obitFoot from "./../components/obit-foot/obit-foot.vue";
export default {
  name: "Layout",
  inheritAttrs: false,
  components: {
    Navbar,
    Sidebar,
    AppMain,
    layoutLeft,
    topLeftRight,
    layoutQk,
    obitFoot,
  },
  setup (props, context) {
    let http = inject("http");
    let store = useStore();
    let _data = reactive({
      loadPermission: true,
      routeMate: {},
      // 自定义加载 钩子函数 控制系统是否继续加载
      customLoading: false,
    });
    let route = useRoute();
    let router = useRouter();
    let config = store.state.settings;
    let _computed = {
      config: computed(() => config),
      routeMate: computed(() => route.meta),
    };
    let _methods = {
      handleClickOutside () {
        store.dispatch("app/closeSideBar", { withoutAnimation: false });
      },
      async initMenu () {
        let info = {
          http,
          // subApp  子应用，传入对应appCode 只查询对应应用菜单
          // 主应用 不传appCode 查询所有系统菜单
          data: { appCodeList: config.subApp ? [config.auth.appCode] : [] },
        };
        try {
          await store.dispatch("permission/getUserPermission", info);
          if (
            !routerPermission(
              store.state.permission.sysMenu,
              route.path,
              route.meta
            )
          ) {
            router.push({ path: "/401" });
          }
          await _methods.beforeMounted();
          _data.loadPermission = false;
          if (!config.subApp) {
            nextTick(() => {
              context.emit(
                "loadPermiss",
                store.state.permission.menuList,
                store.state.permission.sysBtn
              );
            });
          }
        } catch (error) {
          // alert(`权限获取失败${JSON.stringify(route.meta)}`)
          _data.loadPermission = false;
        }
      },
      async init () {
        let rs = JSON.parse(localStorage.getItem("rs"));
        document.title = `${config.title}${config.navbarTitle}`;
        // 默认初始化  css主题
        nextTick(() => {
          if (config.mounted && typeof config.mounted === "function") {
            config.mounted();
          } else {
            setTimeout(() => {
              themeServer.changeTheme(config.theme.theme);
            }, 100);
          }
        });
        if (rs.permission) {
          this.initMenu();
        } else {
          await _methods.beforeMounted();
          _data.loadPermission = false;
        }
      },
      // 钩子函数  应用加载之前
      async beforeMounted () {
        if (config.beforeMounted && config.beforeMounted instanceof Function) {
          await config.beforeMounted({ http, store });
        }
        _data.customLoading = true;
      },
    };
    onMounted(() => {
      // 初始化store  user  token
      store.commit("user/init");
      if (!config.isQianKun) {
        _data.customLoading = true;
        _methods.init();
      } else {
        _methods.beforeMounted();
      }
    });
    // 主题颜色等变量修改 ，同步修改和缓存css变量
    // watch(() => store.state.settings.theme.theme, (value) => {
    //   triggerTheme(value)
    // }, { deep: true })
    return {
      ...toRefs(_data),
      ..._computed,
      ..._methods,
    };
  },
};
</script>

<style lang="less" scoped>
// @import '~@/common-modules/styles/variables.less';
.loadingFull {
  width: 100%;
  height: 100%;
}
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  // width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
#subapp-viewport {
  > :first-child {
    height: 100%;
  }
}
</style>
