<template>
  <div class="lum-dialog-mask animated fadeIn">
    <el-container class="lum-dialog-box">
      <el-header class="no-padding header no-select" height="50px">
        <p>语音消息</p>
        <p class="tools"><i class="el-icon-close" @click="closeBox" /></p>
      </el-header>

      <el-main class="no-padding mian">
        <div class="music">
          <span class="line line1" :class="{ 'line-ani': animation }"></span>
          <span class="line line2" :class="{ 'line-ani': animation }"></span>
          <span class="line line3" :class="{ 'line-ani': animation }"></span>
          <span class="line line4" :class="{ 'line-ani': animation }"></span>
          <span class="line line5" :class="{ 'line-ani': animation }"></span>
        </div>
        <div style="margin-top: 35px; color: #676262; font-weight: 300">
          <template v-if="recorderStatus == 0">
            <p style="font-size: 13px; margin-top: 5px">
              <span>语音消息，让聊天更简单方便 ...</span>
            </p>
          </template>
          <template
            v-else-if="
              recorderStatus == 1 || recorderStatus == 2 || recorderStatus == 3
            "
          >
            <p>{{ datetime }}</p>
            <p style="font-size: 13px; margin-top: 5px">
              <span v-if="recorderStatus == 1">正在录音</span>
              <span v-else-if="recorderStatus == 2">已暂停录音</span>
              <span v-else-if="recorderStatus == 3">录音时长</span>
            </p>
          </template>
          <template
            v-else-if="
              recorderStatus == 4 || recorderStatus == 5 || recorderStatus == 6
            "
          >
            <p>{{ formatPlayTime }}</p>
            <p style="font-size: 13px; margin-top: 5px">
              <span v-if="recorderStatus == 4">正在播放</span>
              <span v-else-if="recorderStatus == 5">已暂停播放</span>
              <span v-else-if="recorderStatus == 6">播放已结束</span>
            </p>
          </template>
        </div>
      </el-main>

      <el-footer class="footer" height="50px">
        <!-- 0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 -->
        <el-button
          v-show="recorderStatus == 0"
          type="primary"
          size="mini"
          round
          icon="el-icon-microphone"
          @click="startRecorder"
          >开始录音
        </el-button>
        <el-button
          v-show="recorderStatus == 1"
          type="primary"
          size="mini"
          round
          icon="el-icon-video-pause"
          @click="pauseRecorder"
          >暂停录音
        </el-button>
        <el-button
          v-show="recorderStatus == 2"
          type="primary"
          size="mini"
          round
          icon="el-icon-microphone"
          @click="resumeRecorder"
          >继续录音
        </el-button>
        <el-button
          v-show="recorderStatus == 2"
          type="primary"
          size="mini"
          round
          icon="el-icon-microphone"
          @click="stopRecorder"
          >结束录音
        </el-button>
        <el-button
          v-show="recorderStatus == 3 || recorderStatus == 6"
          type="primary"
          size="mini"
          round
          icon="el-icon-video-play"
          @click="playRecorder"
          >播放录音
        </el-button>

        <el-button
          v-show="
            recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
          "
          type="primary"
          size="mini"
          round
          icon="el-icon-video-play"
          @click="startRecorder"
          >重新录音
        </el-button>

        <el-button
          v-show="recorderStatus == 4"
          type="primary"
          size="mini"
          round
          icon="el-icon-video-pause"
          @click="pausePlayRecorder"
          >暂停播放
        </el-button>
        <el-button
          v-show="recorderStatus == 5"
          type="primary"
          size="mini"
          round
          icon="el-icon-video-play"
          @click="resumePlayRecorder"
          >继续播放
        </el-button>

        <el-button
          v-show="
            recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
          "
          type="primary"
          size="mini"
          round
          @click="submit"
          >立即发送
        </el-button>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Recorder from 'js-audio-recorder'

export default {
  name: 'MeEditorRecorder',
  data() {
    return {
      // 录音实例
      recorder: null,

      // 录音时长
      duration: 0,

      // 播放时长
      playTime: 0,

      animation: false,

      // 当前状态
      recorderStatus: 0, //0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 6:播放结束

      playTimeout: null,
    }
  },
  computed: {
    datetime() {
      let hour = parseInt((this.duration / 60 / 60) % 24) //小时
      let minute = parseInt((this.duration / 60) % 60) //分钟
      let seconds = parseInt(this.duration % 60) //秒

      if (hour < 10) hour = `0${hour}`
      if (minute < 10) minute = `0${minute}`
      if (seconds < 10) seconds = `0${seconds}`

      return `${hour}:${minute}:${seconds}`
    },
    formatPlayTime() {
      let hour = parseInt((this.playTime / 60 / 60) % 24) //小时
      let minute = parseInt((this.playTime / 60) % 60) //分钟
      let seconds = parseInt(this.playTime % 60) //秒

      if (hour < 10) hour = `0${hour}`
      if (minute < 10) minute = `0${minute}`
      if (seconds < 10) seconds = `0${seconds}`

      return `${hour}:${minute}:${seconds}`
    },
  },
  destroyed() {
    if (this.recorder) {
      this.destroyRecorder()
    }
  },
  methods: {
    closeBox() {
      if (this.recorder == null) {
        this.$emit('close', false)
        return
      }

      if (this.recorderStatus == 1) {
        this.stopRecorder()
      } else if (this.recorderStatus == 4) {
        this.pausePlayRecorder()
      }

      // 销毁录音后关闭窗口
      this.destroyRecorder(() => {
        this.$emit('close', false)
      })
    },

    // 开始录音
    startRecorder() {
      let _this = this
      // http://recorder.api.zhuyuntao.cn/Recorder/event.html
      // https://blog.csdn.net/qq_41619796/article/details/107865602
      this.recorder = new Recorder()
      this.recorder.onprocess = duration => {
        duration = parseInt(duration)
        _this.duration = duration
      }

      this.recorder.start().then(
        () => {
          this.recorderStatus = 1
          this.animation = true
        },
        error => {
          console.log(`${error.name} : ${error.message}`)
        }
      )
    },
    // 暂停录音
    pauseRecorder() {
      this.recorder.pause()
      this.recorderStatus = 2
      this.animation = false
    },
    // 继续录音
    resumeRecorder() {
      this.recorderStatus = 1
      this.recorder.resume()
      this.animation = true
    },
    // 结束录音
    stopRecorder() {
      this.recorderStatus = 3
      this.recorder.stop()
      this.animation = false
    },
    // 录音播放
    playRecorder() {
      this.recorderStatus = 4
      this.recorder.play()
      this.playTimeouts()
      this.animation = true
    },
    // 暂停录音播放
    pausePlayRecorder() {
      this.recorderStatus = 5
      this.recorder.pausePlay()
      clearInterval(this.playTimeout)
      this.animation = false
    },
    // 恢复录音播放
    resumePlayRecorder() {
      this.recorderStatus = 4
      this.recorder.resumePlay()
      this.playTimeouts()
      this.animation = true
    },
    // 销毁录音
    destroyRecorder(callBack) {
      this.recorder.destroy().then(() => {
        this.recorder = null
        if (callBack) {
          callBack()
        }
      })
    },
    // 获取录音文件大小（单位：字节）
    recorderSize() {
      return this.recorder.fileSize
    },

    playTimeouts() {
      this.playTimeout = setInterval(() => {
        let time = parseInt(this.recorder.getPlayTime())
        this.playTime = time
        if (time == this.duration) {
          clearInterval(this.playTimeout)
          this.animation = false
          this.recorderStatus = 6
        }
      }, 100)
    },

    submit() {
      alert('功能研发中,敬请期待...')
    },
  },
}
</script>
<style lang="less" scoped>
.lum-dialog-box {
  width: 500px;
  max-width: 500px;
  height: 450px;

  .mian {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .footer {
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-top: 1px solid #f7f3f3;
  }
}

.music {
  position: relative;
  width: 180px;
  height: 160px;
  border: 8px solid #bebebe;
  border-bottom: 0px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
}

.music:before,
.music:after {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 40px;
  height: 82px;
  background-color: #bebebe;
  border-radius: 15px;
}

.music:before {
  right: -25px;
}

.music:after {
  left: -25px;
}

.line {
  position: absolute;
  width: 6px;
  min-height: 30px;
  transition: 0.5s;

  vertical-align: middle;
  bottom: 0 !important;
  box-shadow: inset 0px 0px 16px -2px rgba(0, 0, 0, 0.15);
}

.line-ani {
  animation: equalize 4s 0s infinite;
  animation-timing-function: linear;
}

.line1 {
  left: 30%;
  bottom: 0px;
  animation-delay: -1.9s;
  background-color: #ff5e50;
}

.line2 {
  left: 40%;
  height: 60px;
  bottom: -15px;
  animation-delay: -2.9s;
  background-color: #a64de6;
}

.line3 {
  left: 50%;
  height: 30px;
  bottom: -1.5px;
  animation-delay: -3.9s;
  background-color: #5968dc;
}

.line4 {
  left: 60%;
  height: 65px;
  bottom: -16px;
  animation-delay: -4.9s;
  background-color: #27c8f8;
}

.line5 {
  left: 70%;
  height: 60px;
  bottom: -12px;
  animation-delay: -5.9s;
  background-color: #cc60b5;
}

@keyframes equalize {
  0% {
    height: 48px;
  }

  4% {
    height: 42px;
  }

  8% {
    height: 40px;
  }

  12% {
    height: 30px;
  }

  16% {
    height: 20px;
  }

  20% {
    height: 30px;
  }

  24% {
    height: 40px;
  }

  28% {
    height: 10px;
  }

  32% {
    height: 40px;
  }

  36% {
    height: 48px;
  }

  40% {
    height: 20px;
  }

  44% {
    height: 40px;
  }

  48% {
    height: 48px;
  }

  52% {
    height: 30px;
  }

  56% {
    height: 10px;
  }

  60% {
    height: 30px;
  }

  64% {
    height: 48px;
  }

  68% {
    height: 30px;
  }

  72% {
    height: 48px;
  }

  76% {
    height: 20px;
  }

  80% {
    height: 48px;
  }

  84% {
    height: 38px;
  }

  88% {
    height: 48px;
  }

  92% {
    height: 20px;
  }

  96% {
    height: 48px;
  }

  100% {
    height: 48px;
  }
}
</style>
