<template>
  <ImageFormat :mode="1" :lazy="lazy" :style="imageStyle" class="image-slide-item" :src="data.contentData" :width="imageSize.width" :height="imageSize.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}px`,
        height: `${height}px`
      };
    },
    itemSize() {
      const {height: fHeight} = this.thumbSize;
      const scale = this.data.width / this.data.height;

      if (scale > 1) {
        return {
          width: parseInt(this.yoho.window.clientWidth, 10),
          height: parseInt(this.yoho.window.clientWidth / scale, 10)
        };
      } else if (scale < 1) {
        return {
          width: parseInt(fHeight * scale, 10),
          height: parseInt(fHeight, 10)
        };
      } else {
        return {
          width: this.yoho.window.clientWidth,
          height: this.yoho.window.clientWidth
        };
      }
    },
    imageSize() {
      const {width, height} = this.itemSize;

      if (this.data.width < width && this.data.height < height) {
        return this.itemSize;
      }
      return this.data;
    }
  }
};
</script>

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