import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, reactive, onUnmounted, onMounted, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, createBlock, unref, createCommentVNode, toDisplayString, createVNode, withCtx, Fragment, renderList, createTextVNode, vShow, nextTick } from "vue";
import { a as _sfc_main$1, _ as _sfc_main$2 } from "../carousel/index2.js";
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
var index_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => '.layui-carousel{position:relative;left:0;top:0;background-color:#f8f8f8}.layui-carousel>[carousel-item]{position:relative;width:100%;height:100%;overflow:hidden}.layui-carousel>[carousel-item]:before{position:absolute;content:"\\e63d";left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:var(--global-neutral-color-8);font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-carousel>[carousel-item]>*{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s;overflow:hidden;visibility:hidden}.layui-carousel-updown>*{-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}.layui-carousel-arrow{display:none\\	;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:#0003;color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}.layui-carousel-arrow[lay-type=add]{left:auto!important;right:10px}.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add]{right:20px}.layui-carousel[lay-arrow=always] .layui-carousel-arrow{opacity:1;left:20px}.layui-carousel[lay-arrow=none] .layui-carousel-arrow{display:none}.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:#00000059}.layui-carousel:hover .layui-carousel-arrow{display:block\\	;opacity:1;left:20px}.layui-carousel-ind{position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}.layui-carousel[lay-indicator=outside]{margin-bottom:30px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind{top:10px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:#00000080}.layui-carousel[lay-indicator=none] .layui-carousel-ind{display:none}.layui-carousel-ind ul{display:inline-block;padding:5px;background-color:#0003;border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li{display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:var(--global-neutral-color-3);background-color:#ffffff80;border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li:hover{background-color:#ffffffb3}.layui-carousel-ind li.layui-this{background-color:#fff}.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this{display:block}.layui-carousel>[carousel-item]>.layui-this{left:0}.layui-carousel>[carousel-item]>.layui-carousel-prev{left:-100%}.layui-carousel>[carousel-item]>.layui-carousel-next{left:100%}.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right{left:0}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left{left:-100%}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right{left:100%}.layui-carousel[lay-anim=updown] .layui-carousel-arrow{left:50%!important;top:20px;margin:0 0 0 -18px}.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>*{left:0!important}.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add]{top:auto!important;bottom:20px}.layui-carousel[lay-anim=updown] .layui-carousel-ind{position:absolute;top:50%;right:20px;width:auto;height:auto;transform:translateY(-50%)}.layui-carousel[lay-anim=updown] .layui-carousel-ind ul{padding:3px 5px}.layui-carousel[lay-anim=updown] .layui-carousel-ind li{display:block;margin:6px 0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next{top:100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right{top:100%}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev{opacity:0}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{opacity:1}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right{opacity:0}.layui-notice-bar{padding:0 15px;border-radius:4px}.layui-notice-bar .layui-notice-bar-warp{display:flex;align-items:center;width:100%;height:inherit}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box{flex:1;height:inherit;display:flex;align-items:center;overflow:hidden;position:relative}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-text{white-space:nowrap;position:absolute;left:0}@keyframes around1{0%{left:0}to{left:calc(0px - var(--textWidth--))}}@keyframes around2{0%{left:calc(var(--textWidth--))}to{left:0}}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot{width:100%;white-space:nowrap}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot .layui-carousel>[carousel-item] *{display:flex;align-items:center}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-left-icon{width:24px;font-size:inherit!important}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon{width:24px;text-align:right;font-size:inherit!important}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon:hover{cursor:pointer}\n')();
const _hoisted_1 = {
  key: 1,
  class: "layui-notice-bar-warp-slot"
};
const __default__ = {
  name: "LayNoticeBar"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    mode: null,
    text: { default: "" },
    textlist: { default: () => [] },
    color: { default: () => "var(--color-warning)" },
    background: { default: () => "var(--color-warning-light-9)" },
    size: { default: 14 },
    height: { default: 40 },
    delay: { default: 1 },
    speed: { default: 100 },
    scrollable: { type: Boolean, default: false },
    leftIcon: null,
    rightIcon: null
  },
  emits: ["close", "link"],
  setup(__props, { emit }) {
    var _a;
    const props = __props;
    const noticeBarWarpRef = ref();
    const noticeBarTextRef = ref();
    const active = ref((_a = props.textlist[0]) == null ? void 0 : _a.id);
    const state = reactive({
      order: 1,
      oneTime: 0,
      twoTime: 0,
      warpOWidth: 0,
      textOWidth: 0,
      isMode: false,
      height: 40
    });
    var timer;
    const initAnimation = () => {
      nextTick(() => {
        state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
        state.textOWidth = noticeBarTextRef.value.offsetWidth;
        computeAnimationTime();
        timer = setTimeout(() => {
          changeAnimation();
        }, props.delay * 1e3);
      });
    };
    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
    });
    const computeAnimationTime = () => {
      state.oneTime = state.textOWidth / props.speed;
      state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
    };
    const changeAnimation = () => {
      if (state.order === 1) {
        noticeBarTextRef.value.style.cssText = `animation: around1 ${state.oneTime}s  linear; opactity: 1;`;
        state.order = 2;
      } else {
        noticeBarTextRef.value.style.cssText = `animation: around2 ${state.twoTime}s linear  ; opactity: 1;`;
        state.order = 1;
      }
    };
    const listenerAnimationend = () => {
      noticeBarTextRef.value.addEventListener("animationend", () => {
        changeAnimation();
      }, false);
    };
    const onRightIconClick = () => {
      if (!props.mode)
        return false;
      if (props.mode === "closeable") {
        state.isMode = true;
        emit("close");
      } else if (props.mode === "link") {
        emit("link");
      }
    };
    onMounted(() => {
      if (props.scrollable)
        return false;
      initAnimation();
      listenerAnimationend();
    });
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createElementBlock("div", {
        class: "layui-notice-bar",
        style: normalizeStyle({ background: __props.background, height: `${__props.height}px` })
      }, [
        createElementVNode("div", {
          class: "layui-notice-bar-warp",
          style: normalizeStyle({ color: __props.color, "font-size": `${__props.size}px` })
        }, [
          __props.leftIcon ? (openBlock(), createBlock(unref(_sfc_main$2E), {
            key: 0,
            class: "layui-notice-bar-warp-left-icon",
            type: __props.leftIcon
          }, null, 8, ["type"])) : createCommentVNode("", true),
          createElementVNode("div", {
            class: "layui-notice-bar-warp-text-box",
            ref_key: "noticeBarWarpRef",
            ref: noticeBarWarpRef,
            style: normalizeStyle("--textWidth--:" + __props.text.length + "em")
          }, [
            !__props.scrollable ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: "layui-notice-bar-warp-text",
              ref_key: "noticeBarTextRef",
              ref: noticeBarTextRef
            }, toDisplayString(__props.text), 513)) : (openBlock(), createElementBlock("div", _hoisted_1, [
              createVNode(_sfc_main$1, {
                modelValue: active.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event),
                indicator: "none",
                anim: "updown",
                arrow: "none",
                style: { height: `40px` }
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.textlist, (item) => {
                    return openBlock(), createBlock(_sfc_main$2, {
                      key: item.id,
                      id: item.id,
                      class: "layui-anim layui-anim-up"
                    }, {
                      default: withCtx(() => [
                        createTextVNode(toDisplayString(item.text), 1)
                      ]),
                      _: 2
                    }, 1032, ["id"]);
                  }), 128))
                ]),
                _: 1
              }, 8, ["modelValue"])
            ]))
          ], 4),
          __props.rightIcon ? (openBlock(), createBlock(unref(_sfc_main$2E), {
            key: 1,
            type: __props.rightIcon,
            class: "layui-notice-bar-warp-right-icon",
            onClick: onRightIconClick
          }, null, 8, ["type"])) : createCommentVNode("", true)
        ], 4)
      ], 4)), [
        [vShow, !state.isMode]
      ]);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };