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

        this.sizeImage = url + '?imageView2/2/w/750/q/60';
      }
    });
  },
  methods: {
    ...mapActions(['getProductSizeImage'])
  }
};
</script>

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

    img {
      width: 100%;
    }
  }
</style>