<template>
  <div>
    <div class="item" v-if="list.length" v-for="(product,index) in list" @click="goDetail(product)"
         :class="((index === 0 || index === 1) ? 'top-line':'') +' '+((index) % 2 === 0 ? 'right-line' :'')"
         :key="index">
      <div class="item-price">{{product.price ? '¥' + product.price : ' '}}</div>
      <ImgSize class="item-imge" :src="product.default_images" :width="300" :height="300"/>
      <div class="item-name">{{product.product_name}}</div>
    </div>
  </div>
</template>

<script>
import {Scroll} from 'cube-ui';
import ImgSize from '../../../components/img-size';

export default {
  props: {
    list: Array,
  },
  methods: {
    goDetail(product) {
      this.$router.push({
        name: 'ProductDetail',
        params: {
          productId: product.id,
        }
      });
    }
  },
  components: {
    ImgSize,
    Scroll,
  }
};
</script>

<style lang="scss" scoped>
  .top-line {
    border-top: 1px #ddd solid;
  }

  .right-line {
    border-right: 1px #ddd solid;
  }

  .item {
    width: 9.37rem;
    border-bottom: 1px #ddd solid;
    padding: 28px 38px 0 38px;
    float: left;
    overflow: hidden;
    height: 560px;
  }

  .item-price {
    height: 32px;
    margin-bottom: 38px;
    font-size: 28px;
    color: #000;
    letter-spacing: 0;
  }

  .item-imge {
    width: 300px;
    height: 300px;
  }

  .item-name {
    font-size: 28px;
    color: #000;
    letter-spacing: 0;
    text-align: center;
    line-height: 40px;
    margin-top: 38px;
    margin-bottom: 44px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>