<template>
  <div class="flex items-center play-audio-box">
    <div
      v-if="isPause"
      class="iconfont icon-huifuzhihang"
      @click="resume"
    ></div>
    <div v-else class="iconfont icon-zantingzhihang" @click="pause"></div>
    <div class="audio-process-time">{{ btime }}</div>
    <div class="audio-process-box">
      <div class="audio-process-bg"></div>
      <div ref="moveArea" class="move-area">
        <div
          :key="dateKey"
          class="audio-process-ball"
          :style="{ left: `${processX}px` }"
          @mousedown="onChangeProcess"
        ></div>
      </div>
    </div>
    <div class="audio-process-time">{{ dtime }}</div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "AudioCard",
  props: {
    // 配合v-model 加载初始值
    id: {
      type: String,
      default: "audio",
    },
    audioUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dateKey: new Date().getTime(),
      innerAudioContext: null,
      dtime: "00:00",
      duration: 0,
      btime: "00:00",
      duTime: 0,
      isPause: true,
      isEnd: false,
      setIn: null,
      curTime: 0,
      areaWidth: 100,
      processX: 0,
      curX: 0,
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
  },
  mounted() {
    const path = `${this.systemConfig.FILE_SERVER}${this.audioUrl}`;
    this.innerAudioContext = new Audio(path);
    this.innerAudioContext.load();
    this.innerAudioContext.oncanplay = () => {
      this.duration = Math.ceil(this.innerAudioContext.duration);
      this.dtime = this.formatSeconds(this.duration);
    };
  },
  methods: {
    start() {
      this.innerAudioContext.play();
      if (this.setIn) {
        clearInterval(this.setIn);
        this.setIn = null;
      }
      this.setIn = setInterval(() => {
        if (this.isPause || this.isEnd) return;
        // eslint-disable-next-line no-plusplus
        this.duTime++;
        this.btime = this.formatSeconds(this.duTime);
        this.processX =
          (parseInt(this.duTime, 10) / parseInt(this.duration, 10)) *
          parseInt(this.areaWidth, 10);
        if (this.processX > this.areaWidth) {
          this.processX = this.areaWidth;
        }
        this.dateKey = new Date().getTime();
        if (this.duTime >= this.duration) {
          this.stop();
        }
      }, 1000);
    },
    pause() {
      if (this.isPause) return;
      this.isPause = true;
      this.innerAudioContext.pause();
    },
    resume() {
      if (!this.isPause) return;
      this.isPause = false;
      this.isEnd = false;
      this.start();
    },
    stop() {
      if (this.setIn) {
        clearInterval(this.setIn);
        this.setIn = null;
      }
      this.isEnd = true;
      this.isPause = true;
      setTimeout(() => {
        this.duTime = 0;
        this.btime = "00:00";
        this.processX = 0;
      }, 500);
      this.innerAudioContext.pause();
    },
    onTouchEnd() {
      this.processX = this.curX;
      this.curTime =
        (parseFloat(this.curX) / parseFloat(this.areaWidth)) *
        parseInt(this.duration, 10);
      this.duTime =
        parseInt(this.curTime, 10) >= this.duration
          ? this.duration
          : parseInt(this.curTime, 10);
      this.btime = this.formatSeconds(this.duTime);
      this.innerAudioContext.currentTime = this.duTime;
    },
    onChangeProcess(e) {
      const { target } = e;
      const disX = e.clientX - target.offsetLeft;
      document.onmousemove = (res) => {
        let left = res.clientX - disX;
        if (left < 0) {
          left = 0;
        }
        if (left > 100) {
          left = 100;
        }
        this.curX = left;
        target.style.left = `${left}px`;
        target.style.top = "0px";
      };
      document.onmouseup = (res) => {
        document.onmousemove = null;
        document.onmouseup = null;
        this.onTouchEnd();
      };
    },
    formatSeconds(value) {
      let theTime = parseInt(value, 10); // 秒
      let theTime1 = 0; // 分
      let theTime2 = 0; // 小时
      // alert(theTime);
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60, 10);
        theTime = parseInt(theTime % 60, 10);
        // alert(theTime1+"-"+theTime);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60, 10);
          theTime1 = parseInt(theTime1 % 60, 10);
        }
      }
      let result =
        parseInt(theTime, 10) > 9
          ? parseInt(theTime, 10)
          : `0${parseInt(theTime, 10)}`;
      const min =
        parseInt(theTime1, 10) > 9
          ? parseInt(theTime1, 10)
          : `0${parseInt(theTime1, 10)}`;
      result = `${min}:${result}`;
      if (theTime2 > 0) {
        result = "";
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
.play-audio-box {
  position: relative;
  padding: 4px 10px;
  background: #eef0f3;
  border-radius: 6px;
  .icon-huifuzhihang {
    font-size: 28px;
    color: #666;
    height: 20px;
    width: 20px;
    margin-left: -7px;
    margin-top: -20px;
  }
  .icon-zantingzhihang {
    font-size: 28px;
    color: #666;
    height: 20px;
    width: 20px;
    margin-left: -7px;
    margin-top: -20px;
  }
  .audio-process-time {
    margin-left: 10px;
    color: #333;
  }
}
.play-audio-box1 {
  background: none;
  padding: 0;
  margin-top: 0;
}
.audio-process-box {
  position: relative;
  margin-left: 10px;
  width: 100px;
  height: 2px;
  .audio-process-bg {
    position: absolute;
    width: 100px;
    height: 2px;
    border-radius: 2px;
    background: #bfc6c9;
  }
  .move-area {
    position: absolute;
    width: 110px;
    height: 10px;
    left: -5px;
    top: -4px;
  }
  .audio-process-ball {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: #006896;
    transition: all 0.2;
  }
}
</style>
