<template>

  <el-container class="main-container">
    <el-container>
      <el-aside class="main-aside">
        <SideMenu @selectQueue="onSelectQueue" @selectMenu="onSelectMenu"></SideMenu>
      </el-aside>
      <el-main class="content-area">
        <!-- 主要内容区域 -->
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { RouterView } from "vue-router";
import SideMenu from "@/components/SideMenu.vue";
import { useMenuStore } from "@/stores/menu.js";

const router = useRouter();

//校验注册信息
const onSelectQueue = (idData: any) => {
  // console.log(router.getRoutes());
  // 跳转到队列详情页并且传递队列ID作为查询参数
  // 假设队列详情页的路由路径是 '/workspace/queue'
  // 可以使用 router.push 方法来实现路由跳转

  router.push({ name: 'queue', params: { id: idData.id } });
};
const onSelectMenu = (menuData: any) => {
  if (menuData.name == "graph") {
    router.push({ name: 'graph' });
  }
};

</script>
<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.main-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: margin-box;
  padding: 0px;
  margin: 0px;
  min-width: 0px;
}

.login-box {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/loginBanar.png");
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: margin-box;
}

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 500px;
  /* width: 100vw; */
  /* height: 100vh; */
  padding: 50px;
  background-color: #eef6ff;
  border-radius: 12px 12px 12px 12px;
}

.login-header {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}

.content-area {
  padding: 20px;
  width: calc(100% - 300px);
  overflow: auto;
}

.main-aside {
  width: 300px;
  border-right: 0px solid #e4e7ed;
  padding: 1px;
}

.site_header {
  width: 100%;
  box-sizing: border-box;
  /* background-color: #c5c5c5; */
  background-color: #eef6ff;
  padding: 0 20px;
  height: 50px;
  /* border-bottom: 1px solid #e4e7ed; */
}

.knowledge-base-icon {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 10px;
}
</style>
