<!--
 * @Author: Jason Liu
 * @Date: 2022-03-10 10:49:24
 * @Desc: 基础模板
-->
<template>
  <a-layout
    :class="['basic_layout', appType == 'subapp' ? 'sub_app' : '', isFull ? 'full_app' : '']"
  >
    <a-spin
      :spinning="loading"
      size="large"
      :tip="`${$t('数据加载中')}`"
    >
      <appHeader
        v-if="appType != 'subapp'"
        v-model="value"
        :app-id="app.name"
      ></appHeader>
      <a-layout>
        <a-layout-sider
          v-model="fold"
          :trigger="null"
          collapsible
          :collapsed-width="60"
          v-if="appType != 'subapp'"
        >
          <a-menu
            mode="inline"
            @click="openMenu"
            :default-selected-keys="defaultMenu"
            :default-open-keys="defaultOpen"
            v-model="defaultMenu"
          >
            <template v-for="(item, i) in appMenus">
              <a-menu-item
                v-if="!(item.children && item.children.length)"
                :key="item.menuMapId"
                :value="item.path"
              >
                <menu-info v-model="appMenus[i]" />
              </a-menu-item>
              <subMenus
                v-else
                v-model="appMenus[i]"
                :key="item.menuMapId"
                @submit="openMenu"
              ></subMenus>
            </template>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <div class="win_container">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </a-layout-content>
      </a-layout>
    </a-spin>
  </a-layout>
</template>
<script>
  const appHeader = require('./components/appHeader/index.vue').default;
  const subMenus = require('./components/subMenus/index.vue').default;
  const menuInfo = require('./components/menuInfo/index.vue').default;

  const { getUseApp } = require('../../utils/appAnalysis');

  export default {
    components: { appHeader, subMenus, menuInfo },
    props: {
      value: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        loading: false,
        fold: false,
        app: { name: undefined },
        appMenus: [], //应用菜单
        defaultMenu: [],
        defaultOpen: [],
        appType: undefined,
        isFull: false,
      };
    },
    created() {
      if (top != window || window.__POWERED_BY_QIANKUN__) {
        this.appType = 'subapp';
        if (top != window) {
          this.isFull = true;
        }
      }
      this.init();
    },
    methods: {
      init() {
        if (this.value.length > 0) {
          this.app = getUseApp(this.$route, this.value);
          this.appMenus = this.app.children;
          this.defaultMenu = [];
          this.defaultOpen = [];
          this.$route.matched.forEach((route) => {
            if (route.name) {
              const getActiveMenu = (menus, pids = []) => {
                menus.forEach((menu) => {
                  if (menu.name == route.name) {
                    if (pids.length > 0) {
                      pids.forEach((pid) => {
                        this.defaultMenu.push(pid);
                        this.defaultOpen.push(pid);
                      });
                    }
                    this.defaultMenu.push(menu.menuMapId);
                    this.defaultOpen.push(menu.menuMapId);
                  } else if (menu.children && menu.children.length > 0) {
                    let newPid = [...pids];
                    newPid.push(menu.menuMapId);
                    getActiveMenu(menu.children, newPid);
                  }
                });
              };
              getActiveMenu(this.appMenus);
            }
          });
        }
      },
      /**
       * @Author: Jason Liu
       * @description: 打开菜单
       */
      openMenu(mune, last) {
        if (mune.item) {
          this.$router.push(mune.item.value);
        } else if (last) {
          this.$router.push(mune.path);
        }
      },
    },
    watch: {
      $route(newVal) {
        this.init();
      },
      value(val) {
        this.init();
      },
    },
  };
</script>
<style lang="less" scoped>
  @import '../../themes/config.less';
  .basic_layout {
    .win_container {
      padding: 12px;
      height: calc(100vh - 80px);
      overflow: auto;
      position: relative;
      .ant-layout-footer {
        height: 48px;
        line-height: 48px;
        padding: 0 24px;
        text-align: right;
        background: #fff;
        border-top: 1px solid @borderColor;
      }
    }
    &.full_app {
      .win_container {
        padding: 0 !important;
        height: calc(100vh) !important;
      }
    }
  }
</style>
