<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: zhao.xiaokai
 * @Date: 2021-04-19 14:41:31
 * @LastEditors: zhao.xiaokai
 * @LastEditTime: 2021-07-25 13:47:08
-->
<template>
  <audio ref="audio" :src="audioUrl" @ended="ended()"></audio>
</template>
<script>
import TslAudioClient  from "./TslAudioClient";
export default {
  name: "TslAudio",
  props: {
    // 鼠标单击音效是否打开
    clickMusicIsOpen: {
      type: Boolean,
      default: false,
    },
    // 鼠标单击音效播放url
    clickMusicUrl: {
      type: String,
      default: "",
    },
    // 背景音乐Url
    backgroundMusicUrl: {
      type: String,
      default: "",
    },
  },
  watch: {
    clickMusicIsOpen: {
      handler(value) {
        if (value) {
          document.addEventListener("click", this.handleKeyClick);
          document.addEventListener("keydown", this.handleKeyDown);
          document.addEventListener("keyup", this.handleKeyUp);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      audioUrl: "",
      audioText: "",
      arrKey: [],
      keydown: "",
    };
  },
  mounted() {
    let _that = this;
    let tslAudioClient = TslAudioClient.getInstance();
    tslAudioClient.playCall = function (url, text) {
      _that.audioUrl = url;
      _that.audioText = text;
      _that.$nextTick(() => {
        _that.play();
      }, 20);
    };

    tslAudioClient.pauseCall = function () {
      _that.pause();
    };

    tslAudioClient.audioLoadCall = function () {
      _that.load();
    };
  },
  methods: {
    play() {
      this.$refs.audio.play(); //播放
    },
    pause() {
      this.$refs.audio.pause(); //暂停
    },
    load() {
      this.$refs.audio.load(); //重新播放
    },
    handleKeyClick() {
      if (this.clickMusicIsOpen) {
        this.audioUrl = this.clickMusicUrl;
        this.load();
        this.play();
      }
    },
    handleKeyDown(e) {
      if (this.arrKey.length > 0) {
        // a-z的按键 长按去重
        if (this.arrKey.indexOf(e.key.toLowerCase()) >= 0) {
          return;
        }
      }
      this.arrKey.push(e.key.toLowerCase());
      this.keydown = this.arrKey.join("+");

      //ctrl+shift+a  音乐播放
      if (this.keydown === "control+shift+a") {
        this.keydown = "";
        this.audioUrl = this.backgroundMusicUrl;
        this.play();
      }
      //ctrl+shift+a+s 音乐暂停
      if (this.keydown === "control+shift+a+s") {
        this.keydown = "";
        this.pause();
      }
      //ctrl+shift+a+z 重新开始音乐播放
      if (this.keydown === "control+shift+a+z") {
        this.keydown = "";
        this.load();
        this.play();
      }
      //ctrl+shift+q+y 鼠标音效打开
      if (this.keydown === "control+shift+q+y") {
        this.keydown = "";
        this.clickMusicIsOpen = true;
      }
      //ctrl+shift+q+u 鼠标音效关闭
      if (this.keydown === "control+shift+q+u") {
        this.keydown = "";
        this.clickMusicIsOpen = false;
      }
      this.keydown = "";
    },
    handleKeyUp(e) {
      this.arrKey.splice(this.arrKey.indexOf(e.key.toLowerCase()), 1);
      this.keydown = this.arrKey.join("+");
    },
    ended() {
      this.$emit("audioEnded", this.audioText);
    },
  },
  destroyed() {
    //鼠标单击 音效取消
    document.removeEventListener("click", this.handleKeyClick);
    document.removeEventListener("keydown", this.handleKeyDown);
    document.removeEventListener("keyup", this.handleKeyUp);
  },
};
</script>
<style></style>
