<template>
  <div class="app-container">
    <el-container class="box-container">
      <el-aside class="aside-container" v-if="showAside">
        <el-menu class="ai-menu" :default-active="activeMenu" @select="menuSelect">
          <el-menu-item index="1">
            <!-- <el-icon><icon-menu /></el-icon> -->
            <template #title>语音合成(知识库)</template>
          </el-menu-item>
          <el-menu-item index="2">
            <!-- <el-icon><document /></el-icon> -->
            <template #title>语音合成</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <!-- 这里知识库和基础库弄反了，临时页面，也懒得去纠正了 -->
        <Chat v-show="activeMenu === '1'" aiName="语音合成(知识库)" aiType="basis" />
        <Chat v-show="activeMenu === '2'" aiName="语音合成" aiType="knowledge" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Chat from "./chat.vue";

const activeMenu = ref('2');
const showAside = ref(false)

const menuSelect = (e) => {
  activeMenu.value = e
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;

  .box-container {
    height: 100%;

    .aside-container {
      width: 300px;
      height: 100%;
      margin-bottom: 0;
      background: #fbfaff;

      .ai-menu {
        background: #fbfaff;
        border-right: 0;
      }
    }

    .main-content {
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      flex: 1;
    }
  }
}
</style>
