<template>
  <!-- 文章模块 -->
  <section class="article-page-list">
    <div v-html="prodUp"></div>
    <nuxt-link 
      class="article-page-item box_shadow row mt-4" 
      :to="`/article-page/${item.id}?maxCatgId=${item.maxCatgId}&catgId=${item.catgId}`"
      v-for="item in pordObj.records"
      :key="item.id"
    >
      <img 
        class="col-md-4 cover"
        :src="item.mainPic"
        :alt="item.title"
      >
      </img>
      <article class="col-md-8">
        <h3 class="title text-ellipsis">
          {{ item.title }}
        </h3>
        <p class="article-page-content text-ellipsis" v-html="item.description"></p>
        <div>
          <span>{{ item.createTime }}</span>
          <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
        </div>
      </article>
    </nuxt-link>
    <div v-html="prodDown"></div>
    <SeoPagination class="mt-4" :total="pordObj.total" />
  </section>
</template>

<script>
export default {
  name: 'article-page-list',
  watchQuery: ['pageNum', 'catgId', 'maxCatgId'],
  data() {
    return {
      bannerTopOptions: {
        
      },
    }
  },
  computed: {
    prodUp() {
      return this.$store.state.device === '移动端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
    },
    prodDown() {
      return this.$store.state.device === '移动端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
    }
  },
  async asyncData({$axios,query}) {
    let params = {
      pageNum: query.pageNum || 1,
      pageSize: 6,
      catgId: query.catgId || query.maxCatgId ||'',
    }
    let {data: pordObj} = await $axios('/web/newsPageList', {params})

    let catgInfo = {}
    if (params.catgId) {
      var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
      catgInfo = catgInfoRes
    }
    console.log(catgInfo);
    

    return {
      pordObj,
      catgInfo
    }
    
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.article-page-list {
  box-sizing: border-box;
  .article-page-item {
    margin: 0;
    height: min-content;
    min-height: 12.875rem;
    border: 1px solid #e6e8ec;
    .cover {
      height: 13.75rem;
      object-fit: cover;
    }
    article {
      padding: 1.125rem;
      font-size: .875rem;
      .title {
        margin-top: .9375rem;
        color: #212222;
        font-size: .875rem;
      }
      .article-page-content {
        margin: 1.25rem 0;
        height: 5rem;
        color: #878b90;
      	-webkit-line-clamp: 4;
      }
      >div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #878b90;
        img {
          width: 1.6875rem;
          height: 1rem;
        }
      }
    }
  }
}

</style>