<template>
  <div class="app-container">
    <div class="head-menu">
      <t-head-menu :default-value="activeMenu">
        <t-menu-item value="/case" :to="'/case'"> 测试用例 </t-menu-item>
        <t-menu-item value="/case-list" :to="'/case-list'"> 测试用例列表 </t-menu-item>
        <t-menu-item value="/mx-graph" :to="'/mx-graph'"> 流程图画布 </t-menu-item>
      </t-head-menu>
    </div>
    <div class="main-container">
      <router-view v-slot="{ Component, route }">
        <transition name="fade">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </div>
    <div class="status-bar">
      <div id="version-info">版本: {{ version }}</div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="Layout">
const version = ref('v1.0.0')
const currentRoute = useRoute()
const activeMenu = computed(() => {
  const { meta, path } = unref(currentRoute)
  // 如果设置路径，侧边栏将高亮显示您设置的路径
  if (meta.activeMenu) {
    return meta.activeMenu as string
  }
  return path
})
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-container {
  position: relative;
  height: calc(100vh - 90px);
  overflow-y: auto;
}

.status-bar {
  display: flex;
  justify-content: center;
  padding: 8px 20px;
  font-size: 12px;
  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
  color: var(--ev-c-white);
}
</style>
<style>
.t-head-menu {
  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
}

.t-menu {
  font-size: 16px;
  font-weight: 700 !important;
}

.t-menu__item {
  color: var(--ev-c-white);
}

.t-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  /* color: var(--ev-c-white); */
}

.t-menu__item.t-is-active {
  color: var(--ev-c-white);
  background-color: rgba(255, 255, 255, 0.2);
}

.t-menu__content {
  font-weight: 700 !important;
}
</style>
