<template>
  <div class="audioinner">
    <audio
      id="audioTag"
      class="noshow"
      autoplay
      :src="hotspot.audio.ossPath"
    ></audio>
    <div class="audio-pan" :class="{ rotatepan: isPlaying }">
      <img :src="require('@/assets/images/icon/player_pic01.png')" alt="" />
    </div>

    <div class="audio-content">
      <div class="ad-div">
        <img
          @click="playing"
          :src="
            require(`@/assets/images/icon/${isPlay ? 'pause' : 'preview'}.png`)
          "
          alt=""
        />
        <div class="adcon">
          <div class="bar">
            <div class="activeLine" @click="seekTime"></div>
            <div :style="{ width: currentPosi + '%' }" class="dot"></div>
          </div>
          <div class="time">
            <span>{{ time }}</span
            ><span> / {{ allTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["hotspot"],
  data() {
    return {
      active: 0,
      time: 0,
      i_audio: "",
      isPlay: false,
      currentPosi: 0,
      volumePosi: 100,
      allTime: 0,
      timer: null,
      isPlaying: false,
      isMute: false,
      isDraging: false,
      touchPointX: null,
    };
  },
  methods: {
    playing() {
      if (this.i_audio.paused) {
        this.play();
      } else {
        this.pause();
      }
    },
    play() {
      this.i_audio.play();
      this.isPlay = true;
    },
    pause() {
      this.i_audio.pause();
      this.isPlay = false;
      this.timer && clearInterval(this.timer);
    },
    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;
    },
    updateProgress() {
      this.currentPosi =
        (this.i_audio.currentTime / this.i_audio.duration) * 100;
      this.time = this.transTime(this.i_audio.currentTime);
    },

    audioEnded() {
      this.i_audio.currentTime = 0;
      this.i_audio.pause();
      this.isPlay = false;
      this.timer && clearInterval(this.timer);
    },

    seekTime(e) {
      var rate = e.offsetX / e.target.clientWidth;
      this.i_audio.currentTime = this.i_audio.duration * rate;
      this.updateProgress();
    },

    handleVolume(e) {
      var rate = e.offsetX / e.target.clientWidth;
      this.i_audio.volume = rate;
      this.volumePosi = rate * 100;
    },

    handleMute() {
      this.isMute = !this.isMute;
    },
    handleDotStart(event) {
      if (!this.isDraging) {
        this.isDraging = true;
        // this.pause();
        this.touchPointX = event.touches[0].clientX;
        
      }
    },
    handleDotDraging(event) {
      if (this.isDraging) {
        const totalWidth = document.querySelector(".activeLine").clientWidth;
        let dx = event.touches[0].clientX - this.touchPointX;

        // const startWidth = this.touchPointX ? this.touchPointX / totalWidth : 0;
        console.log("startWidth", this.touchPointX);
        // dx = dx >= totalWidth ? totalWidth : dx;
        // const dxWidth = dx / totalWidth;
        // const lastWidth = originWidth.toFixed(2) + (dxWidth * 100).toFixed(2);
        // console.log("dxWidth", lastWidth);
        // document.querySelector(".dot").style.width = lastWidth + "%";
      }
    },
    handleDotDragEnd() {
      this.isDraging = false;
      this.touchPointX = null;
    },
  },
  watch: {
    isMute(newVal) {
      this.i_audio.muted = newVal;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.i_audio = $("#audioTag")[0];

      $("#audioTag").on("durationchange ", (e) => {
        console.log("duration", e.target.duration);
        this.time = this.transTime(e.target.duration);
        this.allTime = this.transTime(e.target.duration);
        this.i_audio.play();
        this.isPlay = true;
      });

      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          this.i_audio.play();
        },
        false
      );

      $("#audioTag").on("playing", () => {
        if (!this.isPlaying) {
          console.log(this.isPlaying);
          this.isPlaying = true;
        }
      });

      $("#audioTag").on("pause", () => {
        if (this.isPlaying) {
          this.isPlaying = false;
        }
      });

      $("#audioTag").on("timeupdate", () => {
        this.updateProgress();
      });

      $("#audioTag").on("ended", () => {
        this.audioEnded();
      });
    });
    console.log("dot", document.querySelector(".dot"));
    document
      .querySelector(".dot")
      .addEventListener("touchstart", this.handleDotStart, false);
    document
      .querySelector(".dot")
      .addEventListener("touchmove", this.handleDotDraging, false);
    document
      .querySelector(".dot")
      .addEventListener("touchend", this.handleDotDragEnd, false);
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.audioinner {
  width: 100vw;
  height: 100%;
  color: #fff;
  position: relative;

  .audio-pan {
    position: absolute;
    left: 50%;
    width: 80vw;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    > img {
      width: 100%;
      height: auto;
      max-width: 236px;
    }
  }

  .rotatepan {
    > img {
      animation: rotatete infinite linear 10s;
      transform-origin: center;
    }
  }

  .audio-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    justify-content: space-around;
    display: flex;
    align-items: center;
    width: 100%;

    .ad-div {
      display: flex;
      width: 90%;
      align-items: center;

      > img {
        margin-right: 20px;
        width: 36px;
      }

      .adcon {
        width: calc(100vw - 60px);
        margin-top: 6px;
        .bar {
          position: relative;
          background: none;
          overflow: visible;
          height: 4px;
          width: 100%;
          margin: 0 auto;
          border-radius: 3px;
          .activeLine {
            cursor: pointer;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(1px);
          }

          .dot {
            display: inline-block;
            position: absolute;
            z-index: 999;
            background-color: var(--editor-main-color);
            transform: translateY(-50%);
            top: 50%;
            left: 0;
            height: 100%;
            cursor: pointer;
            // pointer-events: none;
            border-radius: 3px;
            &::before,
            &::after {
              content: "";
              display: inline-block;
              width: 10px;
              height: 10px;
              position: absolute;
              border-radius: 50%;
              top: 50%;
              right: -5px;
              transform: translateY(-50%);
              background-color: var(--editor-main-color);
            }
            &::after {
              content: "";
              display: inline-block;
              width: 12px;
              height: 12px;
              background-color: #fff;
              right: -6px;
              z-index: -1;
            }
          }
        }

        .time {
          width: 100px;
          margin-top: 6px;

          > span {
            font-size: 12px;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}

.noshow {
  position: fixed;
  top: -100%;
  left: -100%;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes rotatete {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
