import { defineComponent, ref, onMounted, onUnmounted, watchEffect, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, createVNode, normalizeStyle, toDisplayString } from "vue";
import "../../../../adapter-vue.mjs";
import Icon from "../../../common/Icon.vue.mjs";
import audioIcon from "../../../../assets/icon/msg-audio.svg.mjs";
import { isMobile } from "../../../../utils/env.mjs";
const _hoisted_1 = { class: "audio-icon-container" };
const _hoisted_2 = ["src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "message-audio",
  props: {
    content: {
      type: Object,
      default: () => ({})
    },
    messageItem: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ["setAudioPlayed"],
  setup(__props, { emit: __emit }) {
    const emits = __emit;
    const props = __props;
    const data = ref();
    const message = ref();
    const isAudioPlaying = ref();
    const audioRef = ref();
    onMounted(() => {
      if (audioRef.value) {
        audioRef.value.addEventListener("ended", onAudioEnded);
        audioRef.value.addEventListener("pause", onAudioPaused);
      }
    });
    onUnmounted(() => {
      if (audioRef.value) {
        audioRef.value.removeEventListener("ended", onAudioEnded);
        audioRef.value.removeEventListener("pause", onAudioPaused);
      }
    });
    watchEffect(() => {
      message.value = props.messageItem;
      data.value = props.content;
    });
    function play() {
      if (message.value.hasRiskContent || !audioRef.value) {
        return;
      }
      if (!audioRef.value.paused) {
        audioRef.value.pause();
        audioRef.value.currentTime = 0;
        isAudioPlaying.value = false;
        return;
      }
      const audios = document.getElementsByTagName("audio");
      Array.from(audios).forEach((audio) => {
        if (!audio.paused) {
          audio.pause();
          audio.currentTime = 0;
        }
      });
      audioRef.value.play();
      isAudioPlaying.value = true;
      if (message.value.flow === "in") {
        emits("setAudioPlayed", message.value.ID);
      }
    }
    function onAudioEnded() {
      isAudioPlaying.value = false;
    }
    function onAudioPaused() {
      isAudioPlaying.value = false;
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["message-audio", [
          unref(isMobile) && "message-audio-h5",
          unref(message).flow === "out" && "reserve",
          unref(message).hasRiskContent && "disable"
        ]]),
        onClick: withModifiers(play, ["stop"])
      }, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("div", {
            class: normalizeClass({ "mask": true, "play": unref(isAudioPlaying) })
          }, null, 2),
          createVNode(Icon, {
            class: "icon",
            width: "16px",
            height: "20px",
            file: unref(audioIcon)
          }, null, 8, ["file"])
        ]),
        createElementVNode("span", {
          class: "time",
          style: normalizeStyle({ width: `${unref(data).second * 10 + 20}px` })
        }, toDisplayString(unref(data).second || 1) + ' " ', 5),
        createElementVNode("audio", {
          ref_key: "audioRef",
          ref: audioRef,
          src: unref(data).url
        }, null, 8, _hoisted_2)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
