<template>
  <div>
    <template>
      <el-dialog :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog" width="100%" lock-scroll @close="swiperClose">
        <swiper :options="swiperOption" class="gallery-top" ref="swiperTops">
          <swiper-slide v-for="(item, index) in list" :key="index">
            <el-image class="swiper-slide__img" :src="item"></el-image>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>

        <swiper style="margin-top: 30px" :options="swiperThumbs" class="gallery-thumbs" ref="swiperThumbs">
          <swiper-slide class="slide" style="width: 100px; height: 100px" v-for="(item, index) in list" :key="index">
            <el-image style="width: 100px; height: 100px" class="swiper-slide__img" :src="item"></el-image>
          </swiper-slide>
        </swiper>
      </el-dialog>
    </template>
  </div>
</template>

<script>
export default {
  name: 'swiperWrapper',
  data() {
    return {
      swiperOption: {
        initialSlide: 0,
        spaceBetween: 10,
        slidesPerView: 'auto',
        watchSlidesVisibility: true,
        loopedSlides: 0,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      },
      swiperThumbs: {
        initialSlide: 0,
        spaceBetween: 10, //边距
        slidesPerView: 'auto',
        loopedSlides: 0,
        touchRatio: 0.2,
        loop: false, //无限切换
        slideToClickedSlide: true,
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      },
      visible: false,
      list: []
    }
  },
  updated() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTops.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
  methods: {
    init(list) {
      this.visible = true
      this.list = list
      this.$set(this.swiperOption, 'loopedSlides', list.length)
      this.$set(this.swiperThumbs, 'loopedSlides', list.length)
    },
    swiperClose() {
      this.$set(this.swiperOption, 'initialSlidev', 0)
      this.$set(this.swiperThumbs, 'initialSlidev', 0)
      this.$emit('swiperclose', true)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 5vh !important;
  background: none;
  box-shadow: none;
  .el-dialog__header {
    padding: 0;
    .el-dialog__headerbtn {
      top: -20px;
      .el-dialog__close {
        font-size: 46px;
        border-radius: 70%;
        border: 2px solid;
        color: #efefef;
      }
    }
  }
}
::v-deep .swiper-wrapper {
  text-align: center;
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}
.swiper-slide {
  &__img {
    height: 600px;
  }
}
.gallery-thumbs .swiper-slide {
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
  border: 2px solid #007aff;
}
</style>
