<template>
  <div class="carousel">
    <cr-swipe v-if="imgList.length" class="carousel-container" @change="onChange">
      <cr-swipe-item v-for="(item, index) in imgList" :key="index" class="carousel-item">
        <cr-image width="100%" height="100%" class="carousel-item-image" :src="item" fit="cover" />
      </cr-swipe-item>
      <template #indicator>
        <div class="carousel-indicator">{{ swiperCurrent + 1 }}/{{ imgList.length }}</div>
      </template>
    </cr-swipe>
    <cr-loading v-else class="carousel-loading" color="#ec3333" size="24px" />
  </div>
</template>

<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
export default {
  filters: {
    Img2Thumb
  },
  props: {
    imgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      swiperCurrent: 0
    };
  },
  methods: {
    onChange(index) {
      this.swiperCurrent = index;
    }
  }
};
</script>
<style lang="less" scoped>
.carousel {
  height: 100%;
  border-radius: @border-radius-md;
  position: relative;
  overflow: hidden;
  &-loading {
    top: 40%;
    left: 45%;
  }

  &-container {
    height: 100%;
  }
  &-item {
    width: 100%;
    height: 100%;
    // border-radius: @border-radius-md;
    overflow: hidden;
    &-image {
      width: 100%;
      // height: 100% !important;
    }
  }
  &-indicator {
    .text-size(10);
    color: @white;
    text-align: center;
    width: 30px;
    height: 17px;
    position: absolute;
    right: @padding-sm;
    bottom: @padding-x;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
  }
}
</style>
