<template>
  <pop ref="popRef" customClass="listing-detail-preview-img" :on-close="onClose" :allowClose="true" :outClose="true">
    <div v-if="isMobile" class="mobile-previewImg-gallery-content">
      <img
        class="mobile-previewImg-gallery-img"
        :src="src"
        alt=""
        v-for="(src, index) in imgList"
        :key="src + '_' + index"
      />
    </div>
    <template v-else>
      <swiper-container
        ref="swiperElRef"
        class="swiper-previewImg-container"
        :init="false"
        :centeredSlides="true"
        :initialSlide="previewImgIndex"
      >
        <swiper-slide
          class="previewImg-slide"
          v-for="(src, index) in imgList"
          :key="src + '_' + index"
        >
          <img :src="src" alt="" />
        </swiper-slide>
      </swiper-container>
      <template v-if="imgList.length > 1">
        <div ref="prevBtnRef" class="previewImg-prev-button">
          <i class="lofty_iconfont lofty-icon-arrow_08_left"></i>
        </div>
        <div ref="nextBtnRef" class="previewImg-next-button">
          <i class="lofty_iconfont lofty-icon-arrow_08_right"></i>
        </div>
      </template>
    </template>
  </pop>
</template>

<script setup>
import pop from "@/components/pop/index.vue";
import { isMobile } from "@/util/index.js";
import { ref, nextTick, onMounted } from "vue";
const { imgList, previewImgIndex, onClose } = defineProps({
  imgList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  previewImgIndex: {
    type: Number,
    default: 0,
  },
  onClose: Function,
});
const popRef = ref(null);
const swiperElRef = ref(null);
const prevBtnRef = ref(null);
const nextBtnRef = ref(null);
function init() {
  const swiperEl = swiperElRef.value;
  const params = {
    navigation: {
      prevEl: prevBtnRef.value,
      nextEl: nextBtnRef.value,
    },
    injectStyles: [
      `:host svg {
        width: ${isMobile ? "6px" : "8px"};
      }`,
      `:host .swiper-button-disabled {
        pointer-events: auto;
      }`,
    ],
  };
  Object.assign(swiperEl, params);
  swiperEl.initialize();
}
onMounted(() => {
  popRef.value.open();
  if (isMobile) {
      nextTick(() => {
        positionCurrentImg();
      });
  } else {
    init();
  }
});

function positionCurrentImg() {
  const el = document.querySelectorAll(".mobile-previewImg-gallery-img")[previewImgIndex];
    el && el.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "start",
    });
}
</script>

<style lang="scss">
.swiper-previewImg-container {
  .previewImg-slide {
    height: 90vh;
    text-align: center;
    @include media-600 {
      height: auto;
    }
    img {
      width: auto;
      max-width: 1000px;
      height: 100%;
      object-fit: contain;
      @include media-600 {
        max-width: 100%;
      }
    }
  }
}
.previewImg-prev-button,
.previewImg-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor: pointer;
  i {
    color: #fff;
    font-size: 20px;
  }
  &.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
  }
  &:hover {
    background: rgba(0, 0, 0, 0.4);
  }
}
.previewImg-prev-button {
  left: 25px;
}
.previewImg-next-button {
  right: 25px;
}

.mobile-previewImg-gallery-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
  width: 100%;
  img {
    width: 100%;
    object-fit: contain;
  }
}
</style>
<style>
.listing-detail-preview-img {
  overflow: auto;
}
</style>
