<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 class="good__swiper" @change="onChange">
      <cr-swipe-item v-for="(item, index) in swiperImgList" :key="index" class="good__swiper__item">
        <cr-image
          :src="item | imogr({ w: 375, h: 375 })"
          width="10rem"
          height="10rem"
          fit="contain"
        />
      </cr-swipe-item>
      <template #indicator>
        <div v-if="swiperImgList.length > 1" 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
    };
  },
  computed: {
    ...mapGetters(['swiperImgList'])
  },
  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>
