<template>
  <div class="imagetext-container">
    <div class="metas-imagetext">
      <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"
          @paginationRender="handlePageRender"
        >
          <swiper-slide
            v-for="(item, index) in currentTag.imageTextInfo.imageList"
            :key="index"
          >
            <div class="swiper-zoom-container">
              <img :src="item.ossPath" />
            </div>
          </swiper-slide>
        </Swiper>
        <div class="audio-control" v-if="hasAudio">
          <ui-icon
            @click.prevent="pauseAudio"
            type="player_pause"
            v-if="isPlaying"
          ></ui-icon>
          <ui-icon @click="playAudio" type="player_playback" v-else></ui-icon>
          <span class="timeline">{{ time }} / {{ audioAllTime }}</span>
          <audio
            id="audioTag"
            class="noshow"
            autoplay
            :src="currentTag.imageTextInfo.audio.ossPath"
          ></audio>
        </div>
      </div>
      <div class="text-content">
        <div v-html="currentTag.imageTextInfo.text"></div>
      </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
const time = ref("00:00");
const audioAllTime = ref("00:00");
const isPlaying = ref(false);

function transTime(time) {
  var duration = parseInt(time);
  var minute = parseInt(duration / 60);
  var sec = (duration % 60) + "";
  var isM0 = ":";
  if (minute == 0) {
    minute = "00";
  } else if (minute < 10) {
    minute = "0" + minute;
  }
  if (sec.length == 1) {
    sec = "0" + sec;
  }
  return minute + isM0 + sec;
}

onMounted(() => {
  const audio = document.querySelector("#audioTag");
  watchEffect(() => {
    if (!unref(hasImages)) {
      const audioControl = document.querySelector(".audio-control");
      console.log("audioControl", audioControl);
      audioControl.style.left = "50%";
      audioControl.style.transform = "translateX(-50%)";
    }
  });
  nextTick(() => {
    if (unref(hasAudio)) {
      audio.addEventListener("durationchange", (e) => {
        audioAllTime.value = transTime(e.currentTarget.duration);
        console.log("e", unref(audioAllTime));
        isPlaying.value = true;
      });

      console.log("audio", audio);
      audio.addEventListener(
        "playing",
        function (e) {
          isPlaying.value = true;
        },
        false
      );
      audio.addEventListener(
        "pause",
        function (e) {
          isPlaying.value = false;
        },
        false
      );
      audio.addEventListener(
        "timeupdate",
        function (event) {
          time.value = transTime(event.target.currentTime);
        },
        false
      );
    }
  });
});

const playAudio = () => {
  const audio = document.querySelector("#audioTag");
  audio && audio.play();
};
const pauseAudio = () => {
  const audio = document.querySelector("#audioTag");
  audio && audio.pause();
};
onUnmounted(() => {
  const audio = document.querySelector("#audioTag");
  if (audio) {
  }
  pauseAudio();
});

function handlePageRender(_, el) {
  if (unref(hasAudio)) {
    el.style.left = "20px";
    el.style.transform = "translateX(0)";
  }
}
</script>

<style lang="scss">
.imagetext-container {
  overflow-y: scroll;
  height: calc(100vh - 50px);
  width: 100%;
  overflow-x: hidden;
}
.metas-imagetext {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 180%;
  .image-content {
    height: 80vh;
    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;
    // }

    .audio-control {
      position: absolute;
      z-index: 10000;
      bottom: 20px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.6);
      width: 122px;
      height: 32px;
      word-spacing: -2px;
      background: rgba(0, 0, 0, 0.4);
      opacity: 1;
      border: 1px solid rgba(255, 255, 255, 0.2);
      // left: 75%;
      right: 20px;
      // transform: translateX(-75%);
      line-height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        margin-left: 0;
        color: #fff;
        margin-right: 2px;
      }
      .timeline {
        color: #fff;
      }
    }
  }
  .text-content {
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    min-height: 90vh;
    padding: 30px 20px 135px 20px;
    word-wrap: break-word;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    overflow-y: scroll;
    line-height: 1.5;
    :deep(p) {
      line-height: 24px;
    }
    &::before {
      content: "";
      width: 35px;
      height: 4px;
      background: #444444;
      border-radius: 13px 13px 13px 13px;
      opacity: 1;
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.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: 20px;
  .swiper-pagination-total {
    color: #858586;
  }
}
</style>
