<template>
  <div class="firstDiv">
    <div class="centerDiv">
      <div class="thumb-example">
        <!-- 大轮播图 -->
        <swiper
          class="swiper gallery-top"
          :options="swiperOptionTop"
          ref="swiperTop"
        >
          <swiper-slide
            class="slide-item"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <!-- {{ $getFullUrl(item[imgKey]) }} -->
            <img :src="$getFullUrl(item[imgKey])" alt="" />
            <div class="enlarge" @click="handelPreviewImages(imgList, index)">
              <img src="@/assets/imgs/enlarge-s.png" alt="" />
            </div>
          </swiper-slide>

          <div
            class="swiper-button-next swiper-button-white"
            slot="button-next"
          ></div>
          <div
            class="swiper-button-prev swiper-button-white"
            slot="button-prev"
          ></div>
        </swiper>
        <!-- 小缩略图 -->
        <swiper
          class="swiper gallery-thumbs"
          :options="swiperOptionThumbs"
          ref="swiperThumbs"
        >
          <swiper-slide
            class="slide-item"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <img :src="$getFullUrl(item.pressUrl)" alt="" />
          </swiper-slide>
        </swiper>
      </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: "SlideImage",
  components: {
    swiper,
    swiperSlide,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    imgKey: {
      type: String,
      default: "pressUrl",
    },
    imgList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      swiperOptionTop: {
        loop: false,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: false,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
      imgViewerVisible: false,
      initialIndex: 0,
    };
  },

  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
  methods: {
    handelPreviewImages(items, i) {
      this.imgViewerVisible = true;
      this.previewList = items.map((item) => this.$getFullUrl(item.url));
      this.initialIndex = i;
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.firstDiv {
  /* width: 1920px; */
  /* height: 1080px; */
  width: 100%;
  height: 100%;
  position: relative;
}

.centerDiv {
  width: 100%;
  height: 100%;
  background-color: #f5f5f9;
  /* width: 900px; */
  /* height: 800px; */
  /* position: absolute; */
  /* left: 510px; */
  /* top: 200px; */
}

.thumb-example {
  height: 100%;
  background-color: transparent;
}

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

.slide-item {
  background: #f5f5f9;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.enlarge {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  z-index: 9;
  background-color: #c1925b;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  img {
    width: 24px;
    height: 24px;
  }
}

.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
</style>
