<template>
  <NuxtLayout name="default" :categories="categoryTree">
    <div class="content-wrap">
      <h2>搜索到 <em>{{ articlePage.pagination.total }}</em> 条记录</h2>
      <ArticleList :articles="articlePage.data" :keyword="keyword"/>
      <Pagination
        v-model="articlePage.pagination"
        :get-page-url="page => {
          return `/search?kwd=${keyword}&page=${page}`
        }"
      />
    </div>
  </NuxtLayout>
</template>

<script>
import { definePageMeta } from '#imports'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Pagination from '@/components/common/Pagination'
import ArticleList from '@/components/cms/ArticleList'
import { fetchTemplateData } from '@/api/cms/template'
import { search } from '@/api/cms/search'
import { strictPackage } from '@/utils/util'

export default {
  components: { ArticleList, Pagination },
  async setup () {
    // 去掉默认布局
    definePageMeta({
      layout: false,
    })
    const route = useRoute()
    const keyword = route.query.kwd || ''
    // 获取模板数据
    const data = strictPackage(await fetchTemplateData({
      path: '/search.vue',
      parameters: {
        keyword
      }
    }))
    return {
      keyword,
      // 栏目树
      categoryTree: data.CATEGORIES_TREE,
      // 文章数据
      articlePage: ref({
        // 文章列表
        data: data.SEARCH_PAGE.articlePage.records,
        // 分页数据
        pagination: {
          page: data.SEARCH_PAGE.articlePage.page,
          capacity: data.SEARCH_PAGE.articlePage.capacity,
          total: data.SEARCH_PAGE.articlePage.total
        }
      })
    }
  },
  watch: {
    // 路由参数变化时，触发数据搜索
    '$route.query': function (newQuery) {
      this.keyword = newQuery.kwd || ''
      this.handlePageChange(Number(newQuery.page) || 1)
    }
  },
  methods: {
    /**
     * 页码变更
     *
     * @param page 新页码
     */
    handlePageChange (page) {
      this.articlePage.pagination.page = page
      search({
        page: this.articlePage.pagination.page,
        capacity: this.articlePage.pagination.capacity,
        model: this.keyword
      })
        .then(data => {
          this.articlePage.data = data.articlePage.records
          this.articlePage.pagination.total = data.articlePage.total
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.content-wrap {
  background-color: var(--color-white);
  padding: 20px;
  h2 {
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    font-weight: normal;
    em {
      font-weight: bold;
      font-style: normal;
      color: var(--primary-color);
    }
  }
}
</style>
