<template>
  <div class="card-slider">
    <div class="swiper">
      <swiper
        class="swiper gallery-top"
        :options="swiperOptionTop"
        ref="swiperTop"
      >
        <swiper-slide
          class="slide-item"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <img :src="item.pressUrl" alt="" />
          <!-- <div class="enlarge" @click="handelPreviewImages(imgList)">
            <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>
    </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: "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: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      imgViewerVisible: false,
    };
  },
  /* 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) {
      this.imgViewerVisible = true;
      this.previewList = items.map((item) => this.$getFullUrl(item.url));
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-slider {
  width: 100%;
  height: 100%;
  .slide-item {
    background: transparent;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>
