<template>
  <div>
    <!-- 音频录制 -->
    <div class="audio-record">
      <p class="duration-seconds-style">
        <span v-show="countDownRecord"
          >{{ countDownSecond }}″&nbsp;后停止录制</span
        >
      </p>
      <div class="icon">
        <img src="../../../../assets/images/audio.png" width="45" />
        <div class="voice-animation" ref="voiceAnimation">
          <p v-for="item in 7" :key="item"></p>
        </div>
      </div>
    </div>
    <div class="btn_crossAndbtn_succes">
      <div class="cross_box" :class="{ voiceCanael: isCancel }">
        <van-icon name="cross" />
      </div>
      <!-- <div><van-icon name="success" /></div> -->
    </div>
  </div>
</template>
<script setup>
// import TitleTab from "../components/TitleTab.vue";
import {
  reactive,
  onMounted,
  ref,
  watch,
  defineExpose,
  defineProps,
} from "vue";
import { uploadImg } from "../../../../api/yyzxApi.js";
import emitter from "../../../../utils/eventBus.js";
import { Toast } from "vant";
const recordStatus = ref(false); //是否显示录音
const showDurationSeconds = ref(0); // 语音时长
const durationSeconds = ref(0); // 语音时长
const isDurationSeconds = ref(false); // 开始录制时间状态
const playAudioTimer = ref(null); // 语音播放定时器
const confTime = ref(null); //录音动画 定时函数
const startRecord = ref(false); // 开始录制按钮状态
const isShowAudio = ref(true); //是否显示语音条
const countDownRecord = ref(false); // 倒计时录制状态
const countDownSecond = ref(60); // 倒计时录制时间
const isPlay = ref(false); //是否可以播放
const voiceAnimation = ref(); //录音动画demo
//webkitURL is deprecated but nevertheless
const URL = window.URL || window.webkitURL;
const fileName = ref(""); //文件名
var gumStream; //语音
var rec; //Recorder.js 对象
var input; //MediaStreamAudioSourceNode we'll be recording //文件

// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext; //audio context to help us record
const props = defineProps({
  isCancel: Boolean, //是否取消
});
onMounted(() => {});
// 完成录制并发送
function sendRecord() {
  stopRecording();
  // isShowAudio.value = true;
}

// 取消语音录制
function cancelRecord() {
  showDurationSeconds.value = durationSeconds.value;
  recordStatus.value = false;
  startRecord.value = false;
  isDurationSeconds.value = false;
  countDownRecord.value = false;
  voiceAnimation.value.classList.add("start");
  clearInterval(confTime.value);
  confTime.value = null;
  durationSeconds.value = 0;
  rec.stop();
  countDownSecond.value = 60;
}

// 开始录制语音消息开始动画效果
function startAudioRecord() {
  startRecord.value = true;
  isDurationSeconds.value = true;
  voiceAnimation.value.classList.add("start");
  confTime.value = setInterval(() => {
    durationSeconds.value++;
    countDownSecond.value--;
    //开启录音倒计时
    if (durationSeconds.value === 10) {
      countDownRecord.value = true;
    }
    //自动结束录音并发送
    if (countDownSecond.value === 0) {
      clearInterval(confTime.value);
      confTime.value = null;
      stopRecording();
      emitter.emit("hideAudio", {});
    }
  }, 1000);
  startRecording();
}
//开始录音
function startRecording() {
  var constraints = {
    audio: true,
    video: false,
  };
  //调用录音
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
    audioContext = new AudioContext();
    gumStream = stream;
    /* use the stream */
    input = audioContext.createMediaStreamSource(stream);
    rec = new Recorder(input, {
      numChannels: 1,
    });
    rec.record();
  });
}
//点击暂停 | 恢复录音
function pauseRecording() {
  if (rec.recording) {
    //pause
    rec.stop();
  } else {
    //resume
    rec.record();
  }
}
//停止录音
function stopRecording() {
  //停止录音
  rec.stop();
  gumStream.getAudioTracks()[0].stop();
  rec.exportWAV(createDownloadLink);
  clearInterval(confTime.value);
  confTime.value = null;
}
//添加语音内容
function createDownloadLink(blob) {
  uploadMav(blob);
  // var url = URL.createObjectURL(blob);
  // var au = document.getElementById("audio");
  // //添加语音标签
  // au.controls = true;
  // au.src = url;
  // //文件名称
  // var filename = new Date().toISOString();
  // fileName.value = filename + ".wav"
}
//上传语音文件
function uploadMav(blob) {
  Toast({
    message: "图片发送中。。。",
    forbidClick: true,
    duration: 0,
  });
  const data = new FormData();
  const filename = new Date().toISOString();
  const files = new File([blob], filename + ".wav");
  data.append("file", files);
  uploadImg(data)
    .then((res) => {
      if (res) {
        emitter.emit("getAudio", {
          durationSeconds: durationSeconds.value,
          fjid: res,
        });
        Toast.clear();
      }
    })
    .catch((err) => {
      Toast.clear();
    });
}

defineExpose({
  cancelRecord,
  stopRecording,
  startAudioRecord,
});
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}

// 音频录制
.audio-record {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  // height: 160px;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 15px;
  color: #ccc;
  font-size: 15px;
  text-align: center;

  .cancel-img {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

  .duration-seconds-style {
    height: 20px;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 18px 0 30px;
  }

  .voice-animation {
    margin-left: 15px;

    p {
      height: 3px;
      margin-top: 4px;
      background: #666;
    }

    p:nth-of-type(1) {
      width: 28px;
    }

    p:nth-of-type(2) {
      width: 24px;
    }

    p:nth-of-type(3) {
      width: 20px;
    }

    p:nth-of-type(4) {
      width: 16px;
    }

    p:nth-of-type(5) {
      width: 12px;
    }

    p:nth-of-type(6) {
      width: 8px;
    }

    p:nth-of-type(7) {
      width: 5px;
    }

    &.start {
      p:nth-of-type(1) {
        animation: backgroundInfinite7 1.5s ease-in-out infinite;
      }

      p:nth-of-type(2) {
        animation: backgroundInfinite6 1.5s ease-in-out infinite;
      }

      p:nth-of-type(3) {
        animation: backgroundInfinite5 1.5s ease-in-out infinite;
      }

      p:nth-of-type(4) {
        animation: backgroundInfinite4 1.5s ease-in-out infinite;
      }

      p:nth-of-type(5) {
        animation: backgroundInfinite3 1.5s ease-in-out infinite;
      }

      p:nth-of-type(6) {
        animation: backgroundInfinite2 1.5s ease-in-out infinite;
      }

      p:nth-of-type(7) {
        background: #f5f5f5;
      }
    }
  }

  .record-status {
    width: 100px;
    height: 28px;
    margin: 0 auto;
    line-height: 28px;
    color: #888;
    border-radius: 2px;

    &:hover {
      color: #04113d;
      background: #e1e1e1;
    }

    p {
      cursor: pointer;
    }
  }

  .ly_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4vw;

    div {
      width: 60px;
      height: 30px;
      color: #888;
      cursor: pointer;
      line-height: 30px;
      border-radius: 4px;
    }

    .cancel {
      color: #cbcbcb;
      background: #830808;
    }

    .send {
      color: #cbcbcb;
      background: #4a8b2a;
    }
  }
}
// 语音条
.audio-detail-msg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .audio-style {
    display: flex;
    align-items: center;
    height: 32px;
    margin-left: 8px;
    padding: 0 10px;
    border-radius: 4px;
    background: #fff;
    transform: rotate(180deg);
    .small {
      border: 4px solid #4c4c4c;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
    }

    .middle {
      width: 16px;
      height: 16px;
      margin-left: -11px;
      opacity: 1;
    }

    .large {
      width: 24px;
      height: 24px;
      margin-left: -19px;
      opacity: 1;
    }

    & > div {
      border: 2px solid #4c4c4c;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      box-sizing: border-box;
    }

    &.add-animation {
      .middle {
        animation: show2 1.2s ease-in-out infinite;
      }

      .large {
        animation: show3 1.2s ease-in-out infinite;
      }
    }
  }

  // 语音播放动画
  @keyframes show2 {
    0% {
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes show3 {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  // 语音录制动画
  @keyframes backgroundInfinite2 {
    0% {
      background: #666;
    }

    20% {
      background: #f5f5f5;
    }

    95% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite3 {
    0% {
      background: #666;
    }

    30% {
      background: #f5f5f5;
    }

    85% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite4 {
    0% {
      background: #666;
    }

    55% {
      background: #f5f5f5;
    }

    75% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite5 {
    0% {
      background: #666;
    }

    45% {
      background: #666;
    }

    60% {
      background: #f5f5f5;
    }

    75% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite6 {
    0% {
      background: #666;
    }

    65% {
      background: #666;
    }

    85% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite7 {
    0% {
      background: #666;
    }

    75% {
      background: #666;
    }

    95% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }
}
.btn_crossAndbtn_succes {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 20vw;
  width: 100%;
  padding: 13vw;
  .cross_box {
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    text-align: center;
    line-height: 15vw;
  }
  .voiceCanael {
    color: #fff;
    background: rgba(230, 23, 24, 0.6);
  }
}
</style>