<template>
  <a-card :bordered="false" class="mb-none">
    <container>
      <a-row :gutter="16" type="flex">
        <a-col flex="auto">
          <container mode="container">
            <section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
              <h1>{{ doc.title }}</h1>
              <component :codes="codes" :is="doc.component" v-if="doc.name" />
              <template v-if="doc.children">
                <section
                  :id="`doc-${index}-${_index}`"
                  :key="_index"
                  v-for="(_doc, _index) in doc.children"
                >
                  <h3>{{ _doc.title }}</h3>
                  <component :codes="codes" :is="_doc.component" v-if="_doc.name" />
                </section>
              </template>
            </section>
          </container>
        </a-col>
        <a-col flex="240px">
          <a-anchor
            :get-container="()=> $el.parentNode"
            :offset-top="24"
            :wrapper-style="{ backgroundColor: 'transparent' }"
          >
            <a-anchor-link
              :href="`#doc-${index}`"
              :key="index"
              :title="doc.title"
              v-for="(doc, index) in docs"
            >
              <template v-if="doc.children">
                <a-anchor-link
                  :href="`#doc-${index}-${_index}`"
                  :key="_index"
                  :title="_doc.title"
                  v-for="(_doc, _index) in doc.children"
                />
              </template>
            </a-anchor-link>
          </a-anchor>
        </a-col>
      </a-row>
    </container>
  </a-card>
</template>
<script>
export default {
  data() {
    return {
      docs: [
        {
          title: '开始使用',
          name: '/usage',
        },
        {
          title: '窗口',
        },
        {
          title: '种子',
          name: '/seed',
          children: [
            {
              title: '查询表格',
              name: '/seed/query',
            },
            {
              title: '编辑窗口',
              name: '/seed/form',
            },
          ],
        },
      ],
      codes: {},
    };
  },
  mounted() {
    this.docs.forEach((doc) => {
      if (doc.name) {
        this.$set(doc, 'component', () => import(`.${doc.name}`));
      }
      if (doc.children) {
        doc.children.forEach((_doc) => {
          this.$set(_doc, 'component', () => import(`.${_doc.name}`));
        });
      }
    });

    // 读取doc-code下所有文件内容
    const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
    const codes = {};
    files.keys().forEach((p) => {
      const fileName = p.slice(1);
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `./doc-code${fileName}`, false);
      xhr.overrideMimeType('text/plain;charset=utf-8');
      xhr.send(null);
      codes[fileName] = xhr.responseText;
    });
    console.log(codes);
    this.codes = codes;
  },
  methods: {
    container() {
      return this.$el;
    },
  },
};
</script>
