<template>
  <div class="imagetxtcon">
    <div class="title">
      <i class="iconfont icon-material_image title-icon" />
      {{ currentTag.hotspotTitle }}
    </div>

    <div class="main-text-container">
      <div class="image-left">
        <div
          class="realimgcon"
          :class="{ fullimgcon: objectFit === 'contain' }"
        >
          <img
            class="image"
            v-lazy="currentTag.imageTextInfo.imageList[currentIndex].ossPath"
            :style="imageStyle"
            @wheel.prevent="onImageWheel"
          />
        </div>
        <div class="toolbar-container">
          <div
            class="toolbar"
            :class="{ multi: currentTag.imageTextInfo.imageList.length > 1 }"
          >
            <div
              class="left"
              v-if="currentTag.imageTextInfo.imageList.length > 1"
            >
              <i
                v-if="currentTag.imageTextInfo.imageList.length > 1"
                class="iconfont icon-material_preview_previous hover-tips"
                :class="{ disabled: currentIndex === 0 }"
                @click="onClickPrevious()"
              >
                <div>
                  <div class="remark">{{ $t("common.prev") }}</div>
                </div>
              </i>
              <i
                v-if="currentTag.imageTextInfo.imageList.length > 1"
                class="iconfont icon-material_preview_next1 hover-tips append-splitter"
                :class="{
                  disabled:
                    currentIndex ===
                    currentTag.imageTextInfo.imageList.length - 1,
                }"
                @click="onClickNext()"
              >
                <div>
                  <div class="remark">{{ $t("common.next") }}</div>
                </div>
              </i>
            </div>
            <div class="right">
              <i
                :class="{ disabled: scaleRate >= 2 }"
                class="iconfont icon-material_preview_enlarge hover-tips"
                @click="onClickZoomIn()"
              >
                <div>
                  <div class="remark">{{ $t("common.zoomIn") }}</div>
                </div>
              </i>

              <i
                :class="{ disabled: scaleRate <= 0.5 }"
                class="iconfont icon-material_preview_narrow hover-tips"
                @click="onClickZoomOut()"
              >
                <div>
                  <div class="remark">{{ $t("common.zoomOut") }}</div>
                </div>
              </i>

              <i
                v-if="canFullScreen && objectFit === 'scale-down'"
                class="iconfont icon-material_preview_full_screen hover-tips"
                @click="onClickFullScreen()"
              >
                <div>
                  <div class="remark">{{ $t("common.fullScene") }}</div>
                </div>
              </i>

              <i
                v-if="canFullScreen && objectFit === 'contain'"
                class="iconfont icon-material_preview_drop_out hover-tips"
                @click="onClickCancelFullScreen()"
              >
                <div>
                  <div class="remark">{{ $t("common.exitFullScene") }}</div>
                </div>
              </i>
            </div>
          </div>
          <div class="audio-control" v-if="hasAudio">
            <ui-icon
              @click="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>
      <!-- 文字 -->
      <div class="text-right" v-if="currentTag.imageTextInfo.text.length > 0">
        <div class="txtbody" v-html="currentTag.imageTextInfo.text"></div>
      </div>
    </div>
    <div class="btnmask"></div>
  </div>
</template>

<script setup>
import { nextTick } from "process";
import { ref, computed, unref, onMounted, onUnmounted, watchEffect } from "vue";
import { useStore } from "vuex";
const store = useStore();
const hasAudio = computed(
  () =>
    currentTag.value.imageTextInfo.audio.ossPath &&
    currentTag.value.imageTextInfo.audio.ossPath.length > 0
);
const scaleRate = ref(1);

const objectFit = ref("scale-down");

const canFullScreen = ref(true);

const imageStyle = computed(() => {
  return {
    transform: `scale(${scaleRate.value})`,
    objectFit: objectFit.value,
  };
});

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

const currentIndex = ref(0);

const onImageWheel = (e) => {
  if (e.deltaY < 0) {
    let scle = scaleRate.value * 1.1;
    if (scle > 2) {
      scaleRate.value = 2;
    } else {
      scaleRate.value = scle;
    }
  } else {
    let scle = scaleRate.value * 0.9;
    if (scle < 0.5) {
      scaleRate.value = 0.5;
    } else {
      scaleRate.value = scle;
    }
  }
};

const onClickZoomIn = () => {
  scaleRate.value = Math.min(scaleRate.value * 1.1, 2);
};
const onClickZoomOut = () => {
  scaleRate.value = Math.max(scaleRate.value * 0.9, 0.5);
};

const onClickPrevious = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};
const onClickNext = () => {
  if (
    currentIndex.value <
    unref(currentTag).imageTextInfo.imageList.length - 1
  ) {
    currentIndex.value++;
    console.log("currentIndex", unref(currentIndex));
  }
};

const onClickFullScreen = () => {
  scaleRate.value = 1;
  objectFit.value = "contain";
};
const onClickCancelFullScreen = () => {
  scaleRate.value = 1;
  objectFit.value = "scale-down";
};
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;
}
const time = ref("00:00");
const audioAllTime = ref("00:00");
const isPlaying = ref(false);
onMounted(() => {
  const audio = document.querySelector("#audioTag");
  nextTick(() => {
    if (unref(hasAudio)) {
      audio.addEventListener("loadedmetadata", (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(() => {
  pauseAudio();
});

watchEffect(() => {
  if (!unref(hasAudio)) {
    debugger;
  }
});
</script>

<style lang="scss" scoped>
.imagetxtcon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

  > video {
    max-width: 960px;
    height: 540px;
  }

  .main-text-container {
    width: 100%;
    height: 750px;
    // max-width: 1920px;
    // max-width: 1564px;
    display: flex;

    .image-left {
      flex: 1 1 76.8%;;
      
      overflow: hidden;
      position: relative;
      background: rgba(0, 0, 0, 1);
    }
    .text-right {
      flex: 0 0 23.2%;
      overflow: hidden;
      color: white;
      overflow-y: scroll;
      background-color: rgba(0, 0, 0, 0.80);
      .txtbody {
        display: block;
        word-wrap: break-word;
        margin: 30px;
        overflow-y: auto;
        line-height: 1.5;
        :deep(p) {
          line-height: 24px;
        }
      }
    }
  }
  .title {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    z-index: 999;

    > i {
      margin-right: 4px;
    }
  }

  .toolbar-container {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
  }
  .iconfont {
    cursor: pointer;
    color: white;
    margin: 0 12px;
    font-size: 22px;
    // width: 24px;
    // height: 24px;

    &.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }
  .toolbar {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 182px;
    height: 60px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    &.multi {
      width: 292px;
    }

    z-index: 2;
    .left {
      width: 122px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        height: 20px;
        width: 2px;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        // right: -18px;
        // top: -4px;
        // font-size: 20px;
        background: rgba(255, 255, 255, 0.5);
      }
    }
    .right {
      width: 169px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    > span {
      color: #fff;
      text-align: center;
      display: inline-block;
      min-width: 50px;
    }

    // .append-splitter {
    // &::after {
    //   pointer-events: none;
    //   content: "|";
    //   position: absolute;
    //   right: -18px;
    //   top: -4px;
    //   font-size: 20px;
    //   color: rgba(255, 255, 255, 0.5);
    // }
    // }
  }
  .audio-control {
    height: 60px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    width: 181px;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconfont {
      margin-left: 0;
    }
    .timeline {
      color: #fff;
    }
  }

  .realimgcon {
    width: 100%;
    height: 100%;
    z-index: 1;

    .image {
      width: 100%;
      height: 100%;
      // top: 0;
      // left: 0;
      // width: 100%;
      // height: 100%;
      // position: absolute;
      // z-index: 1;
    }
  }

  .fullimgcon {
    top: 0;
    height: 100%;
  }
}

.hover-tips,
.hover-tips-warn {
  position: relative;
  font-size: 18px;

  &:hover {
    > div {
      display: block;
    }
  }

  // tip的方框
  > div {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: default;
    display: none;
    z-index: 10000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    color: #fff;
    pointer-events: none;
    text-align: center;
    word-break: keep-all;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 3px;

    // tip的箭头
    &::before {
      border: 7px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.6);
      width: 0;
      height: 0px;
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
    }

    // tip的文字
    .remark {
      line-height: 2.5;
      color: #fff;
    }
  }
}
.btnmask {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
  height: 60px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 52%,
    #000000 100%
  );
}
@media only screen and (max-width: 1440px) {
  .imagetxtcon .main-text-container {
    max-width: 1060px;
    height: 500px;
  }
}
@media only screen and (min-width: 1440px) {
  .imagetxtcon .main-text-container {
    max-width: 1564px;
  }
}
</style>
