import { defineComponent, openBlock, createBlock, unref, createElementBlock, Fragment, renderList, normalizeClass, createStaticVNode, ref, computed, watch, onMounted, createElementVNode, mergeProps, createVNode, withModifiers, toDisplayString, createCommentVNode, withDirectives, vShow, normalizeStyle, createTextVNode } from "vue";
import WlSvg from "@wltech/svg";
const __default__$2 = {
  name: "WlSvgIcon"
};
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$2,
  props: {
    type: { default: "" },
    color: { default: "var(--wl-text-color-title-1)" },
    width: { default: "16" },
    height: { default: "16" }
  },
  setup(__props) {
    const sub = location.origin;
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(WlSvg), {
        type: __props.type,
        width: __props.width,
        height: __props.height,
        color: __props.color,
        sub: unref(sub)
      }, null, 8, ["type", "width", "height", "color", "sub"]);
    };
  }
});
var index_vue_vue_type_style_index_0_lang$1 = "";
const _hoisted_1$1 = { class: "audio-backgroud-wrap" };
const _hoisted_2$1 = /* @__PURE__ */ createStaticVNode('<div class="line line-1"></div><div class="line line-2"></div><div class="line line-3"></div><div class="line line-4"></div><div class="line line-5"></div><div class="line line-6"></div><div class="line line-7"></div><div class="line line-8"></div><div class="line line-9"></div><div class="line line-10"></div>', 10);
const _hoisted_12$1 = [
  _hoisted_2$1
];
const __default__$1 = {
  name: "AudioBackground"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: {
    isPlaying: { type: Boolean, default: false },
    lineNumber: { default: 10 }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.lineNumber, (item) => {
          return openBlock(), createElementBlock("div", {
            key: item,
            class: normalizeClass(`audio-backgroud ${__props.isPlaying ? "" : "animation-stop"}`)
          }, _hoisted_12$1, 2);
        }), 128))
      ]);
    };
  }
});
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
  class: "audio-wrap",
  "data-weiling-mobile-ui-wl-audio": ""
};
const _hoisted_2 = ["src", "loop"];
const _hoisted_3 = /* @__PURE__ */ createTextVNode(" Sorry, Your browser does not support the ");
const _hoisted_4 = /* @__PURE__ */ createElementVNode("code", null, "audio", -1);
const _hoisted_5 = /* @__PURE__ */ createTextVNode(" element. ");
const _hoisted_6 = [
  _hoisted_3,
  _hoisted_4,
  _hoisted_5
];
const _hoisted_7 = { class: "audio" };
const _hoisted_8 = ["onClick"];
const _hoisted_9 = ["onClick"];
const _hoisted_10 = { class: "forward" };
const _hoisted_11 = ["onClick"];
const _hoisted_12 = ["onClick"];
const _hoisted_13 = { class: "back" };
const _hoisted_14 = { class: "speed-progress" };
const _hoisted_15 = { class: "time" };
const __default__ = {
  name: "WlAudio"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    src: { default: "" },
    loop: { type: Boolean, default: false },
    stepSecond: { default: 5 },
    defaultTime: { default: 0 },
    needPlaybackRate: { type: Boolean, default: false },
    playbackRateArr: { default: () => [0.25, 0.5, 1, 1.25, 1.5, 2] },
    videoDuration: { default: 0 }
  },
  emits: ["onError", "onChangeRate", "onLoadedmetadata", "onEnded", "onPause", "onPlay", "onPlaying", "onWaiting", "onForward", "onBack"],
  setup(__props, { expose, emit }) {
    const props = __props;
    const duration = ref(0);
    const currentTime = ref(0);
    const isPlaying = ref(false);
    const rate = ref(1);
    const lineNumber = ref(10);
    const audioRef = ref(null);
    const audioControlsRef = ref(null);
    const played_rate = computed(() => {
      if (currentTime.value > duration.value) {
        return "100%";
      }
      if (duration.value === 0)
        return "0%";
      return currentTime.value / duration.value * 100 + "%";
    });
    const formatSecond = computed(() => {
      return function(seconds) {
        seconds = parseInt(seconds);
        if (Number.isNaN(seconds) || !Number.isSafeInteger(seconds)) {
          return "00:00";
        } else {
          const hour = Math.floor(seconds / 3600);
          const mintue = Math.floor((seconds - hour * 3600) / 60);
          const second = seconds - mintue * 60 - hour * 3600;
          if (hour !== 0) {
            return `${hour}:${mintue < 10 ? "0" + mintue : mintue}:${second < 10 ? "0" + second : second}`;
          } else {
            return `${mintue < 10 ? "0" + mintue : mintue}:${second < 10 ? "0" + second : second}`;
          }
        }
      };
    });
    watch(
      () => props.defaultTime,
      (val) => {
        if (props.defaultTime < 0) {
          currentTime.value = 0;
        } else {
          currentTime.value = props.defaultTime;
        }
        if (isPlaying.value) {
          audioRef.value.currentTime = currentTime.value;
        }
      }
    );
    onMounted(() => {
      const width = audioControlsRef.value.clientWidth;
      lineNumber.value = Math.ceil(width / 20);
      audioRef.value.addEventListener("onerror", (err) => {
        emit("onError", err);
      });
    });
    const loadedmetadata = () => {
      var _a;
      duration.value = (_a = audioRef.value) == null ? void 0 : _a.duration;
      if (currentTime.value > duration.value) {
        currentTime.value = duration.value;
      }
      emit("onLoadedmetadata", audioRef.value);
    };
    const ended = () => {
      isPlaying.value = false;
      emit("onEnded");
    };
    const pause = () => emit("onPause");
    const play = () => emit("onPlay");
    const playing = () => emit("onPlaying");
    const waiting = () => emit("onWaiting");
    const timeupdate = () => {
      var _a;
      currentTime.value = (_a = audioRef.value) == null ? void 0 : _a.currentTime;
    };
    const onClick = () => {
      if (!isPlaying.value) {
        if (currentTime.value >= duration.value) {
          currentTime.value = 0;
        }
        audioRef.value.currentTime = currentTime.value;
        audioRef.value.play();
      } else {
        audioRef.value.pause();
      }
      isPlaying.value = !isPlaying.value;
    };
    const onForward = () => {
      if (currentTime.value + props.stepSecond > duration.value) {
        currentTime.value = duration.value;
      } else {
        audioRef.value.currentTime = currentTime.value + props.stepSecond;
      }
      emit("onForward");
    };
    const onBack = () => {
      if (currentTime.value - props.stepSecond <= 0) {
        audioRef.value.currentTime = 0;
      } else {
        audioRef.value.currentTime = currentTime.value - props.stepSecond;
      }
      emit("onBack");
    };
    const onChangeRate = () => {
      let index = props.playbackRateArr.findIndex((ele) => ele === rate.value);
      index = (index + 1) % props.playbackRateArr.length;
      rate.value = props.playbackRateArr[index];
      audioRef.value.playbackRate = rate.value;
      emit("onChangeRate", rate.value);
    };
    const onChangeTime = (time) => {
      time = parseInt(time);
      if (time > duration.value) {
        audioRef.value.currentTime = duration.value;
      } else {
        audioRef.value.currentTime = time;
      }
    };
    watch(
      () => props.videoDuration,
      (val) => {
        if (Number(val) !== 0 && duration.value === 0) {
          duration.value = Number(val);
        }
      },
      {
        immediate: true
      }
    );
    expose({
      onChangeTime
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("audio", mergeProps({ src: __props.src }, _ctx.$attrs, {
          loop: __props.loop,
          ref_key: "audioRef",
          ref: audioRef,
          preload: "metadata",
          onLoadedmetadata: loadedmetadata,
          onEnded: ended,
          onPause: pause,
          onPlay: play,
          onPlaying: playing,
          onWaiting: waiting,
          onTimeupdate: timeupdate
        }), _hoisted_6, 16, _hoisted_2),
        createElementVNode("div", {
          class: "audio-controls",
          ref_key: "audioControlsRef",
          ref: audioControlsRef
        }, [
          createElementVNode("div", _hoisted_7, [
            createVNode(_sfc_main$1, {
              lineNumber: lineNumber.value,
              isPlaying: isPlaying.value
            }, null, 8, ["lineNumber", "isPlaying"]),
            __props.needPlaybackRate ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: "playback-rate",
              onClick: withModifiers(onChangeRate, ["stop"])
            }, toDisplayString(rate.value) + "x ", 9, _hoisted_8)) : createCommentVNode("", true),
            createElementVNode("div", {
              class: "step",
              onClick: withModifiers(onBack, ["stop"])
            }, [
              createElementVNode("div", _hoisted_10, [
                createElementVNode("p", null, toDisplayString(__props.stepSecond), 1)
              ])
            ], 8, _hoisted_9),
            createElementVNode("div", {
              class: "play",
              onClick: withModifiers(onClick, ["stop"])
            }, [
              withDirectives(createVNode(_sfc_main$2, {
                type: "videoFill",
                width: "24",
                height: "24",
                color: "#1c9fff"
              }, null, 512), [
                [vShow, !isPlaying.value]
              ]),
              withDirectives(createVNode(_sfc_main$2, {
                type: "pause",
                width: "24",
                height: "24",
                color: "#1c9fff"
              }, null, 512), [
                [vShow, isPlaying.value]
              ])
            ], 8, _hoisted_11),
            createElementVNode("div", {
              class: "step",
              onClick: withModifiers(onForward, ["stop"])
            }, [
              createElementVNode("div", _hoisted_13, [
                createElementVNode("p", null, toDisplayString(__props.stepSecond), 1)
              ])
            ], 8, _hoisted_12)
          ]),
          createElementVNode("div", _hoisted_14, [
            createElementVNode("div", {
              class: "played-process",
              style: normalizeStyle(`width: ${unref(played_rate)}`)
            }, null, 4),
            createElementVNode("div", {
              class: "point",
              style: normalizeStyle(`left: ${unref(played_rate)}`)
            }, null, 4)
          ]),
          createElementVNode("div", _hoisted_15, [
            createElementVNode("p", null, toDisplayString(unref(formatSecond)(currentTime.value)), 1),
            createElementVNode("p", null, toDisplayString(unref(formatSecond)(duration.value)), 1)
          ])
        ], 512)
      ]);
    };
  }
});
var __uno = "";
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };
