<template>
  <el-container>
    <layout-header @menu-change="handleSelect"></layout-header>
    <el-container class="layout-container__component">
      <el-aside class="layout-aside__component" width="300px">
        <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
          <h4 class="side-menu__group">开发指南</h4>
          <el-menu-item-group v-for="(develop, idx) in developList" :key="idx">
            <template slot="title">{{ develop.group }}</template>
            <el-menu-item v-for="(data, index) in develop.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-main class="layout-main__component">
        <router-view></router-view>
      </el-main>
      <el-aside class="layout-aside__preview" width="200px">
        <a class="anchor" :class="{ active: item.hash === currentAnchor }" v-for="(item, index) in anchorList" :key="index" @click="jumpAnchor(item)">{{ item.text }}</a>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
import ComponentLayout from './component';
import { develops } from '@/router/routes';

export default {
  extends: ComponentLayout,
  data() {
    return {
      developList: develops,
    };
  },
};
</script>