<template>
  <el-container>
    <el-aside width="200px">
      <el-menu default-active="1" class="help-menu" @select="handleSelect">
        <recursive-menu :items="menuItems" />
      </el-menu>
    </el-aside>
    <el-main>
      <div class="help-content">
        <h2>{{ docInfo.label }}</h2>
        <MarkdownEditor :value="docInfo.content" readonly />
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";
import { useHelp } from "@/views/help/index";
import RecursiveMenu from "@/components/RecursiveMenu.vue";
import { ref } from "vue";
import MarkdownEditor from "@/components/MarkdownEditor";

const { menuItems, getDoc } = useHelp();
const docInfo = ref({
  label: "",
  content: ""
});

const handleSelect = async (key: string) => {
  const doc = await getDoc(key);
  docInfo.value.label = doc.label;
  docInfo.value.content = doc.content;
  console.log(docInfo.value);
};
</script>

<style scoped>
.help-menu {
  height: 100%;
  border-right: solid 1px var(--el-menu-border-color);
}

.el-aside {
  background-color: var(--el-menu-bg-color);
}

.el-main {
  padding: 20px;
}
</style>
