<template>
  <NuxtLayout name="default" :categories="categoryTree">
    <Head>
      <Title>{{ category.title }}</Title>
    </Head>
    <div class="content-wrap">
      <!-- 页面面包屑 -->
      <PageBreadCrumb :data="breadcrumbs"/>
      <div class="wrap-body">
        <!-- 主要内容 -->
        <div class="content">
          <h2 class="page-title">{{ category.title }}</h2>
          <ArticleList :articles="articles" />
          <Pagination v-model="pagination" />
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

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

export default {
  components: {
    ArticleList,
    Pagination,
    PageBreadCrumb
  },
  async setup () {
    // 去掉默认布局
    definePageMeta({
      layout: false,
    })
    const route = useRoute()
    const data = strictPackage(await fetchTemplateData({
      path: '/category/[categoryUid]/articles.vue',
      targetUid: route.params.categoryUid,
      targetType: 'CATEGORY',
      parameters: {
        categoryUid: route.params.categoryUid
      }
    }))
    // 获取分页所使用的栏目UID
    const categoryUid = data.ARTICLE_PAGE_PARAMETERS.categoryUid
    const categoryUtil = new CategoryUtil(data.CATEGORIES_TREE)
    const category = categoryUtil.getCategory(categoryUid)
    if (category == null) {
      throw new Error(`栏目不存在，栏目UID：${categoryUid}`)
    }
    return {
      category,
      categoryTree: data.CATEGORIES_TREE,
      // 查询文章分页数据的栏目ID
      categoryUid,
      // 面包屑
      breadcrumbs: categoryUtil.getBreadcrumb(categoryUid),
      // 文章列表数据
      articles: ref(data.ARTICLE_PAGE.records),
      // 分页数据
      pagination: ref({
        page: data.ARTICLE_PAGE.page,
        capacity: data.ARTICLE_PAGE.capacity,
        total: data.ARTICLE_PAGE.total
      })
    }
  },
  watch: {
    // 路由参数变化时，触发数据搜索
    '$route.query': function (newQuery) {
      this.handlePageChange(Number(newQuery.page) || 1)
    }
  },
  methods: {
    /**
     * 页码变更
     *
     * @param page 新页码
     */
    handlePageChange (page) {
      this.pagination.page = page
      fetchArticlePage({
        page: this.pagination.page,
        capacity: this.pagination.capacity,
        model: {
          categoryUid: this.categoryUid
        }
      })
        .then(data => {
          this.pagination.page = page
          this.pagination.total = data.total
          this.articles = data.records
        })
        .catch(e => console.error(e))
    }
  }
}
</script>

<style scoped lang="scss">
.content-wrap {
  background-color: #fff;
  padding: 20px;
}
.wrap-body {
  margin-top: 10px;
  display: flex;
  // 栏目树
  .category-wrap {
    width: 275px;
    flex-shrink: 0;
  }
  // 内容
  .content {
    flex-grow: 1;
    padding: 10px 30px;
    overflow: hidden;
  }
}
</style>
