import { defineComponent, computed, onMounted, onUnmounted, watch, createVNode, Teleport } from 'vue';
import '../../../utils/index.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

var VcNotice = /* @__PURE__ */ defineComponent({
  name: "Notice",
  inheritAttrs: false,
  props: ["prefixCls", "duration", "updateMark", "noticeKey", "closeIcon", "closable", "props", "onClick", "onClose", "holder", "visible"],
  setup(props, {
    attrs,
    slots
  }) {
    let closeTimer;
    let isUnMounted = false;
    const duration = computed(() => props.duration === void 0 ? 4.5 : props.duration);
    const startCloseTimer = () => {
      if (duration.value && !isUnMounted) {
        closeTimer = setTimeout(() => {
          close();
        }, duration.value * 1e3);
      }
    };
    const clearCloseTimer = () => {
      if (closeTimer) {
        clearTimeout(closeTimer);
        closeTimer = null;
      }
    };
    const close = (e) => {
      if (e)
        e.stopPropagation();
      clearCloseTimer();
      const {
        onClose,
        noticeKey
      } = props;
      if (onClose)
        onClose(noticeKey);
    };
    const restartCloseTimer = () => {
      clearCloseTimer();
      startCloseTimer();
    };
    onMounted(() => {
      startCloseTimer();
    });
    onUnmounted(() => {
      isUnMounted = true;
      clearCloseTimer();
    });
    watch([duration, () => props.updateMark, () => props.visible], ([preDuration, preUpdateMark, preVisible], [newDuration, newUpdateMark, newVisible]) => {
      if (preDuration !== newDuration || preUpdateMark !== newUpdateMark || preVisible !== newVisible && newVisible)
        restartCloseTimer();
    }, {
      flush: "post"
    });
    return () => {
      var _a, _b;
      const {
        prefixCls,
        closable,
        closeIcon = (_a = slots.closeIcon) == null ? void 0 : _a.call(slots),
        onClick,
        holder
      } = props;
      const {
        class: className,
        style
      } = attrs;
      const componentClass = `${prefixCls}-notice`;
      const dataOrAriaAttributeProps = Object.keys(attrs).reduce((acc, key) => {
        if (key.startsWith("data-") || key.startsWith("aria-") || key === "role")
          acc[key] = attrs[key];
        return acc;
      }, {});
      const node = createVNode("div", {
        "class": classNames(componentClass, className, {
          [`${componentClass}-closable`]: closable
        }),
        "style": style,
        "onMouseenter": clearCloseTimer,
        "onMouseleave": startCloseTimer,
        "onClick": onClick,
        ...dataOrAriaAttributeProps
      }, [createVNode("div", {
        "class": `${componentClass}-content`
      }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]), closable ? createVNode("a", {
        "tabindex": 0,
        "onClick": close,
        "class": `${componentClass}-close`
      }, [closeIcon || createVNode("span", {
        "class": `${componentClass}-close-x`
      }, null)]) : null]);
      if (holder)
        return createVNode(Teleport, {
          "to": holder
        }, {
          default: () => node
        });
      return node;
    };
  }
});

export { VcNotice as default };
//# sourceMappingURL=Notice.mjs.map
