"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const useExpose = require("../composables/use-expose.js");
const onPopupReopen = require("../composables/on-popup-reopen.js");
const index = require("../icon/index.js");
const props = require("../utils/props.js");
const create = require("../utils/create.js");
const basic = require("../utils/basic.js");
const [name, bem] = create.createNamespace("notice-bar");
const noticeBarProps = {
  text: String,
  mode: String,
  color: String,
  delay: props.makeNumericProp(1),
  speed: props.makeNumericProp(60),
  leftIcon: String,
  wrapable: Boolean,
  background: String,
  scrollable: {
    type: Boolean,
    default: null
  }
};
var stdin_default = Vue.defineComponent({
  name,
  props: noticeBarProps,
  emits: ["close", "replay"],
  setup(props2, {
    emit,
    slots
  }) {
    let wrapWidth = 0;
    let contentWidth = 0;
    let startTimer;
    const wrapRef = Vue.ref();
    const contentRef = Vue.ref();
    const state = Vue.reactive({
      show: true,
      offset: 0,
      duration: 0
    });
    const renderLeftIcon = () => {
      if (slots["left-icon"]) {
        return slots["left-icon"]();
      }
      if (props2.leftIcon) {
        return Vue.createVNode(index.Icon, {
          "class": bem("left-icon"),
          "name": props2.leftIcon
        }, null);
      }
    };
    const getRightIconName = () => {
      if (props2.mode === "closeable") {
        return "cross";
      }
      if (props2.mode === "link") {
        return "arrow";
      }
    };
    const onClickRightIcon = (event) => {
      if (props2.mode === "closeable") {
        state.show = false;
        emit("close", event);
      }
    };
    const renderRightIcon = () => {
      if (slots["right-icon"]) {
        return slots["right-icon"]();
      }
      const name2 = getRightIconName();
      if (name2) {
        return Vue.createVNode(index.Icon, {
          "name": name2,
          "class": bem("right-icon"),
          "onClick": onClickRightIcon
        }, null);
      }
    };
    const onTransitionEnd = () => {
      state.offset = wrapWidth;
      state.duration = 0;
      index_esm.raf(() => {
        index_esm.doubleRaf(() => {
          state.offset = -contentWidth;
          state.duration = (contentWidth + wrapWidth) / +props2.speed;
          emit("replay");
        });
      });
    };
    const renderMarquee = () => {
      const ellipsis = props2.scrollable === false && !props2.wrapable;
      const style = {
        transform: state.offset ? `translateX(${state.offset}px)` : "",
        transitionDuration: `${state.duration}s`
      };
      return Vue.createVNode("div", {
        "ref": wrapRef,
        "role": "marquee",
        "class": bem("wrap")
      }, [Vue.createVNode("div", {
        "ref": contentRef,
        "style": style,
        "class": [bem("content"), {
          "van-ellipsis": ellipsis
        }],
        "onTransitionend": onTransitionEnd
      }, [slots.default ? slots.default() : props2.text])]);
    };
    const reset = () => {
      const {
        delay,
        speed,
        scrollable
      } = props2;
      const ms = basic.isDef(delay) ? +delay * 1e3 : 0;
      wrapWidth = 0;
      contentWidth = 0;
      state.offset = 0;
      state.duration = 0;
      clearTimeout(startTimer);
      startTimer = setTimeout(() => {
        if (!wrapRef.value || !contentRef.value || scrollable === false) {
          return;
        }
        const wrapRefWidth = index_esm.useRect(wrapRef).width;
        const contentRefWidth = index_esm.useRect(contentRef).width;
        if (scrollable || contentRefWidth > wrapRefWidth) {
          index_esm.doubleRaf(() => {
            wrapWidth = wrapRefWidth;
            contentWidth = contentRefWidth;
            state.offset = -contentWidth;
            state.duration = contentWidth / +speed;
          });
        }
      }, ms);
    };
    onPopupReopen.onPopupReopen(reset);
    index_esm.onMountedOrActivated(reset);
    index_esm.useEventListener("pageshow", reset);
    useExpose.useExpose({
      reset
    });
    Vue.watch(() => [props2.text, props2.scrollable], reset);
    return () => {
      const {
        color,
        wrapable,
        background
      } = props2;
      return Vue.withDirectives(Vue.createVNode("div", {
        "role": "alert",
        "class": bem({
          wrapable
        }),
        "style": {
          color,
          background
        }
      }, [renderLeftIcon(), renderMarquee(), renderRightIcon()]), [[Vue.vShow, state.show]]);
    };
  }
});
exports.default = stdin_default;
exports.noticeBarProps = noticeBarProps;
