<template>
  <container>
    <a-anchor
      :get-container="()=> $el.parentNode"
      :offset-top="16"
      @click.prevent
      class="yo-account--anchor"
    >
      <a-anchor-link
        :href="`#account-${key}`"
        :key="key"
        :title="nav.title"
        v-for="(nav, key) in navs"
      />
    </a-anchor>
    <br />
    <section :id="`account-${key}`" :key="key" v-for="(nav, key) in navs">
      <component :is="nav.component" v-if="nav.component" />
    </section>
  </container>
</template>
<style lang="less" scoped>
@import (reference) '~@/assets/style/extend.less';
.yo-account--anchor {
  position: absolute;

  width: 200px;
  /deep/.ant-anchor-wrapper {
    background-color: transparent;
  }
  /deep/.ant-anchor-ink {
    display: none;
  }
}

</style>
<script>
export default {
  data() {
    return {
      navs: {
        0: {
          title: '我的信息',
          component: () => import('./setting/info'),
        },
        1: {
          title: '安全设置',
          component: () => import('./setting/safety'),
        },
      },
    };
  },
};
</script>