<template>
  <div class="flex main-layout">
    <div class="flex direction-column main-layout-left" :class="{ 'is-collapse': mainLayoutStore.collapse }">
      <div class="drag flex items-center justify-center dou-yu main-layout-left-logo" @dblClick="reloadPage">
        <span v-if="mainLayoutStore.collapse">CET</span>
        <img v-else src="../../assets/images/logo.png" />
        <!-- <span v-show="!mainLayoutStore.collapse"> 电子阅卷</span> -->
      </div>
      <div class="flex-1 scroll-y-auto">
        <left-menu></left-menu>
      </div>
    </div>
    <div class="flex flex-1 direction-column scroll-auto main-layout-right">
      <div class="frame-header p-base flex items-center justify-end">
        <div class="icon-box" @click="maximize">
          <img src="../../assets/images/app_minimize2.png" />
        </div>
        <div class="icon-box m-l-base" @click="closeApp">
          <img src="../../assets/images/app_close2.png" />
        </div>
      </div>
      <main-header :reply-user-id="replyUserId" :message-visible="messageVisible" :in-layout="true"></main-header>
      <div class="flex-1 scroll-auto main-layout-right-content">
        <!-- <RouterView></RouterView> -->
        <router-view v-if="isRouterAlive" #default="{ Component }">
          <keep-alive :include="mainStore.keepAliveViews">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MainLayout">
import { ref, provide, nextTick } from 'vue'
import LeftMenu from './LeftMenu.vue'
import MainHeader from './MainHeader.vue'
import useMainLayoutStore from '@/store/layout'
import useMainStore from '@/store/main'
import { useRoute } from 'vue-router'
import { closeApp } from '@/utils/shared'
const maximize = () => {
  let electronAPI = (window as any).electronAPI
  electronAPI && electronAPI.windowMin()
}
const route = useRoute()

const reloadPage = () => {
  ;(window as any).location.reload()
}
const mainLayoutStore = useMainLayoutStore()
const mainStore = useMainStore()
const replyUserId = ref<number>()

const messageVisible = ref<boolean>(false)
const isRouterAlive = ref(true)
const setReplyUserId = (id: number) => {
  replyUserId.value = id
}

const setMessageVisible = (visible: boolean) => {
  messageVisible.value = visible
}

provide('setReplyUserId', setReplyUserId)
provide('setMessageVisible', setMessageVisible)

const reload = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
provide('reload', reload)
</script>

<style scoped lang="scss">
.main-layout {
  width: 100%;
  height: 100%;
  .frame-header {
    height: 70px;
    background-color: #333;
    .icon-box {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 22px;
        height: 22px;
      }
      &:hover {
        background-color: #666;
      }
    }
  }
  .main-layout-left {
    width: $LayoutLeftMenuWidth;
    // background-color: $LayoutLeftMenuBg;
    background-color: #333;
    transition: $LayoutLeftMenuTransition;
    // border-right: $OnePixelLine;
    &.is-collapse {
      width: $LayoutLeftMenuCollapseWidth;
    }
    .main-layout-left-logo {
      // min-height: $MainLayoutHeaderHeight;
      min-height: 70px;
      margin: 0 $BaseGapSpace;
      // border-bottom: $OnePixelLine;
      border-bottom: 1px solid #eee;
      font-size: $MainLayoutHeaderLogoFontSize;
      // color: $MainLayoutHeaderLogoFontColor;
      color: #fff;
    }
  }
  .main-layout-right {
    .main-layout-right-content {
      width: 100%;
    }
  }
}
</style>
