<!--
	作者：GuoZhiBo
	时间：2020-05-19
	描述：录音和播放语音插件
-->
<template>
  <div>
    <div v-if="isReadonly == 'false'" style="margin-bottom: 10px;">
      <button
        type="button"
        class="btn btn-info"
        @mousedown.prevent="mouseStart"
      >
        <span
          class="glyphicon glyphicon-volume-up"
          aria-hidden="true"
        />
        {{ tiptext }}
      </button>
    </div>
    <template v-if="srcArray.length > 0">
      <div
        v-for="(item,index) in srcArray"
        :key="index"
        style="margin-bottom: 10px; display: inline-flex; align-items: center"
      >
        <AuthAudio
          :audio-src="getUrl(item)"
          :token="token"
        />
        <button
          v-if="isReadonly == 'false'"
          type="button"
          class="btn btn-link"
          style="flex: 1"
          @click="deleteAudioSrc(index)"
        >
          <span
            class="glyphicon glyphicon-remove"
            aria-hidden="true"
          /> 删除
        </button>

        <div class="clearfix" />
      </div>
    </template>
  </div>
</template>

<script type="text/javascript">
import Common from '../common/Common.js';
import { notificationError } from '../common/notification.js';
import recording from './audioSrc/recorder.js';
import AuthAudio from './AuthAudio.vue';
export default {
  name: 'MRecorder',
  components: {
    AuthAudio,
  },
  // props: ['className', 'srcArray', 'token', 'isReadonly'],
  props:{
    className: {
      type: String,
      default: null,
    },
    token: {
      type: String,
      default: null,
    },
    isReadonly: {
      type: String,
      default: '',
    },
    srcArray: {
      type: Array,
      default: ()=>([]),
    },
  },
  data() {
    return {
      src: null,
      mcounter: 0, // 累积时间
      recording: false, // 标记是否在录音
      intervaltimerid: '', // 间隔时间定时器编号
      tiptext: '按住说话', // 提示文字
      mediaRecorder: null, // 录音笔
      mediaConstraints: {
        audio: true,
      },
      isTouchEnd: false, //是否移动结束事件
      num: 60, // 按住说话时间
      recorder: null,
      interval: '',
      audioFileList: [], // 上传语音列表
      startTime: '', // 语音开始时间
      endTime: '', // 语音结束
      flag:true,
    };
  },
  beforeUnmount: function(){
    if(this.recorder) {  
      this.recorder.stop(); 
      this.clearTimer();  
    }  
  },
  methods: {
    getUrl: function (item) {
      var _self = this;
      var url = Common.getApiURL('file/audioDownload') + '?className=' + _self.className
              + '&fileName=' + item;
      return url;
    },
    /**
       * 清除定时器
       */
    clearTimer: function () {
      if (this.interval) {
        this.num = 60;
        clearInterval(this.interval);
      }
    },
    /**
       * 长按说话
       */
    mouseStart: function() {
      var _self = this;
      this.clearTimer();    
      this.startTime = new Date().getTime();   
      recording.get(rec => {     // 当首次按下时，要获取浏览器的麦克风权限，所以这时要做一个判断处理
        if(rec) {      
          if(this.flag) {
            this.recorder = rec;
            this.interval = setInterval(() => {  
              this.mcounter = this.mcounter + 1;
              this.tiptext = '录音中 ' + this.mcounter + 's';     
              if(this.num <= 0) {        
                rec.stop();         
                this.num = 60;         
                this.clearTimer();       
              } else {        
                this.num--;        
                this.time = '松开结束（' + this.num + '秒）';        
                rec.start();       
              }       
            }, 1000);  
            this.flag = false;  
          } else { 
            this.flag = true;   
            this.clearTimer();   
            this.endTime = new Date().getTime();  
            this.recorder.stop();
            rec.stop();  
            // 重置说话时间
            this.tiptext = '按住说话';
            if(this.mcounter > 0){
              this.num = 60;
              // 获取语音二进制文件
              let blob = this.recorder.getBlob();    
              this.audioUpload(blob);   
              this.mcounter = 0;
            }   
          }    
        }   
      });  
    },
    /**
       * 松开时上传语音
       */
    mouseEnd: function () {
      var _self = this;
      this.clearTimer();
      this.endTime = new Date().getTime();
      if (this.recorder) {
        this.recorder.stop();
        this.num = 60;
        // 重置说话时间
        this.tiptext = '按住说话';
        // 获取语音二进制文件
        let blob = this.recorder.getBlob();
        this.audioUpload(blob);
      }
    },
    /**
       * 删除语音
       * @param {Object} index
       */
    deleteAudioSrc: function (index) {
      var _self = this;
      _self.$emit('deleteAudioSrc', index);
    },
    /**
       * 长按
       */
    longTap: function () {
      var _self = this;
      _self.mouseStart();
      console.log('开始录音');
    },
    /**
       * 移动
       */
    touchMove: function () {
      var _self = this;
      console.log('取消录音');
      _self.isTouchEnd = true;
      _self.mouseEnd();
    },
    /**
       * 结束
       */
    touchEnd: function () {
      var _self = this;
      console.log('结束录音');
      _self.mouseEnd();
    },
    /**
       * 上传语音
       * @param {Object} blob
       */
    audioUpload: function (blob) {
      var _self = this;
      if (_self.isTouchEnd == false) {
        // 将获取的二进制对象转为二进制文件流
        let file = new File([blob], 'test.mp3', {
          type: 'audio/mp3',
          lastModified: Date.now(),
        });

        // create FormData
        var formData = new FormData();
        formData.append('fileName', file.name);
        formData.append('files', file);
        formData.append('className', _self.className);
        $.ajax({
          url: Common.getApiURL('file/audioUpload'),
          type: 'post',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: formData,
          contentType: false,
          processData: false,
          success: function (data) {
            if (data.errorCode === 0) {
              if(data.datas != null && data.datas.length > 0){
                let fileName = data.datas[0];
                const url = URL.createObjectURL(blob);
                _self.$emit('handleStop', {
                  url: url,
                  mblob: blob,
                  fileName: fileName,
                });
              }
            }else{
              notificationError(data.errorMessage, '音频上传失败');
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        console.log('取消录音');
      }
      _self.isTouchEnd = false;
    },
  },
};
</script>
<style scoped>
.wrapper {
  text-align: center;
}

.mrecorder {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.anirecorder {
  position: relative;
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  /*safari & chrome*/
  -webkit-animation-direction: alternate;
  -webkit-transition-timing-function: ease-in-out;
}

@keyframes mymove {
  0% {
      transform: scale(1);
      /*开始为原始大小*/
  }
  25% {
      transform: scale(1.1);
      /*放大1.1倍*/
  }
  50% {
      transform: scale(0.9);
  }
  75% {
      transform: scale(1.1);
  }
}

@-webkit-keyframes mymove
/*Safari and Chrome*/ {
  0% {
      transform: scale(1);
      /*开始为原始大小*/
  }
  25% {
      transform: scale(1.1);
      /*放大1.1倍*/
  }
  50% {
      transform: scale(0.9);
  }
  75% {
      transform: scale(1.1);
  }
}
</style>