<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #545c64;">
      <div class="logo">Skit-Panel</div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item v-for="route in menuRoutes" :key="route.path" :index="'/' + route.path">
          <el-icon><component :is="route.meta.icon" /></el-icon>
          <span>{{ route.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main :class="{ 'no-padding': isPlayerPage }">
      <router-view v-slot="{ Component }">
          <keep-alive :exclude="['PlayerIframe']">
              <component :is="Component" />
          </keep-alive>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
// 判断当前页面是否是嵌入播放器的页面
const isPlayerPage = computed(() => route.name === 'PlayerIframe');
const menuRoutes = computed(() => 
  router.options.routes.find(r => r.path === '/').children.filter(r => r.meta && r.meta.icon)
);
</script>

<style>
.el-main.no-padding {
  padding: 0;
  height: 100vh; 
  box-sizing: border-box;
}
</style>
<style scoped>
.logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
  letter-spacing: 1px;
}
.el-menu {
  border-right: none;
}
</style>
