<template>
  <div>
    <HeaderMe />
    <div class="wrapper">
      <PageSidebar />
      <div class="archive">
        <h2>{{ article.attributes.title }}</h2>
        <div class="article-content markdown-body" v-html="article.html"></div>
        <div class="search">
          <input v-model="searchQuery" type="search" autocomplete="off" placeholder="文章关键词" />
          <ul v-if="articles.length">
            <li v-for="article of articles" :key="article.slug">
              <NuxtLink :to="article.path+'/'">{{ article.title }}</NuxtLink>
               <!-- 在url地址后加一个/，配置全站的url格式，防止错乱 -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderMe from "@/components/HeaderMe";
import PageSidebar from '@/components/PageSidebar';
export default {
  components: {
    HeaderMe,
    PageSidebar
  },
  data () {
    return {
      searchQuery: '',
      articles: []
    }
  },
  async asyncData () {
    // 调用 search.md 内的数据
    const article = await import(`~/content/search.md`);
    return {
      article
    };
  },
  watch: {
    async searchQuery (searchQuery) {
      if (!searchQuery) {
        this.articles = []
        return
      }
      this.articles = await this.$content('posts') // posts 是文章所在的文件夹的名称
        .limit(10)
        .search(searchQuery)
        .fetch()
    }
  }
}
</script>