<template>
  <el-container class="layout-container">
    <el-header>
      <nav-header />
    </el-header>
    <el-container>
      <el-aside :class="{ 'collapsed': isCollapse, 'expanded': !isCollapse }">
        <div class="scrollable_menu">
          <nav-menu :is-collapse="isCollapse" @toggleCollapse="toggleCollapse" />
        </div>

      </el-aside>
      <el-main>
        <Tabs />
        <Home v-show="showDefaultContent" />
        <component :is="currentComponent" />
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch, shallowRef } from 'vue'
import { useRoute } from 'vue-router'
import NavHeader from '@/components/layouts/navHeader.vue'
import NavMenu from '@/components/layouts/navMenu.vue'
import Tabs from '@/components/layouts/tabs.vue'
import Home from '@/views/home/index.vue'

import personnePostPhysicalExamination from '@/views/personnePostPhysicalExamination/index.vue'
import personnelHealthMonitoring from '@/views/personnelHealthMonitoring/index.vue'
import personalHealthCenter from '@/views/personalHealthCenter/index.vue'
import healthWarning from '@/views/healthWarning/index.vue'

const currentComponent = shallowRef(null)

const staticRoutes = {
  personnePostPhysicalExamination,
  personnelHealthMonitoring,
  personalHealthCenter,
  healthWarning
}

const route = useRoute()
const showDefaultContent = ref(true)
const isCollapse = ref(false)
// 监听路由变化
watch(() => route.path, (newPath) => {
  const path = newPath.replace('/', '')
  showDefaultContent.value = newPath === '/home'
  if (path) {
    currentComponent.value = staticRoutes[path]
  }

}, { immediate: true })
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  :deep(.el-header) {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    padding: 0;
  }

  :deep(.el-aside) {
    // background-color: #304156;
    background: #fff;
    color: #fff;
    transition: width 0.3s;
    height: calc(100vh - 60px);
    position: relative;
  }

  :deep(.el-main) {
    background-color: #f0f2f5;
    padding: 20px;
    transition: margin-left 0.3s;
  }

  .collapsed {
    width: 75px;
  }

  .expanded {
    width: 200px;
  }
}

.scrollable_menu {
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg1)
}
</style>