<template>
  <div class="gallary"
       @click="handleGallaryClick"
       v-show="showSwiper"
       :class="{animation:showAnimation}">
    <div class="gallary__wrapper">
      <swiper :options="swiperOptions"
              ref="mySwiper">
        <swiper-slide v-for="(item,index) of imgs"
                      :key="index">
          <div class="swiper-zoom-container">
            <img class="gallary__img"
                 :src="item" />
          </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination"
             slot="paginmySwiperation"></div> -->
      </swiper>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  name: 'Gallary',
  components: {
    swiper, swiperSlide
  },
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      }
    },
    showGallary: {
      type: Boolean,
      default: false
    },
    showIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      swiperOptions: {
        // pagination: {
        //   type: 'fraction',
        //   el: '.swiper-pagination'
        // },
        observeParents: true,
        observer: true,
        zoom: {
          toggle: false
        }
      },
      imgSwiper: null,
      showAnimation: false,
      showSwiper: this.showGallary
    };
  },
  watch: {
    showGallary: {
      handler(val, oldVal) {
        this.showSwiper = val;
        if (val) {
          this.imgSwiper.slideTo(this.showIndex, 0, false);
          this.$nextTick(() => {
            this.showAnimation = true;
          });
        } else {
          this.showAnimation = false;
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.imgSwiper = this.$refs.mySwiper.swiper;
    });
  },
  methods: {
    handleGallaryClick() {
      this.$emit('update:showGallary', false);
      this.$emit('gallaryClose');
    }
  }
};
</script>

