<template>
  <swiper-container
    init="false"
    class="swiper-container"
    :slides-per-view="slidesPerView"
    :space-between="isMobile ? 0 : 2"
    :centeredSlides="previewPictures.length == 1"
  >
    <swiper-slide v-for="(src, index) in previewPictures" :key="index">
      <img :src="src" alt="" @click.stop="openPreviewPop(index)" />
    </swiper-slide>
  </swiper-container>
  <template v-if="hasCarouse">
      <div v-show="showPrevNext" class="listingDetail-prev-button">
        <i class="lofty_iconfont lofty-icon-arrow_08_left"></i>
      </div>
      <div v-show="showPrevNext" class="listingDetail-next-button">
        <i class="lofty_iconfont lofty-icon-arrow_08_right"></i>
      </div>
  </template>
  
</template>

<script setup>
import store from "./store.js";
import { isMobile } from "@/util";
import { register } from "swiper/element/bundle";
import { onMounted, ref } from "vue";
import PreviewImgPop from "./components/previewImgPop.vue";
import PopMgr from "@/components/pop/popMgr.js";

register();

const props = defineProps({ id: String });
let { previewPictures, module } = store[props.id];

const slidesPerView = ref(3)
const hasCarouse = computed(()=>{
  return isMobile ? previewPictures.length > 1 : previewPictures.length > 3;
})

onMounted(() => {
  init();
});

function init() {
  const swiperEl = module.$('.swiper-container')
  let params = {
    navigation: {
      prevEl: ".listingDetail-prev-button",
      nextEl: ".listingDetail-next-button",
    },
    injectStyles: [
      `:host svg {
        width: ${isMobile ? "6px" : "12px"};
      }`,
      `:host .swiper-button-disabled {
        pointer-events: auto;
      }`,
    ],
  }
  Object.assign(swiperEl, params);
  if (previewPictures.length <= 3) {
    slidesPerView.value = previewPictures.length > 1? previewPictures.length : 2;
  }
  slidesPerView.value = isMobile ? 1 : slidesPerView.value
  swiperEl.initialize();
}

let previewIns = null;

function destroyPreview() {
  previewIns?.unMountSelf();
  previewIns = null;
}

const showPrevNext = ref(true)
function openPreviewPop(index) {
  destroyPreview();
  previewIns = PopMgr.create(PreviewImgPop, {
    imgList: [...previewPictures],
    previewImgIndex: index || 0,
    onClose: () => {
      showPrevNext.value = true;
      // 等 pop 离场动画结束再卸载，避免动画被打断
      setTimeout(destroyPreview, 300);
    }
  });
  showPrevNext.value = false;
}
</script>

<style lang="scss">
.swiper-container {
  width: 100%;
  display: flex;
  height: 350px;
  @include media-600 {
    height: 220px;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    object-position: bottom right;
  }
}
.listingDetail-prev-button,
.listingDetail-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;
  }
  @include media-600 {
    width: 30px;
    height: 30px;
    line-height: 30px;
     i {
      font-size: 14px;
    }
  }
  &.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
  }
  &:hover {
    background: rgba(0, 0, 0, 0.4);
  }
}
.listingDetail-prev-button {
  left: 15px;
}
.listingDetail-next-button {
  right: 15px;
}

</style>
