<template>
  <template v-if="isSpecial">
    <div class="layout-special">
      <div class="layout-head-title">
        <div class="lh-logo __hover" @click="goIndexPage">
          <img class="lh-logo-icon" src="@/assets/images/layout/logo_icon.png"/>
          <div class="lh-logo-title">综合态势防控平台</div>
        </div>
        <SvgIcon name="arrow_1" color="#ffffff" size="20" class="lh-expend __hover" :class="{not: !$store.state.menu.menuExpend}" @click="$store.dispatch('menu/LOAD_SWITCH_MENU_EXPEND')"/>
      </div>
      <MenuCom class="menu" :isSpecial="isSpecial" v-if="$store.state.menu.menuExpend"/>
      <HeadCom class="head"/>
      <RouterViewCom class="content"/>
    </div>
  </template>
  <template v-else>
    <div class="layout">
      <div class="layout-head">
        <div class="bg"/>
        <div class="layout-head-title">
          <div class="lh-logo __hover" @click="goIndexPage">
            <img class="lh-logo-icon" src="@/assets/images/layout/logo_icon.png"/>
            <div class="lh-logo-title">综合态势防控平台</div>
          </div>
          <SvgIcon name="arrow_1" color="#ffffff" size="20" class="lh-expend __hover" :class="{not: !$store.state.menu.menuExpend}" @click="$store.dispatch('menu/LOAD_SWITCH_MENU_EXPEND')"/>
        </div>
        <MenuCom class="menu" :isSpecial="isSpecial"/>
        <HeadCom class="head"/>
      </div>
      <div class="layout-bottom">
        <div class="layout-sub-menu" :class="{expend: $store.state.menu.menuExpend}" v-if="hasSubMenu">
          <SubMenuCom :isExpend="$store.state.menu.menuExpend"/>
        </div>
        <div class="layout-content">
          <NavigationCom v-if="hasSubMenu"/>
          <RouterViewCom class="content"/>
        </div>
      </div>
    </div>
  </template>
</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 NavigationCom from './header/navigation.vue'
import HeadCom from './header/head-com.vue'

export default defineComponent({
  name: '',
  components: {RouterViewCom, MenuCom, SubMenuCom, NavigationCom, HeadCom},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
    })
    const goIndexPage = () => {
      // @ts-ignore
      window.open(`http://${window.location.hostname}:${window.cusConfig.portalPort}`);
    }
    const hasSubMenu = computed(() => {
      return store.state.menu.subMenuRouter?.length > 0
          && ![store.state.menu.homeRouterName].includes(route.name as string)
    })
    const isSpecial = computed(() => {
      return [store.state.menu.homeRouterName].includes(route.name as string)
    })
    // 测试切换分支
    return {
      ...toRefs(state),
      goIndexPage,
      hasSubMenu,
      isSpecial
    }
  },
})
</script>

<style scoped lang="scss">
  .layout-head-title {
    background-image: url("@/assets/images/layout/menu-top-title.png");
    background-repeat: no-repeat;
    width: 470px;
    height: 69px;
    display: flex;
    align-items: center;
    z-index: 2;
    .lh-logo {
      display: flex;
      align-items: center;
      .lh-logo-icon {
        margin-left: 28px;
        width: 40px;
        height: 41px;
      }
      .lh-logo-title {
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 7px;
        user-select: none;
        padding-bottom: 2px;
      }
    }
    .lh-expend {
      width: 18px;
      height: 16px;
      margin-left: 41px;
      margin-top: 28px;
      transform: rotate(180deg) !important;
      transition: 0.2s;
      &.not {
        transform: rotate(0deg) !important;
      }
    }
  }
  .layout-special {
    width: 100%;
    height: 100vh;
    position: relative;
    .layout-head-title {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .menu {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 429px;
    }
    .head {
      height: 40px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
    }
    .content {
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }
  .layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    $layoutHeadHeight: 69px;
    background-color: #082e94;
    .layout-head {
      width: 100%;
      height: $layoutHeadHeight;
      display: flex;
      align-items: center;
      .bg {
        background-image: url("@/assets/images/layout/head-bg.png");
        background-repeat: no-repeat;
        background-position-x: right;
        width: 100%;
        height: 59px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .menu {
        z-index: 1;
      }
      .head {
        top: 11px;
      }
    }
    .layout-bottom {
      width: 100%;
      height: calc(100% - #{$layoutHeadHeight});
      display: flex;
      .layout-sub-menu {
        width: 44px;
        height: 100%;
        &.expend {
          width: 204px;
        }
      }
      .layout-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .content {
          flex: 1;
        }
      }
    }
  }
</style>
