<template>
  <!--尺码图片展示-->
  <div v-if="sizeImageList.length">
    <div v-for="item in sizeImageList" :key="item.imageUrl" class="size-img-container" :data-bid="brandId" :data-pid="productId">
      <img v-lazy="item.imageUrl" :style="{width: item.imageWidth, height: item.imageHeight}">
    </div>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';

const {mapActions} = createNamespacedHelpers('product');

export default {
  name: 'sizeImage',
  props: {
    brandId: {
      type: Number,
      default() {
        return 0;
      }
    },
    productId: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      sizeImageList: []
    };
  },
  activated() {
    this.getProductSizeImages({brand_id: this.brandId, product_id: this.productId}).then(result => {
      if (result.code === 200 && result.data) {

        let listArr = [];

        result.data.forEach(function(item) {

          let url = item.imageUrl.split('?')[0];

          listArr.push({imageUrl: url + '?imageView2/2/w/750/q/60', imageWidth: '100%', imageHeight: 'auto'});
        });

        this.sizeImageList = listArr;
      }
    });
  },
  methods: {
    ...mapActions(['getProductSizeImages'])
  }
};
</script>

<style lang="scss" scoped>
  .size-img-container {
    position: relative;
    width: 750px;
    padding: 0 40px;
    margin: 30px auto;

    img {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  }
</style>