<template>
  <div style="width: 10re; height: 10rem;">
    <!-- <img v-imogr :src="swiperImgList[0]" width="10rem" height="10rem" fit="contain" />

    <cr-image v-imogr :src="swiperImgList[0]" width="10rem" height="10rem" fit="contain" />
    <cr-image
      v-imogr
      src="https://img11.360buyimg.com/sku/jfs/t1/174920/40/20447/264394/60f560a9Ea67ce532/122b2957f739e510.jpg"
      width="10rem"
      height="10rem"
      fit="contain"
    />
    <img
      v-imogr
      src="https://img11.360buyimg.com/sku/jfs/t1/174920/40/20447/264394/60f560a9Ea67ce532/122b2957f739e510.jpg"
      style="width: 10rem; height: 10rem;"
      fit="contain"
    /> -->

    <cr-swipe v-if="renderSwipe" class="good__swiper" @change="onChange">
      <cr-swipe-item v-for="(item, index) in swiperImgList" :key="index" class="good__swiper__item">
        <cr-image
          v-imogr="{ w: 375, h: 375 }"
          :src="item"
          width="10rem"
          height="10rem"
          fit="contain"
        />
      </cr-swipe-item>
      <template #indicator>
        <div class="good__swiper__indicator">{{ current }} / {{ swiperImgList.length }}</div>
      </template>
    </cr-swipe>
  </div>
</template>
<script>
import { mapGetters } from '../store';

export default {
  name: 'GoodSwiper',
  data() {
    return {
      current: 1,
      renderSwipe: false
    };
  },
  computed: {
    ...mapGetters(['swiperImgList'])
  },
  watch: {
    swiperImgList: {
      handler(val, oldVal) {
        if (val[0] !== oldVal[0]) {
          const imgFirst = new Image();
          imgFirst.src = val[0];
          imgFirst.onload = () => {
            this.renderSwipe = true;
          };
        }
      }
    }
  },
  methods: {
    onChange(index) {
      this.current = index + 1;
    }
  }
};
</script>
<style lang="less" scoped>
.good {
  &__swiper {
    position: relative;
    width: 375px;
    height: 375px;
    overflow: hidden;

    &__item {
      width: 375px;
      height: 375px;
    }
    &__indicator {
      position: absolute;
      right: 15px;
      bottom: 9px;
      padding: 2px 8px;
      .text-size(12);
      background-color: fade(@black, 40%);
      color: @white;
      border-radius: 10px;
    }
  }
}
</style>
