<template>
  <container>
    <template v-for="(doc, index) in docs">
      <component :codes="codes" :is="doc.component" :key="index" />
    </template>
    <a-anchor>
      <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
      <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
      <a-anchor-link
        href="#components-anchor-demo-basic"
        target="_blank"
        title="Basic demo with Target"
      />
      <a-anchor-link href="#API" title="API">
        <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
        <a-anchor-link href="#Link-Props" title="Link Props" />
      </a-anchor-link>
    </a-anchor>
  </container>
</template>
<script>
export default {
  data() {
    return {
      docs: [
        {
          title: '开始使用',
          name: 'use',
        },
      ],
      codes: {},
    };
  },
  mounted() {
    this.docs.forEach((doc) => {
      this.$set(doc, 'component', () => import(`./${doc.name}`));
    });

    const files = require.context('@/../public/doc-part', true, /\.(js|html)(\?.*)?$/);
    const codes = {};
    files.keys().forEach((p) => {
      const fileName = p.slice(1);
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `./doc-part${fileName}`, false);
      xhr.overrideMimeType('text/plain;charset=utf-8');
      xhr.send(null);
      codes[fileName] = xhr.responseText;
    });

    this.codes = codes;
  },
};
</script>
