<template>
  <ImageFormat :mode="1" :lazy="lazy" :style="imageStyle" class="image-slide-item" :src="data.contentData" :width="data.width" :height="data.height"></ImageFormat>
</template>

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

export default {
  name: 'ArticleItemSlideImage',
  props: {
    thumbSize: Object,
    data: Object,
    lazy: Boolean
  },
  computed: {
    ...mapState(['yoho']),
    imageStyle() {
      const {width, height} = this.itemSize;

      return {
        width: `${width}rem`,
        height: `${height}rem`
      };
    },
    itemSize() {
      const {height: fHeight} = this.thumbSize;
      const scale = this.data.width / this.data.height;

      if (scale > 1) {
        return {
          width: 750 / 40,
          height: 750 / 40 / scale
        };
      } else if (scale < 1) {
        return {
          width: fHeight * scale,
          height: fHeight
        };
      } else {
        return {
          width: 750 / 40,
          height: 750 / 40
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.image-slide-item {
  overflow: hidden;
}
</style>