<template>
  <div class="thumb-example">
    <!-- swiper1 -->
    <swiper
      class="swiper gallery-top"
      :options="swiperOptionTop"
      ref="swiperTop"
    >
      <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
        <img :src="item.url" style="width: 100%; height: 100%" alt="" />
      </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>
    <!-- swiper2 Thumbs -->
    <swiper
      class="swiper gallery-thumbs"
      :options="swiperOptionThumbs"
      ref="swiperThumbs"
    >
      <swiper-slide
        class="slide"
        style="width: 30%; height: 100%"
        v-for="(item, index) in bigImg"
        :key="item.id"
      >
        <img style="width: 100%; height: 100%" :src="item.url" alt="" />
        <p class="timeInfo">{{ 7 + index }}:00:12</p>
      </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>
</template>

<script>
export default {
  mounted() {
    // 实现swiper双向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
  data() {
    return {
      //轮播大图配置
      bigImg: [
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
          id: 0,
        },
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
          id: 1,
        },
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
          id: 2,
        },
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
          id: 3,
        },
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
          id: 4,
        },
        {
          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
          id: 5,
        },
      ],
      swiperOptionTop: {
        zoom: true,
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // autoplay: {  //自动轮播
        //   delay: 2000,
        //   disableOnInteraction: false
        // },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },

  methods: {},
};
</script>
<style lang="less" scoped>
.thumb-example {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .gallery-top {
    // height: 80% !important;
    height: 80% !important;
    width: 100%;
  }
  .gallery-thumbs {
    height: 20% !important;
    box-sizing: border-box;
    padding: 10px 0px;
    width: auto;
    margin-left: 2px;
    .swiper-button-next {
      right: 0px;
    }
    .swiper-button-prev {
      left: 0px;
    }
    .timeInfo {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #f0f0f0;
      padding: 4px 0px;
      font-size: 14px;
      text-align: center;
    }
  }
}

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

.gallery-thumbs .swiper-slide {
  // width: 20%;
  // height: 80px;
  // opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  border: 3px solid @color-primary;
}
</style>
