<template>
  <div class="page">
    <div class="">
      <el-menu
        default-active="1-1"
        class="sidebar"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>开发前必读</span>
          </template>
          <el-menu-item index="1-1" @click="guide">服务端API签名指南</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>开发接口</span>
          </template>
          <el-menu-item v-for="item in apiMenuList" :key="item.id" :index="item.id" @click="getContent(item.id)">{{ item.name }}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content">
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script setup>
import { getAvailableApiGuideApi, apiMenuApi, getContentApi } from '@/apis/api.js'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
  if (key === '2') {
    getMenu()
  }
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const content = ref(''); 
// 签名指南
const guide = () => {
  getAvailableApiGuideApi().then(res => {
    if(res.code === 200) {
      content.value = res.data.content
    }
  })
}

// 开发接口
const apiMenuList = ref([])
const getMenu = () => {
  apiMenuApi().then(res => {
    if (res.code === 200) {
      apiMenuList.value = res.data
    }
  })
}
// 详情
const getContent = (id) => {
  getContentApi(id).then(res => {
    if (res.code === 200) {
      content.value = res.data.content || ''
    }
  })
}

onMounted(() => {
  guide()
});
</script>
<style>
.sidebar.el-menu--vertical .el-sub-menu__title:hover {
    background-color: #fff !important;    
}
.sidebar.el-menu--vertical  .el-menu-item:hover {
  background-color: #fff !important;
}
</style>
<style lang="scss" scoped>
.page {
  display: flex;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #f5f5f5;
  border-radius: 25px 0 0 0;
  min-height: calc(100vh - 80px);
  // text-align: center;
  .title {
    font-size: 50px;
  }
  .sidebar {
    position: absolute;
    width: 340px;
    top: 0;
    bottom: 0;
    overflow: auto;
    padding: 40px 30px;
    box-sizing: border-box;
    z-index: 1;
  }
  .content{
    position: absolute;
    left: 340px;
    right: 0;
    top: 0;
    bottom:0;
    background: #fff;
    padding: 40px 30px;
    overflow: auto;
  }
}
:deep(.el-submenu .el-menu:hover) {

background: transparent;

color: #d75b5f;

}


</style>
