import { defineComponent as f, watch as w, createElementBlock as S, openBlock as T, unref as l, normalizeStyle as _, toDisplayString as b, ref as c, onMounted as z, onBeforeUnmount as E } from "vue";
import { cloneDeep as j, isEqual as C } from "lodash";
import i from "dayjs";
import "dayjs/locale/zh-cn";
import { autoInstallFont as I, jsonToCssStyle as k } from "../../commons/utils/json2css.mjs";
const D = ["ztitle"], O = f({ name: "zv-text-real-time" }), H = /* @__PURE__ */ f({
  ...O,
  props: {
    basicOption: {},
    datasource: {},
    useEvents: {}
  },
  emits: [
    "on-change"
  ],
  setup(d, { emit: p }) {
    const u = p, a = d, s = (o) => {
      const t = c(), n = c(i().locale("zh-cn").format(o.format)), x = (e) => {
        I(e.fontFamily);
        const r = {};
        e.color && e.color.includes("linear-gradient") && (r.backgroundImage = e.color, r["-webkit-background-clip"] = "text", r.color = "transparent");
        const y = {};
        return e.textAlign === "left" && (e.justifyContent = "flex-start"), e.textAlign === "center" && (e.justifyContent = "center"), e.textAlign === "right" && (e.justifyContent = "flex-end"), {
          ...k(e),
          ...r,
          ...y,
          ...e.textShadow.show ? { "--text-shadow": `${e.textShadow.x}px ${e.textShadow.y}px ${e.textShadow.value}px ${e.textShadow.color}` } : {}
        };
      }, g = (e) => {
        t.value && clearInterval(t.value), t.value = setInterval(() => {
          n.value = i().locale("zh-cn").format(e), u("on-change", n.value), window.SHJParseEvent(a.useEvents, "on-change", n.value);
        }, 1e3);
      };
      return z(() => {
        t.value = setInterval(() => {
          n.value = i().locale("zh-cn").format(o.format), u("on-change", n.value), window.SHJParseEvent(a.useEvents, "on-change", n.value);
        }, 1e3);
      }), E(() => {
        t.value && clearInterval(t.value);
      }), { updateRealTime: g, realTime: n, rendererDomStyle: x };
    }, { updateRealTime: v, realTime: m, rendererDomStyle: h } = s(a.basicOption);
    return w(() => j(a.basicOption.format), (o, t) => {
      C(o, t) || v(o);
    }, {
      deep: !0
    }), (o, t) => (T(), S("div", {
      class: "real-time",
      style: _(l(h)(o.basicOption.css)),
      ztitle: l(m)
    }, b(l(m)), 13, D));
  }
});
export {
  H as default
};
