<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1']" router>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><DataLine /></el-icon>功能模块
            </template>
            <el-menu-item index="/">
              <el-icon><House /></el-icon>首页
            </el-menu-item>
            <el-menu-item index="/data">
              <el-icon><FolderOpened /></el-icon>数据管理
            </el-menu-item>
            <el-menu-item index="/training">
              <el-icon><Cpu /></el-icon>模型训练
            </el-menu-item>
            <el-menu-item index="/prediction">
              <el-icon><MagicStick /></el-icon>模型预测
            </el-menu-item>
            <el-menu-item index="/management">
              <el-icon><Files /></el-icon>模型管理
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <span>一树药品销售量预测系统</span>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
</script>

<style scoped>
.layout-container {
  height: 100vh;
}
.el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style> 