<template>
  <div class="tts-record flexBox">
    <!-- <span class="text-span" :class="{ over: text.length > maxLen }">{{ text.length }} / {{ maxLen }}</span> -->
    <span v-if="text.length > maxLen" class="text-span"
      >{{ text.length }} / {{ maxLen }}</span
    >
    <template v-if="isStop">
      <template v-for="item in btnList" :key="item.name">
        <!-- <svg-icon v-if="item.show" class="btn-icon" style="cursor: pointer" :name="item.name" :fill="item.currentColor" @mouseover="item.currentColor = item.hoverColor" @mouseout="item.currentColor = item.defaultColor" :width="item.width" :height="item.height" @click="item.clickEvent" /> -->
        <img
          v-if="item.show"
          class="btn-icon"
          style="cursor: pointer"
          src="@packages/assets/images/send-tts.png"
          @mouseover="item.currentColor = item.hoverColor"
          @mouseout="item.currentColor = item.defaultColor"
          width="22"
          @click="item.clickEvent"
        />
      </template>
    </template>
    <template v-else>
      <Corrugation />
      <img src="@packages/assets/images/tingzhi-icon.svg" @click="stop" class="btn-icon stop-icon" />
    </template>
  </div>
</template>

<script setup lang="ts">
  import { onBeforeUnmount, ref, watch, inject } from "vue";
  import Corrugation from "./Corrugation.vue";
  import Media from "./record/record";
  import { getGlobalConfig } from "@/api/common";
  import sendTTS from "@packages/assets/images/send-tts.png";

  const getAuthInfo = inject('getAuthInfo') as any

  const props = withDefaults(
    defineProps<{
      disabled: boolean;
      text: string;
      showUpload?: boolean;
      maxLen: number;
    }>(),
    {
      disabled: false,
      text: "",
      showUpload: false,
      maxLen: 10000,
    }
  );
  const emit = defineEmits(["updateText", "uploadImg"]);

  const recordInstance = ref<any>(
    Media({ resetText: (text: any) => handleRecord(text), getAuthInfo })
  );

  const isStop = ref(true);
  const uploading = ref(false);

  watch(
    () => props.disabled,
    (val: any) => {
      if (props.disabled) {
        stop();
      }
    },
    { immediate: true }
  );

  const say = () => {
    if (props.disabled) return;
    // 临时方案，调用config接口刷新token判断是否登录
    // getGlobalConfig()
    isStop.value = false;
    recordInstance.value.recStart(props.text);
  };

  const stop = () => {
    isStop.value = true;
    recordInstance.value.recStop();
  };

  const stopWs = () => {
    recordInstance.value.stopWs(true);
  };

  const handleRecord = (text: any) => {
    // 用户点击了停止就不接收后端返回的识别结果
    if (!isStop.value) {
      emit("updateText", text);
    }
  };

  const btnList = ref([
    {
      show: true,
      name: "microphone-icon",
      currentColor: "#878787",
      defaultColor: "#878787",
      hoverColor: "#4b72ef",
      clickEvent: say,
      width: 32,
      height: 32,
    },
  ]);

  onBeforeUnmount(() => {
    stopWs();
  });

  defineExpose({ stopWs });
</script>

<style lang="scss" scoped>
  .tts-record {
    // position: absolute;
    // right: 102px;
    // bottom: 20px;
    z-index: 99;
    height: 32px;
    line-height: 32px;
    // background-color: #ffffff;

    .btn-icon {
      cursor: pointer;
      margin-right: 12px;
    }

    .stop-icon {
      margin-left: 16px;
      color: #4b72ef;
    }

    .text-span {
      margin-right: 12px;
      color: #ff5555;
    }
  }
</style>
