<template>
  <!-- 产品列表 -->
  <section class="products-list">
    <ul class="row pl-0">
      <li class="col-12 col-md-4"  v-for="item in pordObj.records" :key="item.id">
        <nuxt-link 
          class="products-item box_shadow mt-2" 
          to="/products/123123"
        >
          <article class="product-card box_shadow">
            <img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
            <div class="product-card-content">
              <h4 class="text-ellipsis">{{ item.title }}</h4>
              <div class="prod-desc text-ellipsis" v-html="item.description"></div>
              <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
              <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
              <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
            </div>
          </article>
        </nuxt-link>
      </li>
    </ul>
    <SeoPagination class="mt-4" :total="pordObj.total" />
  </section>
</template>

<script>
export default {
  name: 'products-list',
  watchQuery: ['pageNum', 'catgId'],
  data() {
    return {
      bannerTopOptions: {
        
      },
    }
  },
  async asyncData({$axios,query}) {
    let params = {
      pageNum: query.pageNum || 1,
      pageSize: 9,
      catgId: query.catgId || '',
    }
    let {data: pordObj} = await $axios('/web/prodPageList', {params})
    console.log(pordObj);
    
    return {
      pordObj
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.products-list {
  box-sizing: border-box;
  ul {
    margin: 0;
    li {
      padding: 0 .3125rem;
      .products-item {
        width: 100%;
        display: inline-block;
        border: 1px solid #e6e8ec;
        .product-card {
          width: 100%;
          height: min-content;
        }
        .product-card-content {
          width: 100%;
          height: 8.25rem;
          padding: 1.125rem 1rem;
          border-top: .0625rem solid #e6e8ec;
          font-size: .875rem;
          h4 {
            margin-bottom: .8125rem;
            color: #212222;
            -webkit-line-clamp: 1;
            font-size: .875rem;
          }
          p {
            color: #878b90;
          }
          .prod-desc {
	          -webkit-line-clamp: 4;			//行数
          }
          .view-details {
            margin: 0 auto;
            margin-top: 2rem;
          }
        }
      }
    }
  }
}

</style>