<script setup lang='ts'>
import { ref, provide, watch, reactive } from 'vue';
import type { Ref } from "vue";
import { useRoute, useRouter } from 'vue-router';
import AppAside from './AppAside.vue'; // 静态导入
import AppHeader from './AppHeader.vue'; // 静态导入
import AppAsideForTab2 from './AppAsideForTab2.vue'; // 静态导入
import { useTokenStore } from '@/stores/mytoken';

const isCollapse = ref(false);
provide('isCollapse', isCollapse);

const route = useRoute();
const router = useRouter();

// 获取 tokenStore 实例
const tokenStore = useTokenStore();

// 从 store 中解构出 loginType 来初始化 userInfo
const userInfo = reactive({
  loginType: tokenStore.token.loginType || 'password', // 默认为密码登录
});

// 项目配置，包括侧边栏组件和默认路由路径
const projects = {
  "project1": {
    sidebar: AppAside, // 使用静态导入的组件
    defaultRoute: '/SoilPro' // 默认路由路径
  },
  "project2": {
    sidebar: AppAsideForTab2,
    defaultRoute: '/Visualizatio'
  }
};

type ProjectName = keyof typeof projects;
let currentProject: Ref<ProjectName>;

if (userInfo.loginType === 'password') {
  currentProject = ref('project2');
} else {
  currentProject = ref('project1');
}

function switchProject(projectName: ProjectName) {
  currentProject.value = projectName;
  router.push({ path: projects[projectName].defaultRoute });
}

watch(
  () => route.path,
  (newPath) => {
    if (newPath === '/SoilPro') {
      currentProject.value = 'project1';
    } else if (newPath.startsWith('/Visualizatio')) { // 更精确地匹配project2开头的路径
      currentProject.value = 'project2';
    }
  }
);
</script>

<template>
  <div class="common-layout">
    <el-container style="height: 100vh;">
      <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: #2c3e50; transition: width 0.3s;">
        <component :is="projects[currentProject].sidebar" />
      </el-aside>
      <el-container class="header-and-main">
        <AppHeader @switch-project="switchProject" :current-project="currentProject" />
        <el-main style="padding-top: 60px; padding: 20px; background-color: #ecf0f1;">
          <el-scrollbar>
            <RouterView />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  display: flex;
  height: 100%;
}

.header-and-main {
  flex-direction: column;
  width: 100%;
}

.el-main {
  padding: 20px;
  background-color: #ecf0f1;
  flex-grow: 1;
}

/* 改善侧边栏宽度变化时的过渡效果 */
.el-aside {
  transition: width 0.3s ease-out;
  overflow-x: hidden; /* 确保侧边栏没有横向滚动条 */
}

/* 自定义滚动条样式开始 */
.el-scrollbar__wrap {
  overflow-x: hidden; /* 隐藏横向滚动条 */
  overflow-y: auto;   /* 确保垂直方向可以滚动 */
}

/* 针对WebKit浏览器（如Chrome, Safari）的自定义滚动条 */
.el-scrollbar__bar.is-horizontal {
  display: none; /* 隐藏水平滚动条 */
}

/* 对于非WebKit浏览器，可以添加如下通用样式规则 */
.el-scrollbar__view {
  overflow-x: hidden; /* 确保水平方向不会出现滚动条 */
  overflow-y: auto;   /* 保证垂直方向可以滚动 */
}

/* 如果需要支持IE或Edge，可以考虑额外的样式规则 */
</style>



