<template>
  <div class="microphone-container">
    <div class="title">远程麦克风</div>
    <div class="audiosList" v-if="audiosList.length > 0">
      <div class="speaker-container">
          <div class="speaker-title">选择扬声器</div>
          <el-select v-model="speaker" size="small">
            <el-option
            v-for="item in speakerOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="audioItem" v-for="item in audiosList">
        <div>{{ item }}</div>
        <div>
          <el-button
            circle
            size="small"
            :icon="VideoPlay"
            @click="handlePlay(item)"
          ></el-button>
        </div>
      </div>
    </div>
    <div class="btn-container">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击开始录音"
        placement="top-start"
        v-if="recordStatus === 'end'"
      >
        <el-icon class="btn" :size="40" @click="startRecording"><Microphone /></el-icon>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击暂停录音"
        placement="top-start"
        v-if="recordStatus === 'recording'"
      >
        <el-icon class="btn" :size="40" @click="pauseRecording"><VideoPause /></el-icon>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击恢复录音"
        placement="top-start"
        v-if="recordStatus === 'pause'"
      >
        <el-icon class="btn" :size="40" @click="recoverRecording"><Mic /></el-icon>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击结束录音"
        placement="top-start"
        v-if="recordStatus !== 'end'"
      >
        <el-icon class="btn" :size="40" @click="stopRecording"><Mute /></el-icon>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Microphone, VideoPause, Mute, Mic, VideoPlay } from "@element-plus/icons-vue";
import {
  startMicrophoneApi,
  pauseMicrophoneApi,
  resumeMicrophoneApi,
  stopMicrophoneApi,
  playSpeaker
} from '@/api/device/microphone'
import { useRoute } from 'vue-router'
import { ElMessage } from "element-plus";

const route = useRoute()


const terminalId = route.query.terminalId
const deviceId = route.query.deviceId

const recordStatus = ref('end');
const isRecording = ref(false)
const list = []
const audiosList = ref([])
const speaker = ref('spk1')
const speakerOptions = ref(['spk1'])

/**
 * 开始录音
 */
const startRecording = async () => {
  const fileName = new Date().getTime() + '.wav'
  isRecording.value = true
  const res = await startMicrophoneApi({
    terminalId,
    deviceId,
    filePath: `/home/share/record/audios/${terminalId}_${deviceId}_${fileName}`
  })
  if (res.code === 200) {
    recordStatus.value = 'recording'
    list.push(`${terminalId}_${deviceId}_${fileName}`)
  }
};

/**
 * 暂停录音
 */
const pauseRecording = async () => {
  const res = await pauseMicrophoneApi({
    terminalId,
    deviceId
  })
  if (res.code === 200) {
    recordStatus.value = 'pause'
  }
};

/**
 * 恢复录音
 */
const recoverRecording = async () => {
  const res = await resumeMicrophoneApi({
    terminalId,
    deviceId
  })
  if (res.code === 200) {
    recordStatus.value = 'recording'
  }
}

/**
 * 结束录音
 */
const stopRecording = async () => {
  const res = await stopMicrophoneApi({
    terminalId,
    deviceId
  })
  if (res.code === 200) {
    recordStatus.value = 'end'
    audiosList.value.unshift(list[list.length - 1])
  }
  isRecording.value = false
};

/**
 * 播放录音
 */
const handlePlay = async (audioPath) => {
  const res = await playSpeaker({
    terminalId,
    deviceId: speaker.value,
    audioPath: `/home/share/record/audios/${audioPath}`
  })
  if (res.code === 200) {
    ElMessage.success('播放成功')
  }
}

</script>
<style lang="scss" scoped>
.microphone-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 800px;
  width: 100%;
  height: calc(100vh - 125px);
  background-color: #fff;
  border-radius: 20px;
  margin: auto;

  .audiosList {
    margin: 20px;
    max-height: 280px;
    overflow-y: auto;

    .speaker-container {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 12px;

      .speaker-title {
        width: 80px;
      }

      .el-select {
        width: 200px;
      }
    }

    .audioItem {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }

  .title {
    padding-top: 20px;
    font-size: 20px;
    text-align: center;
    color: #333;
  }

  .btn-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
</style>
