<template>
  <div class="layout">
    <div class="layout-head">
      <HeadCom/>
    </div>
    <div class="layout-main">
      <div class="layout-main-sub-menu" v-if="hasSubMenu">
        <SubMenuCom/>
      </div>
      <div class="layout-main-content">
<!--        <NavigationCom v-if="hasSubMenu"/>-->
        <RouterViewCom/>
      </div>
    </div>
    <div class="layout-foot">
      <MenuCom/>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import RouterViewCom from './router-view.vue'
import MenuCom from './menu/menu.vue'
import SubMenuCom from './menu/sub-menu.vue'
import HeadCom from './header/head-com.vue'

export default defineComponent({
  name: '',
  components: {RouterViewCom, MenuCom, SubMenuCom, HeadCom},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
    })
    const hasSubMenu = computed(() => {
      return store.state.menu.subMenuRouter?.length > 0
          && ![store.state.menu.homeRouterName].includes(route.name as string)
    })
    // 测试切换分支
    return {
      ...toRefs(state),
      hasSubMenu,
    }
  },
})
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/layout/layout_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .layout-head {
    position: absolute;
    width: 100%;
    height: 135px;
    top: 0;
    left: 0;
    z-index: 1;
  }
  $mt: 91px;
  .layout-main {
    z-index: 2;
    margin-top: $mt;
    width: 100%;
    height: calc(100% - #{$mt});
    display: flex;
    .layout-main-sub-menu {

    }
    .layout-main-content {
      flex: 1;
    }
  }
  .layout-foot {
    z-index: 3;
    position: absolute;
    bottom: 0;
  }
}
</style>
