<template>
  <el-container class="main-container">
    <el-container>
      <el-aside class="main-aside">
        <!-- 开放平台 -->
        <el-menu default-active="1-1" :unique-opened="true" class="el-menu-open-platform">
          <el-sub-menu index="1">
            <template #title>
              <i class="el-icon-location"></i>
              <span>API文档</span>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="1-1"  >简介</el-menu-item> -->
              <el-menu-item index="1-1" @click="handlePath('0')">API概览</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-3">
              <template #title>相关接口</template>
              <el-menu-item index="1-3-1" @click="handlePath('1')">实体查询</el-menu-item>
              <el-menu-item index="1-3-2" @click="handlePath('2')">实体关系查询</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </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>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const handlePath = (id) => {
  router.push({ name: 'platformText', params: { id: id } });
};

</script>

<style lang="less" scoped>
.el-menu-open-platform {
  height: 100%;
}
</style>
