<template>
  <!-- 产品类型页面 -->
  <div class="content">
    <BannerTop :options="bannerTopOptions"/>

    <section class="container pt-4 pb-4">
      <div class="row">
        <AsideTree 
          class="col-md-3 mb-4 mb-md-0" 
          :treeData="categoryTree" 
          :headerTitle="$t('products.allProducts')"
          baseUrl="/products"
        />
        <main class="col-md-9">
          <div class="pretty-header">
            <h2>{{$route.query.title}}</h2>
          </div>
          <nuxt-child />
        </main>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'products',
  watchQuery: ['maxCatgId', 'title'],
  data() {
    return {
      
    }
  },
  async asyncData({$axios,query}) {
    // 获取产品分类
    const categoryTree = await $axios.$get(`/web/prodCategory?catgId=${query.maxCatgId}`)
    const bannerTopOptions = {
      title: query.title,
      // subTitle: this.$t('products.allProducts'),
      img: require('../assets/image/banner/products-banner.png')
    }
    
    return {
      categoryTree,
      bannerTopOptions
    }
  },
  head() {
    return {
      title: this.bannerTopOptions.title, // 页面标题
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$t('seo.product.keywords')
        },
        {
          hid: 'description',
          name: 'description',
          content: this.$t('seo.product.description')
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}

</style>