<template>
  <div class="product-list-wrap">
    <div class="product-list">
      <div class="product-item" v-for="(item, index) in list" :key="index">
        <div class="thumb">
          <ImageFormat :src="item.default_images" :width="235" :height="314"></ImageFormat>
        </div>
        <div class="name">{{item.product_name}}</div>
        <div class="price">
          <span class="sale-price">¥{{item.sales_price}}</span>
          <span class="market-price">¥{{item.market_price}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    list: Array
  }
};
</script>

<style type="scss" scoped>
  .product-list-wrap {
    display: flex;
    justify-content: center;
  }

  .product-list {
    max-width: 714px;
    display: flex;
    flex-wrap: wrap;
  }

  .product-item {
    width: 50%;
    padding: 18px 18px 48px;

    .thumb {
      height: 428px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .name {
      height: 68px;
      margin-top: 24px;
      font-size: 24px;
      line-height: 1.4;
      overflow: hidden;
    }

    .sale-price {
      color: #d0021b;
      font-size: 26px;
      font-weight: 500;
    }

    .market-price {
      color: #b0b0b0;
      font-size: 25px;
      margin-right: 4px;
      text-decoration: line-through;
    }
  }
</style>