<script setup lang="ts">
import IconButton from '@/components/basic/IconButton.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { FormatUtils, LogUtils, SimpleTimer, TimeUtils } from '@imengyu/imengyu-utils';
import { computed, ref } from 'vue';

const emit = defineEmits(['update:modelValue', 'recordDone'])
const props = defineProps({
  modelValue: { 
    type: String,
    default: null 
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});


const TAG = 'Recorder'; 
const manager = uni.getRecorderManager();
const state = ref(false);
const paused = ref(false);
const recordTime = ref(0);
const recordTimeInterval = new SimpleTimer(undefined, () => {
  recordTime.value++;
}, 1000);
const recordTimeString = computed(() => {
  const times = TimeUtils.splitMillSeconds(recordTime.value * 1000);
  return `${FormatUtils.formatNumberWithZero(times.minutes, 2)}:${FormatUtils.formatNumberWithZero(times.seconds, 2)}`;
});

manager.onError((err) => {
  LogUtils.printLog(TAG, 'error', '录音错误', err)
  uni.showModal({
    title: '录音错误',
    content: err.errMsg,
  })
})
manager.onPause(() => {
  LogUtils.printLog(TAG, 'info', '录音暂停')
})
manager.onStart((result) => {
  uni.hideLoading();
  state.value = true;
  paused.value = false;
  recordTimeInterval.start();
  LogUtils.printLog(TAG, 'info', '录音开始')
})
manager.onStop((result) => {
  uni.hideLoading();
  state.value = false;
  paused.value = false;
  recordTime.value = 0;
  recordTimeInterval.stop();
  LogUtils.printLog(TAG, 'info', '录音结束', result);
  uni.showToast({ title: '录音成功' });
  emit('update:modelValue', result.tempFilePath);
  emit('recordDone', result.tempFilePath);
})

function startRecord() {
  if (props.disabled)
    return;
  if (state.value)
    return;
  uni.showLoading();
  recordTime.value = 0;
  state.value = true;
  manager.start({
    format: 'mp3',
    duration: 60000,
  })
}
function stopRecord() {
  if (!state.value)
    return;
  uni.showLoading();
  manager.stop();
}
function toggleRecord() {
  if (!state.value)
    return;
  if (!paused.value) {
    manager.pause();
    recordTimeInterval.stop();
    paused.value = true;
  } else {
    manager.resume();
    recordTimeInterval.start();
    paused.value = false;
  }
}

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>

<template>
  <FlexRow flex="1 1 100%" align="center" justify="space-between">
    <Text :text="`${state?(paused?'暂停中':'录音中'):'点击开始录音'} ${ recordTimeString }/10:00 `"/>
    <FlexRow align="center" :gap="15">
      <IconButton v-if="!state" 
        icon="record-filling"
        :size="40" 
        :buttonSize="60"
        backgroundColor="button"
        color="danger"
        shape="round"
        @click="startRecord" 
      />
      <template v-else>
        <IconButton 
          icon="stop-filling" 
          shape="round"
          :size="30" 
          :buttonSize="50"
          backgroundColor="button"
          color="danger"
          @click="stopRecord" 
        />
        <IconButton 
          :icon="paused?'play-filling':'pause-filling'" shape="round" 
          :size="30" 
          backgroundColor="button"
          :buttonSize="50"
          color="danger"
          @click="toggleRecord" 
        />
      </template>
    </FlexRow>
  </FlexRow>
</template>