<template>
  <div class="audiocon">
    <audio
      id="audioTag"
      class="noshow"
      autoplay
      :src="'http://gdbwg.4dage.com' + adata.filePath"
    ></audio>
    <div class="audiotop">
      <div class="img-con">
        <div class="videoTxtInfo">
          <span>{{ adata.name }}</span>
          <p>{{ adata.description }}</p>
        </div>

        <!-- <img :src="require('@/assets/images/proj2022/icon/voice.png')" alt="" /> -->
      </div>
    </div>
    <div class="audiobtm">
      <div class="barcon">
        <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 class="bofang">
        <!-- <img :src="require(`@/assets/images/icon/voice_back.png`)" alt=""> -->
        <img
          class="bf"
          @click="bofang"
          :src="
            require(`@/assets/images/icon/${
              isPlay ? 'voice_stop' : 'voice_play'
            }.png`)
          "
          alt=""
        />
        <!-- <img :src="require(`@/assets/images/icon/voice_next.png`)" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["adata"],
  data() {
    return {
      active: 0,
      time: 0,
      i_audio: "",
      isPlay: false,
      currentPosi: 0,
      allTime: 0,
      timer: null,
    };
  },
  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();
    },
  },
  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("timeupdate", () => {
        this.updateProgress();
      });

      $("#audioTag").on("ended", () => {
        this.audioEnded();
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.audiocon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;

  .audiotop {
    width: 100%;
    padding: 0 16px;
    text-align: center;

    .img-con {
      align-items: center;
      margin: 20px 0;
      .videoTxtInfo {
        > span {
          font-size: 22px;
          font-weight: bold;
        }

        > p {
          word-break: break-all;
          margin-top: 12px;
          color: #d9d9d9;
        }
      }
    }

    > img {
      width: 18px;
      cursor: pointer;
    }
  }

  .audiobtm {
    width: 100%;
    height: 33%;
    margin: 0 auto;
    padding-left: 13px;

    .barcon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin: 20px 0;
      .bar {
        position: relative;
        background: none;
        display: flex;
        overflow: visible;
        height: 14px;
        border-radius: 4px;
        margin: 0 10px 0 16px;
        flex: auto;

        .activeLine {
          cursor: pointer;
          height: 100%;
          overflow: hidden;
          position: absolute;
          background: #ebebeb;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 12px;
          width: 100%;
        }

        .dot {
          display: inline-block;
          position: absolute;
          z-index: 999;
          background-color: #b61e22;
          transform: translateY(-50%);
          top: 50%;
          left: 0;
          border-radius: 12px;
          height: 100%;
          cursor: pointer;
          pointer-events: none;
          &::after {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -20px;
            border-radius: 50%;
            content: "";
            width: 40px;
            height: 40px;
            background: #eecc63;
            border: 5px solid #b61e22;
          }
        }
      }

      .time {
        width: 100px;
        text-align: center;
        margin: 0 auto;

        > span {
          font-size: 12px;

          &:first-of-type {
            color: #fff;
          }

          &:last-of-type {
            color: #fff;
          }
        }
      }
    }

    .bofang {
      justify-content: center;
      width: 100%;
      display: flex;
      text-align: center;
      align-items: center;
      margin-top: 20px;
      > img {
        width: 60px;
        height: 60px;
        margin: 0 20px;
        cursor: pointer;
      }
      .bf {
        width: 80px;
        height: 80px;
      }
    }
  }
}

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

@media screen and (max-width: 1000px) {
  .audiocon {
    width: 100%;
    top: 43%;
    > .audiotop {
      .img-con {
        margin: 0;
        .videoTxtInfo {
          > span {
          }

          > p {
            display: none;
          }
        }
      }

      > img {
        width: 18px;
        cursor: pointer;
      }
    }

    .audiobtm {
      height: 33%;
      padding-left: 0;
      .barcon {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
        margin: 0 0 45px 0;
        .bar {
          position: relative;
          background: none;
          display: flex;
          overflow: visible;
          height: 14px;
          border-radius: 4px;
          margin: 0 10px 0 16px;
          flex: auto;
          width: 84%;
          .activeLine {
            cursor: pointer;
            height: 100%;
            overflow: hidden;
            position: absolute;
            background: #ebebeb;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 12px;
            width: 100%;
          }

          .dot {
            display: inline-block;
            position: absolute;
            z-index: 999;
            background-color: #b61e22;
            transform: translateY(-50%);
            top: 50%;
            left: 0;
            border-radius: 12px;
            height: 100%;
            cursor: pointer;
            pointer-events: none;
            &::after {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: -20px;
              border-radius: 50%;
              content: "";
              width: 40px;
              height: 40px;
              background: #eecc63;
              border: 5px solid #b61e22;
            }
          }
        }

        .time {
          width: 100px;
          text-align: center;
          margin-top: 9px;
          margin-bottom: 49px;

          > span {
            font-size: 12px;

            &:first-of-type {
              color: #fff;
            }

            &:last-of-type {
              color: #fff;
            }
          }
        }
      }

      .bofang {
        justify-content: center;
        width: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        margin-top: 20px;
        > img {
          width: 40px;
          height: 40px;
          margin: 0 20px;
          cursor: pointer;
        }
        .bf {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
</style>
