import { defineComponent as M, useSlots as O, ref as d, computed as l, watch as P, onMounted as Y, onUnmounted as b, openBlock as S, createBlock as G, withCtx as s, createElementBlock as J, normalizeStyle as K, normalizeClass as k, createVNode as F, createCommentVNode as N, createElementVNode as f, renderSlot as h, Transition as Q, withDirectives as X, vShow as Z, createTextVNode as ee, toDisplayString as te, nextTick as x } from "vue";
import { C as v } from "../Shared/base-PQGakkrl.js";
import { _ as oe } from "../Shared/Index.vue_vue_type_script_setup_true_lang-B3Jxjv3S.js";
import { _ as ne } from "../Shared/Index.vue_vue_type_script_setup_true_lang-Bv5Aqano.js";
const le = { class: "card-legend-demo" }, se = { class: "card-legend-code" }, ue = /* @__PURE__ */ M({
  name: "ClCardLegend",
  __name: "Index",
  props: {
    title: {},
    className: {}
  },
  setup(p) {
    const g = p, T = O(), w = d(null), n = d(!1), i = d(!1), a = d("auto"), L = l(() => typeof T.remark < "u"), B = l(() => typeof T.code < "u"), H = l(() => {
      const e = ["card-legend"];
      return v.isEmpty(g.className) || g.className?.split(" ").forEach((t) => {
        v.isEmpty(t) || e.push(t);
      }), e.join(" ");
    }), $ = l(() => ({
      "card-legend-footer": !0,
      "card-footer-fixed": i.value
    })), A = l(() => ({
      "icon-rotate": !0,
      "rotate-180": n.value
    }));
    let r, c, o;
    const _ = () => {
      r && (clearTimeout(r), r = null), c && (clearTimeout(c), c = null);
    }, u = () => {
      if (n.value) {
        const e = w.value;
        if (!v.isUndefined(e)) {
          const t = window.pageYOffset || document.documentElement.scrollTop, D = window.innerHeight, E = t + D, R = e.clientHeight, C = e.getBoundingClientRect(), y = e.closest(".card-legend"), j = y.clientWidth, q = y.querySelector(".card-footer").children[0].clientHeight;
          C.top + q + 10 < E && C.top + R > E ? (i.value = !0, a.value = j.toString() + "px") : (i.value = !1, a.value = "auto");
        }
      } else
        i.value = !1, a.value = "auto";
    }, m = () => {
      o && (clearTimeout(o), o = null), o = setTimeout(() => {
        u();
      }, 200);
    };
    P(
      () => n.value,
      (e, t) => {
        e !== t && (_(), e ? window.addEventListener("scroll", m) : window.removeEventListener("scroll", m));
      }
    );
    const W = () => {
      n.value = !n.value;
    }, I = (e) => {
      e.style.height = "auto";
      const t = window.getComputedStyle(e, null).height;
      e.style.height = "0", r = setTimeout(function() {
        e.style.height = t;
      }, 25);
    }, U = (e) => {
      c = setTimeout(function() {
        e.style.height = "0";
      }, 25);
    }, V = () => {
      x(() => {
        u();
      });
    }, z = () => {
      x(() => {
        u();
      });
    };
    return Y(() => {
    }), b(() => {
      window.removeEventListener("scroll", m), _(), o && (clearTimeout(o), o = null);
    }), (e, t) => (S(), G(oe, {
      theme: "loopline",
      className: H.value
    }, {
      headTitle: s(() => [
        ee(te(p.title), 1)
      ]),
      headExplain: s(() => [
        L.value ? h(e.$slots, "remark", { key: 0 }) : N("", !0)
      ]),
      default: s(() => [
        f("div", le, [
          h(e.$slots, "demo")
        ]),
        F(Q, {
          name: "slide-fade",
          onEnter: I,
          onAfterEnter: V,
          onLeave: U,
          onAfterLeave: z
        }, {
          default: s(() => [
            X(f("div", {
              ref_key: "refElCode",
              ref: w
            }, [
              f("div", se, [
                h(e.$slots, "code")
              ])
            ], 512), [
              [Z, n.value]
            ])
          ]),
          _: 3
        })
      ]),
      foot: s(() => [
        B.value ? (S(), J("div", {
          key: 0,
          class: k($.value),
          onClick: W,
          style: K({ width: a.value })
        }, [
          F(ne, {
            name: "caret-down",
            class: k(A.value)
          }, null, 8, ["class"])
        ], 6)) : N("", !0)
      ]),
      _: 3
    }, 8, ["className"]));
  }
});
export {
  ue as default
};
//# sourceMappingURL=ClCardLegend.js.map
