<template>
  <div class="audio-bubble" :style="{width: width / 200 + 'rem', height: height/ 200 + 'rem'}" @click="toggleVoice">
    <div :class="['ic-notify','voice-play', playing ? 'active' : '']"></div>
    <div v-show="time" class="time">{{time + '“'}}</div>
    <div v-show="!played" class="red-dot"></div>
    <audio v-if="!iswx && content" :src="content" ref="voice" @canplay="onCanPlay" @ended="onEnded" @pause="onPaused" x5-playsinline="true" playsinline="true" webkit-playsinline="true" preload="auto" style="display: none"></audio>
  </div>
</template>
<script>
/**
 * 语音小气泡
 */
export default {
  data() {
    return {
      played: false, // 已播放
      playing: false, // 播放中
      voiceEl: null,
      time: this.initTime
    };
  },
  props: {
    beforePlay: {
      type: Function,
      default: () => {}
    },
    width: {
      type: Number,
      default: 160
    },
    height: {
      type: Number,
      default: 72
    },
    iswx: {
      type: Boolean,
      default: false
    },
    // 微信中传入localId
    content: {
      type: [String, Number],
      required: true
    },

    initTime: {
      type: [String, Number],
      default: ''
    },
    shadowColor: {}
  },
  methods: {
    toggleVoice() {
      this.played = true;
      if (this.playing) {
        this.stop();
      } else {
        this.play();
      }
    },
    play() {
      this.beforePlay();
      if (this.iswx) {
        // 本地资源直接播放
        if (/^wxLocalResource|weixin/.test(this.content)) {
          wx.playVoice({
            localId: this.content // 需要播放的音频的本地ID，由stopRecord接口获得
          })
          this.playing = true;
        } else {
          // 先下载
          wx.downloadVoice({
            serverId: this.content, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: res => {
              wx.playVoice({
                localId: res.localId // 需要播放的音频的本地ID，由stopRecord接口获得
              });
              this.playing = true;
            }
          });
        }
        
      } else {
        this.$refs.voice.play();
        this.playing = true;
      }
    },
    stop() {
      if (this.iswx) {
        wx.pauseVoice({
          localId: this.content // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
        this.playing = false;
      } else {
        this.$refs.voice.pause();
        this.playing = false;
      }
    },
    onCanPlay() {
      this.time = parseInt(this.$refs.voice.duration);
    },
    onEnded() {
      console.log('audio ended');
      this.playing = false;
    },
    onPaused() {
      console.log('audio pause');
      this.playing = false;
    }
  },
  mounted() {
    if (this.iswx) {
      wx.ready(() => {
        console.log('wx ready voice ');

        wx.onVoicePlayEnd({
          success: function(res) {
            var localId = res.localId; // 返回音频的本地ID
            console.log('onVoicePlayEnd', localId);
            this.playing = false;
          }
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import '~@css/util';
@path: '~@components/audio-bubble';
.audio-bubble {
  // flex: 1;
  width: 410px;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 3px 3px 3px rgba(195, 5, 25, 0.3);
  position: relative;
  height: 72px;

  .ic-notify {
    .pos(15 , 22);
    // .size(21, 28);
    // .bgi('@{path}/img/ic_play.png');
  }
  .time {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 24px;
    font-weight: 300;
    color: rgba(9, 0, 1, 1);
    line-height: 24px;
  }
  .red-dot {
    .posr( 10, 10);
    width: 16px;
    height: 16px;
    background: rgba(255, 0, 17, 1);
    border-radius: 50%;
  }
  &:before {
    content: '';
    .pos( -18,  (72 - 40) / 2);
    .size(0, 0);
    z-index: 1;
    border-right: solid 20px #fff;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
    transform: scale(0.8, 0.6);
    transform-origin: right;
  }
}

@keyframes voicePlay {
  0% {
    background-position-y: 0;
  }
  33% {
    background-position-y: -28px;
  }
  66% {
    background-position-y: -56px;
  }
  100% {
    background-position-y: -56px;
  }
}
.voice-play {
  .size(20, 28);
  .bgc('@{path}/img/voice_sprites.png');
  background-position-y: -56px;

  &.active {
    animation: voicePlay 1s steps(1) infinite;
  }
}
</style>