<template>
  <div class="image-container">
    <div class="metas-image">
      <div class="image-content">
        <!--:free-mode="true" -->
        <Swiper
          :pagination="{
            type: 'fraction',
          }"
         
          :zoom="{
            maxRatio: 10,
            minRatio: 1,
           
          }"
          class="mySwiper"
          :modules="modules"
          :slides-per-view="1"
          :free-mode="true"
         
        >
          <swiper-slide v-for="(item, index) in currentTag.image" :key="index">
            <div class="swiper-zoom-container">
              <img :src="item.ossPath" />
            </div>
          </swiper-slide>
        </Swiper>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  nextTick,
  onMounted,
  ref,
  computed,
  onUnmounted,
  unref,
  watchEffect,
} from "vue";
import { useStore } from "vuex";
import { useI18n, getLocale } from "@/i18n";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Zoom } from "swiper";
// Import Swiper styles
import "swiper/css";
import "swiper/css/zoom";

// import "swiper/swiper.scss";
// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用

const store = useStore();
const { t } = useI18n({ useScope: "global" });

const currentTag = computed(() => store.getters["tags/currentTag"]);

const modules = ref([Pagination, Navigation, Zoom]);
const hasAudio = computed(
  () =>
    currentTag.value.imageTextInfo.audio.ossPath &&
    currentTag.value.imageTextInfo.audio.ossPath.length > 0
);
const hasImages = computed(
  () =>
    currentTag.value.imageTextInfo.imageList &&
    currentTag.value.imageTextInfo.imageList.length > 0
);
// debugger

onMounted(() => {});

onUnmounted(() => {});
</script>

<style lang="scss">
.image-container {
  height: calc(100% - 50px);
  width: 100%;
  overflow: hidden;
}
.metas-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .image-content {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    .mySwiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide .swiper-zoom-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    // .swiper-slide .main-img {
    //   // display: block;
    //   width: 100%;
    //   height: 100%;
    //   object-fit: contain;
    // }


  }
}
.swiper-pagination {
  width: 56px;
  height: 32px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 34px;;
  .swiper-pagination-total {
    color: #858586;
  }
}
</style>
