<script setup lang="ts">
  import { ref } from 'vue';
  import { audioService } from '@/components/audio-recognize/audio/main';

  const emit = defineEmits(['recordFinish']);

  const isRecording = ref(false);

  const resultText = ref('');
  function setResultText(value: string) {
    resultText.value = value;
  }

  const { connect, stop } = audioService(setResultText);

  function handleComplete() {
    if (isRecording.value) {
      console.log('用户结束语音转文字');
      stop();
      isRecording.value = false;
      emit('recordFinish', { result: resultText.value });
    }
  }

  function handleStartRecord() {
    if (!isRecording.value) {
      console.log('用户开始语音转文字');
      connect();
      isRecording.value = true;
    }
  }
</script>

<template>
  <div style="margin-right: 10px">
    <a-button v-if="isRecording" type="secondary" @click="handleComplete">
      <template #icon>
        <icon-pause />
      </template>
    </a-button>
    <a-button v-else type="primary" @click="handleStartRecord">
      <template #icon>
        <icon-customer-service />
      </template>
    </a-button>
  </div>
</template>
