<script lang="ts" setup>
import { computed, onBeforeMount, onMounted, unref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Logo } from './components/Logo'
import { MainView } from './components/Main'
import { AsideMenu } from './components/Menu'
import { PageHeader } from './components/Header'
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
import { storage } from '@/utils/Storage'

const router = useRouter()
const route = useRoute()
onMounted(() => {
  /**
   * 如果刷新则去掉筛选条件
   * 1. 如果当前页面路由与上一个页面路由相同时则为刷新
   * 2. 防止一直刷新 另外一个判断条件为当前当前路由query不为{}
   * 3. 当前页面下执行当前页面的搜索 1条件一定成立
   *
   * 4. 搜索点击->存storage->跳转页面->onMounted
   * ->如果storage为true则不replace 并将storage置false
   */
  if (storage.get('isSearch')) {
    storage.remove('isSearch')
    router.replace(route.path)
    return
  }
  if (history.state.back == route.path && JSON.stringify(route.query).trim() != '{}')
    router.replace(route.path)
})
const { menuSetting } = useProjectSetting()

const leftMenuWidth = computed(() => {
  const { minMenuWidth } = unref(menuSetting)
  return minMenuWidth
})
</script>

<template>
  <div class="layout">
    <!-- 左侧sider -->
    <div class="layout-sider" :style="{ width: `${leftMenuWidth}px` }">
      <Logo />
      <AsideMenu />
    </div>

    <!-- 右侧内容区域 -->
    <div class="layout-main">
      <div class="layout-main-header">
        <PageHeader />
      </div>

      <div class="layout-main-content">
        <MainView />
      </div>
    </div>
    <div />
  </div>
</template>

<style lang="less" scoped>
.layout {
  display: flex;
  flex-direction: row;
  flex: auto;
  background-image: url("../assets/images/bg.png");
  background-size: cover;
  // height: 1100px;
  // width: 1440px;
  height: 100%;
  max-height: 1100px;
  overflow: hidden;
  .layout-sider {
    min-height: 100vh;
    border-right: 1px solid #dae4f3;
  }

  .layout-main {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;
    border-left: 1px solid #ffffff;
    width: 100%;
    min-height: 100vh;

    &-header {
      box-sizing: border-box;
      width: 100%;
      z-index: 11;
    }

    &-content {
      display: flex;
      flex: auto;
      height: 100%;
      // padding: 0px 16px 24px 16px;
      overflow-x: hidden;
      box-sizing: border-box;
    }
  }
}
</style>
