import { defineComponent as te, reactive as S, ref as T, computed as ae, onMounted as ne, nextTick as oe, openBlock as d, createElementBlock as u, normalizeClass as V, createElementVNode as o, unref as P, toDisplayString as h, Fragment as I, renderList as Y, withModifiers as se, createCommentVNode as j, renderSlot as le } from "vue";
import { C as m } from "../Shared/base-PQGakkrl.js";
import { C as l } from "../Shared/day-Bz9LfelO.js";
import { C as re } from "../Shared/index-BnerInzC.js";
import { u as ce } from "../Shared/language-DxTlvFs2.js";
const ie = { class: "calendar-container" }, de = { colspan: "7" }, ue = { class: "calendar-head-label" }, me = ["title"], ye = { class: "calendar-head-label-year" }, he = { class: "calendar-head-label-month" }, pe = { class: "calendar-head-label-next" }, fe = ["title"], ve = { class: "calendar-head-Week" }, De = ["onClick", "onMouseover", "onMouseout"], _e = {
  key: 0,
  class: "clIconFont clIcon-jin day-today"
}, Me = { class: "day-num" }, ge = { class: "day-lunar-num" }, Fe = /* @__PURE__ */ te({
  name: "ClCalendar",
  __name: "Index",
  props: {
    className: String,
    viewDateTime: String,
    weekFirst: {
      type: String,
      default: "monday"
      // monday|sunday
    }
  },
  emits: ["onChange", "onClick", "onHover"],
  setup(H, { emit: L }) {
    const p = H, g = L, { optPageLanguage: k, getPageLanguage: O } = ce();
    O("dataTime");
    const s = S({
      keyIndex: `Calendar-${m.getRandom(8)}`,
      selectId: "",
      hoverId: ""
    }), f = S({
      titleYear: "",
      titleMonth: ""
    }), b = T([]), F = T([]), i = {
      viewDate: null,
      currentDate: l.initDay()
    }, B = (t) => {
      g("onClick", t);
    }, W = (t, e) => {
      g("onHover", t, e);
    }, $ = (t) => {
      g("onChange", t);
    }, R = ae(() => {
      const { className: t } = p, e = {
        "panel-calendar": !0
      };
      return !m.isEmpty(t) && t && t.split(" ").forEach((n) => {
        m.isEmpty(n) || (e[n] = !0);
      }), e;
    }), z = () => {
      const t = i.viewDate.year(), n = i.viewDate.localeData().monthsShort(i.viewDate);
      f.titleYear = `${t}${k.value.year}`, f.titleMonth = n;
    }, A = () => {
      const t = i.viewDate.localeData(), e = t.weekdaysMin(), n = t.firstDayOfWeek();
      let r = [];
      p.weekFirst === "sunday" ? r = e : e.forEach((a, y) => {
        r[(7 + y - n) % 7] = a;
      }), b.value = r;
    }, q = () => {
      const t = i.viewDate.clone(), e = i.currentDate, n = t.year(), r = t.month();
      let a = t.clone().subtract(1, "months");
      const y = [];
      let c = [];
      a = a.date(a.daysInMonth()).startOf("week"), p.weekFirst === "sunday" && (a = a.subtract(1, "days"));
      for (let w = 0; w < 42; w += 1) {
        w > 0 && (a = a.add(1, "days"));
        const v = a.clone(), E = v.date(), U = v.lunar("DD"), X = v.lunar(U === "01" ? "月" : "日"), Z = l.initFormat(v), D = a.year() === n && a.month() < r || a.year() < n, _ = a.year() === n && a.month() > r || a.year() > n, N = e && a.isSame(e, "day") && !D && !_, ee = re.getAddClass("calendar-day", {
          old: D,
          new: _,
          today: N
        }), M = {
          id: `day-${E}-${m.getRandom(5)}`,
          cls: ee,
          day: Z,
          dayNum: E,
          lunar: X,
          isOld: D,
          isNew: _,
          isCurrentMonth: !D && !_,
          isToday: N
        };
        c.push(M), M.isCurrentMonth && !m.isEmpty(s.selectId) && M.dayNum === s.selectId && (s.selectId = M.id), c.length === 7 && (y.push({ days: c }), c = []);
      }
      F.value = y;
    }, C = (t) => {
      i.viewDate = m.isEmpty(t) ? l.initDay() : l.getDayjsObject(t), z(), A(), q();
    }, G = () => {
      let t = "";
      const { viewDateTime: e } = p;
      if (e && !m.isEmpty(e)) {
        const n = e.split("-");
        n.length === 2 ? t = e : n.length === 3 && (t = l.initFormat({ value: e, format: "YYYY-MM" }), s.selectId = l.getDayjsObject(e).date());
      } else
        t = l.initFormat({ format: "YYYY-MM" });
      C(t);
    };
    ne(() => {
      oe(() => {
        G();
      });
    });
    const J = (t, e) => {
      t.preventDefault(), t.stopPropagation(), e.isCurrentMonth && s.selectId !== e.id && (s.selectId = e.id, B(e.day));
    }, x = (t, e, n) => {
      t.preventDefault(), t.stopPropagation(), e.isCurrentMonth && (n ? s.hoverId = e.id : s.hoverId = "", W(e.day, n));
    }, K = () => {
      const t = i.viewDate.clone();
      let e = l.subtractTime(t, 1, "months");
      e = l.initFormat({ value: e, format: "YYYY-MM" }), $(e), C(e);
    }, Q = () => {
      const t = i.viewDate.clone();
      let e = l.addTime(t, 1, "months");
      e = l.initFormat({ value: e, format: "YYYY-MM" }), $(e), C(e);
    };
    return (t, e) => (d(), u("div", {
      class: V(R.value)
    }, [
      o("table", ie, [
        o("thead", null, [
          o("tr", null, [
            o("th", de, [
              o("div", ue, [
                o("span", {
                  class: "calendar-head-label-prev-month",
                  title: P(k).prevMonth,
                  onClick: K
                }, [...e[0] || (e[0] = [
                  o("i", { class: "clIconFont clIcon-angle-left" }, null, -1)
                ])], 8, me),
                o("span", null, [
                  o("span", ye, h(f.titleYear), 1),
                  o("span", he, h(f.titleMonth), 1)
                ]),
                o("span", pe, [
                  o("span", {
                    class: "calendar-head-label-next-month",
                    title: P(k).nextMonth,
                    onClick: Q
                  }, [...e[1] || (e[1] = [
                    o("i", { class: "clIconFont clIcon-angle-right" }, null, -1)
                  ])], 8, fe)
                ])
              ])
            ])
          ]),
          o("tr", ve, [
            (d(!0), u(I, null, Y(b.value, (n, r) => (d(), u("th", {
              key: `${s.keyIndex}-week-${r}`
            }, h(n), 1))), 128))
          ])
        ]),
        o("tbody", null, [
          (d(!0), u(I, null, Y(F.value, (n, r) => (d(), u("tr", {
            key: `${s.keyIndex}-days-${r}`
          }, [
            (d(!0), u(I, null, Y(n.days, (a, y) => (d(), u("td", {
              key: `${s.keyIndex}-day-${y}`,
              class: V([a.cls, s.selectId === a.id ? "calendar-day-select" : "", s.hoverId === a.id ? "calendar-day-hover" : ""]),
              onClick: se((c) => J(c, a), ["stop"]),
              onMouseover: (c) => x(c, a, !0),
              onMouseout: (c) => x(c, a, !1)
            }, [
              a.isToday ? (d(), u("i", _e)) : j("", !0),
              o("div", Me, h(a.dayNum), 1),
              o("div", ge, h(a.lunar), 1),
              a.isCurrentMonth ? le(t.$slots, "day", {
                key: 1,
                time: a.day,
                data: parseInt(a.dayNum)
              }) : j("", !0)
            ], 42, De))), 128))
          ]))), 128))
        ])
      ])
    ], 2));
  }
});
export {
  Fe as default
};
//# sourceMappingURL=ClCalendar.js.map
