<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-info">
        <p>{{hotspot.hotspotTitle}}</p>
        <div class="time">
          <span>{{ time }}</span><span> / {{ allTime }}</span>
        </div>
      </div>

      <div class="ad-control">
        <div class="ad-volume">
          <ui-icon @click.stop="handleMute"  :type="isMute?'player_volume03':(volumePosi>50?'player_volume01':'player_volume02')"></ui-icon>
          <div class="bar">
            <div class="activeLine" @click="handleVolume"></div>
            <div :style="{ width: volumePosi + '%' }" class="dot"></div>
          </div>
        </div>
        <ui-icon @click="bofang" :type="isPlay?'player_pause':'player_playback'"></ui-icon>
        <ui-icon @click="$emit('close')" type="player_close"></ui-icon>
      </div>

    </div>

    <div class="audiobtm">
      <!-- <img @click="bofang" :src="require(`@/assets/images/proj2022/icon/${isPlay ? 'pause' : 'play'}.png`)" alt="" /> -->
      <div class="bar">
        <div class="activeLine" @click="seekTime"></div>
        <div :style="{ width: currentPosi + '%' }" class="dot"></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,
      isMute:false,
      isPlaying:false
    };
  },
  methods: {
    bofang() {
      if (this.i_audio.paused) {
        this.i_audio.play();
        this.isPlay = true;
      } else {
        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
      this.isMute =false
    },

    handleMute(){
      this.isMute = !this.isMute
    }
  },
  watch:{
    isMute(newVal){
      this.i_audio.muted = newVal
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.i_audio = $("#audioTag")[0];
      $("#audioTag").on("loadedmetadata", (e) => {
        this.time = this.transTime(e.currentTarget.duration);
        this.allTime = this.transTime(e.currentTarget.duration);
        this.i_audio.play();
        this.isPlay = true;
      });

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

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

      $("#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();
      });
    });
  },
  beforeDestroy() {
  },
};
</script>

<style lang="scss" scoped>
.audioinner {
  width: 600px;
  height: 80px;
  color: #fff;
  background-image: url('~@/assets/images/icon/player_pic02@2x.png');
  background-size: cover;
  position: relative;

  .audio-pan {
    position: absolute;
    left: 12px;
    width: 120px;
    bottom: 14px;
    font-size: 0;

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

  }

  .audio-content {
    position: absolute;
    left: 150px;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-around;
    display: flex;
    align-items: center;
    height: 100%;
    width: calc(100% - 150px);
    .ad-info {
      width: 240px;

      >p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }

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

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

    .ad-control {
      display: flex;
      flex: auto;
      justify-content: space-around;
      align-items: center;
      padding-right: 26px;

      .ad-volume {
        display: flex;
        align-items: center;
        >img {
          width: 30px;
        }
        .bar {
          width: 56px;
          margin-left: 10px;
        }
      }

      i{
        cursor: pointer;

      }
    }
  }

  .audiobtm {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;



    >img {
      margin: 0 0px;
      cursor: pointer;
      width: 20px;
    }


  }

  .bar {
    position: relative;
    background: none;
    overflow: visible;
    height: 2px;
    width: calc(100% - 10px);
    margin: 0 auto;

    .activeLine {
      cursor: pointer;
      height: 100%;
      overflow: hidden;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.2);
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }

    .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;
    }
  }
}

.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>
