<template>
  <!--尺码图片展示-->
  <div v-if="sizeImage.imageUrl" class="size-img-container" :data-bid="brandId" :data-pid="productId">
    <img v-lazy="sizeImage.imageUrl" :style="{width: sizeImage.imageWidth, height: sizeImage.imageHeight}">
  </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 {
      sizeImage: {
        imageUrl: '',
        imageWidth: '100%',
        imageHeight: 'auto'
      }
    };
  },
  activated() {
    this.getProductSizeImage({brand_id: this.brandId, product_id: this.productId}).then(result => {
      if (result.code === 200 && result.data && result.data.imageUrl) {
        let url = result.data.imageUrl.split('?')[0];

        // let imageWidth = result.data.imageWidth || 750;

        this.sizeImage.imageUrl = url + '?imageView2/2/w/750/q/60';

        // this.sizeImage.imageWidth = imageWidth ? (imageWidth / 40) + 'rem' : '100%';
        // this.sizeImage.imageHeight = imageHeight ? (imageHeight / 40) + 'rem' : 'auto';
      }
    });
  },
  methods: {
    ...mapActions(['getProductSizeImage'])
  }
};
</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>