<template>
  <div class="slide-img-group">
    <div class="list">
      <swiper
        class="swiper gallery-thumbs"
        :options="swiperOptionThumbs"
        ref="swiperThumbs"
      >
        <swiper-slide
          class="slide-item"
          v-for="(item, index) in imgList"
          :key="index"
          @click="handleClickItem(item)"
        >
          <div
            class="img-container"
            @click="handelPreviewImages(imgList, index)"
          >
            <slot name="img" :item="item"></slot>
          </div>
          <slot name="info" :item="item" />
        </swiper-slide>

        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </swiper>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next">
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev">
        <i class="el-icon-arrow-left"></i>
      </div>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="previewList"
      :initial-index="initialIndex"
    />
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "SlideImageGroup",
  components: {
    swiper,
    swiperSlide,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    imgKey: {
      type: String,
      default: "pressUrl",
    },
    imgList: {
      type: Array,
      default: () => [],
    },
    needEnlarge: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      swiperOptionThumbs: {
        loop: false,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        slidesPerView: 4,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      imgViewerVisible: false,
      initialIndex: 0,
    };
  },

  mounted() {},
  methods: {
    handelPreviewImages(items, index) {
      this.imgViewerVisible = true;
      this.previewList = items.map((item) => this.$getFullUrl(item.url));
      this.initialIndex = index;
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
    handleClickItem(item) {
      this.$emit("handleClickItem", item);
    },
  },
};
</script>

<style scoped lang="scss">
.slide-img-group {
  // height: 100%;
  height: 240px;
  .list {
    position: relative;
    display: flex;
    justify-content: center;
  }
}

.swiper-container {
  //   padding: 0 60px;
  width: calc(100% - 140px);
  // overflow-y: auto;
  ::v-deep .swiper-wrapper {
    display: flex;
    // justify-content: center;
  }
}

.list,
.swiper,
.swiper-wrapper {
  height: 100%;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.slide-item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;

  .img-container {
    width: 100%;
    // height: 100%;
    background: #f5f5f9;
    height: 200px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}

.swiper-button-next,
.swiper-button-prev {
  background-image: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba($deepBlue, 0.4);
  transform: translateY(-20px);
  color: #333;
}

.enlarge {
  position: absolute;
  bottom: 19px;
  right: -7px;
  display: flex;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background: rgba($color: #000000, $alpha: 0.3);
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;

  img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}

::v-deep .swiper-pagination-bullets {
  bottom: -10px;
  .swiper-pagination-bullet {
    margin-right: 10px;
    width: 10px;
    height: 10px;
  }
  .swiper-pagination-bullet-active {
    background: $deepBlue;
  }
}
</style>
