<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)"
        >
          <!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
          <div class="img-container" @click="handelPreviewImages(imgList)">
            <slot name="img" :item="item"></slot>
          </div>
          <slot name="info" :item="item" />
          <!-- <div
            class="enlarge"
            @click="handelPreviewImages(imgList)"
            v-if="needEnlarge"
          >
            <img src="@/assets/imgs/enlarge-s.png" alt="" />
            <span>查看大图</span>
          </div> -->
        </swiper-slide>
        <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>

        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </swiper>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="previewList"
    />
  </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,
    };
  },

  mounted() {},
  methods: {
    handelPreviewImages(items) {
      this.imgViewerVisible = true;
      this.previewList = items.map((item) => this.$getFullUrl(item.url));
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
    handleClickItem(item) {
      debugger;
      this.$emit("handleClickItem", item);
    },
  },
};
</script>
     
<style scoped lang="scss">
$themeColor:#132c33;
.slide-img-group {
  height: 100%;
}

.swiper-container {
  //   padding: 0 60px;

  ::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;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: $themeColor;
  font-weight: bolder;
  font-size: 28px;
  transform: translateY(-20px);
}
.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: 0;
}
</style>
     
     
     
     