"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../ui/index.js");
const dom = require("../../ui/src/dom.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const VxeNoticeBarComponent = comp.defineVxeComponent({
  name: "VxeNoticeBar",
  props: {
    duration: [String, Number],
    direction: {
      type: String,
      default: () => config.getConfig().noticeBar.direction
    },
    speed: {
      type: String,
      default: () => config.getConfig().noticeBar.speed
    },
    content: String,
    vertical: Boolean,
    loop: {
      type: Boolean
    },
    size: {
      type: String,
      default: () => config.getConfig().noticeBar.size || config.getConfig().size
    }
  },
  emits: [
    "start",
    "end"
  ],
  setup(props, context) {
    const { slots, emit } = context;
    const $xeTabs = vue.inject("$xeTabs", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const refElem = vue.ref();
    const refContentElem = vue.ref();
    const reactData = vue.reactive({
      animationStatus: false,
      animationDuration: 0
    });
    const refMaps = {
      refElem
    };
    const computeNoticeText = vue.computed(() => {
      const { content } = props;
      return `${content || ""}`;
    });
    const computeTabsResizeFlag = vue.computed(() => {
      return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
    });
    const computeMaps = {};
    const $xeNoticeBar = {
      xID,
      props,
      context,
      reactData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $noticeBar: $xeNoticeBar }, params));
    };
    const noticeBarMethods = {
      dispatchEvent
    };
    const noticeBarPrivateMethods = {};
    const updateAnimationStyle = () => {
      const { speed } = props;
      const contEl = refContentElem.value;
      if (contEl) {
        let sRate = 46;
        if (speed === "fast") {
          sRate = 118;
        } else if (speed === "slow") {
          sRate = 18;
        }
        reactData.animationDuration = Math.ceil(contEl.scrollWidth / sRate);
      }
    };
    const animationStartEvent = (evnt) => {
      reactData.animationStatus = true;
      dispatchEvent("start", { status: true }, evnt);
    };
    const animationEndEvent = (evnt) => {
      reactData.animationStatus = false;
      dispatchEvent("end", { status: false }, evnt);
    };
    Object.assign($xeNoticeBar, noticeBarMethods, noticeBarPrivateMethods);
    const renderVN = () => {
      const { vertical, duration, direction, loop } = props;
      const { animationDuration, animationStatus } = reactData;
      const vSize = computeSize.value;
      const noticeText = computeNoticeText.value;
      const defaultSlot = slots.default;
      const prefixSlot = slots.prefix;
      const suffixSlot = slots.suffix;
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-notice-bar", `is--${vertical ? "vertical" : "horizontal"}`, `dir--${direction || "left"}`, {
          [`size--${vSize}`]: vSize,
          "is--loop": loop
        }]
      }, [
        prefixSlot ? vue.h("div", {
          class: "vxe-notice-bar--prefix"
        }, prefixSlot({})) : index_esm.renderEmptyElement(),
        vue.h("div", {
          class: "vxe-notice-bar--content"
        }, [
          vue.h("div", {
            ref: refContentElem,
            class: "vxe-notice-bar--inner"
          }, [
            vue.h("div", {
              class: ["vxe-notice-bar--wrapper", `is--${animationStatus ? "progress" : "end"}`],
              style: {
                animationDuration: duration ? dom.toCssUnit(duration, "s") : `${animationDuration}s`
              },
              onAnimationstart: animationStartEvent,
              onAnimationend: animationEndEvent
            }, defaultSlot ? defaultSlot({}) : noticeText)
          ])
        ]),
        suffixSlot ? vue.h("div", {
          class: "vxe-notice-bar--suffix"
        }, suffixSlot({})) : index_esm.renderEmptyElement()
      ]);
    };
    vue.watch(computeTabsResizeFlag, () => {
      updateAnimationStyle();
    });
    vue.onMounted(() => {
      event.globalEvents.on($xeNoticeBar, "resize", updateAnimationStyle);
      updateAnimationStyle();
    });
    vue.onBeforeUnmount(() => {
      event.globalEvents.off($xeNoticeBar, "resize");
    });
    $xeNoticeBar.renderVN = renderVN;
    return $xeNoticeBar;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeNoticeBarComponent;
