<!--  -->
<template>
  <div class="image-view">
    <i
      @click.stop="handleClose"
      class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
    ></i>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(i, index) in imageList" :key="index">
          <div class="swiper-zoom-container">
            <div
              :id="`vmRef_${index}`"
              class="swiper-zoom-target"
              :style="`background-image: url(${i})`"
            ></div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { watchEffect } from 'vue';
  import { onMounted, computed, defineProps } from 'vue';

  const props = defineProps({
    data: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: 0,
    },
  });
  const emits = defineEmits(['close']);
  const handleClose = () => {
    console.log('close');
    emits('close');
  };

  const imageList = computed(() => {
    return props.data;
  });

  // const vmZoom = ref([]);
  // const zoomList = [];
  onMounted(() => {
    // let urls = [];

    (window as any).globalSwiper = new (window as any).Swiper('.mySwiper', {
      zoom: {
        toggle: false,
        maxRatio: 5,
      },
      pagination: {
        el: '.swiper-pagination',
      },
      on: {
        init: function (_) {
          // for (let i = 0; i < imageList.value.length; i++) {
          //     vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
          //     zoomElement(vmZoom.value[i])
          // }
        },
        transitionStart: function (_) {
          // alert(swiper.previousIndex)
          // console.log(vmZoom.value[swiper.previousIndex].style.transform)
          // let scale = getTransform(vmZoom.value[swiper.previousIndex])
        },

        touchStart: function () {
          // console.log(swiper.previousIndex)
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    watchEffect(() => {
      if (props.current) {
        if ((window as any).globalSwiper) {
          (window as any).globalSwiper.slideTo(props.current);
        }
      }
    });
  });
</script>

<style lang="scss" scoped>
  .close-btn {
    position: fixed;
    right: 36px;
    top: 36px;
    font-size: 18px;
    cursor: pointer;
    z-index: 100;
  }
  .image-view {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.8);
    z-index: 100;
    // transform: translate3d(0, 0, 0);
    // overflow: hidden;

    .swiper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        transform: translate3d(0, 0, 0);
        overflow: hidden;
      }
      .swiper-zoom-container {
        width: 100%;
        height: 100%;
        transform: translate3d(0, 0, 0);
        // overflow: hidden;
        .swiper-zoom-target {
          width: 100%;
          height: 100%;
          background-position: center;
          background-size: contain;
          margin: 0 auto;
          transform: translate3d(0, 0, 0);
          // img {
          //     width: 100%;
          //     height: 100%;
          // }
        }
      }
    }
  }
</style>
<style lang="scss">
  .image-view {
    .swiper-pagination-bullet {
      background: #f2f2f2;
    }
    .swiper-pagination-bullet-active {
      background: var(--editor-main-color);
    }
  }
</style>
