import { defineComponent as T, shallowRef as V, computed as h, watch as A, provide as G, openBlock as o, createElementBlock as n, Fragment as C, renderSlot as L, normalizeClass as r, unref as e, createCommentVNode as _, normalizeStyle as P, createBlock as b, withCtx as i, createElementVNode as c, toDisplayString as y, createVNode as u, resolveDynamicComponent as j, renderList as I, createTextVNode as E } from "vue";
import { SymbolState as M } from "./symbol.mjs";
import { wetGuideProps as O } from "./types.mjs";
import { useNamespace as U, ElPopover as W, ElButton as g, ElIcon as X, ElSpace as $ } from "element-plus";
import { Close as q } from "../../node_modules/.pnpm/@element-plus_icons-vue@2.3.1_vue@3.4.21/node_modules/@element-plus/icons-vue/dist/index.mjs";
const H = /* @__PURE__ */ c("div", { style: { width: "100%", height: "100%" } }, null, -1), J = { key: 1 }, K = { class: "actions-btnbox" }, f = 8, se = /* @__PURE__ */ T({
  name: "WetGuide",
  __name: "index",
  props: O,
  emits: ["update:modelValue"],
  setup(S, { emit: N }) {
    const l = U("guide"), w = N, a = S, s = V(0), x = {}, d = h(() => {
      const t = { ...x };
      return Object.values(t).filter((m) => m !== null).sort((m, v) => m.value.order - v.value.order);
    }), D = h(() => {
      const t = d.value[s.value];
      return t ? {
        width: t.value.width + f + "px",
        height: t.value.height + f + "px",
        top: t.value.top - f / 2 + "px",
        left: t.value.left - f / 2 + "px"
      } : {};
    }), p = h(() => {
      const t = d.value[s.value];
      return console.log(t), {
        description: t.value.description || "",
        title: t.value.title || "",
        placement: t.value.placement
      };
    });
    let k = V(!1);
    A([() => a.modelValue, s], () => {
      k.value = !1, setTimeout(() => {
        k.value = !0;
      }, 100);
    });
    const z = () => {
      s.value--;
    }, B = () => {
      if (s.value === d.value.length - 1) {
        w("update:modelValue", !1), s.value = 0;
        return;
      }
      s.value++;
    }, F = () => {
      s.value = 0, w("update:modelValue", !1);
    };
    return G(M, x), (t, R) => (o(), n(C, null, [
      L(t.$slots, "default"),
      a.modelValue ? (o(), n("div", {
        key: 0,
        class: r(e(l).e("gide-mask"))
      }, null, 2)) : _("", !0),
      a.modelValue ? (o(), n("div", {
        key: 1,
        class: r([e(l).b(), e(l).is("mask", a.mask)]),
        style: P(D.value)
      }, [
        e(k) ? (o(), b(e(W), {
          key: 0,
          "popper-class": a.mask ? e(l).e("mask-popover") : e(l).e("popover"),
          visible: !0,
          width: "auto",
          teleported: !1,
          placement: p.value.placement
        }, {
          reference: i(() => [
            H
          ]),
          default: i(() => [
            c("div", {
              class: r([e(l).e("header"), e(l).is("mask", a.mask)])
            }, [
              c("div", null, y(p.value.title), 1),
              u(e(g), { link: "" }, {
                default: i(() => [
                  u(e(X), {
                    class: "close",
                    onClick: F
                  }, {
                    default: i(() => [
                      u(e(q))
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              })
            ], 2),
            c("div", {
              class: r([e(l).e("description"), e(l).is("mask", a.mask)])
            }, [
              typeof p.value.description != "string" ? (o(), b(j(p.value.description), { key: 0 })) : (o(), n("div", J, y(p.value.description), 1))
            ], 2),
            c("div", {
              class: r([e(l).e("footer")])
            }, [
              u(e($), { class: "index-dots" }, {
                default: i(() => [
                  (o(!0), n(C, null, I(d.value, (m, v) => (o(), n("div", {
                    class: r(["index-dot", e(l).is("mask", a.mask), e(l).is("active", v <= s.value)]),
                    key: v
                  }, null, 2))), 128))
                ]),
                _: 1
              }),
              c("div", K, [
                u(e(g), {
                  plain: !a.mask,
                  size: "small",
                  disabled: s.value === 0,
                  click: "previous",
                  onClick: z
                }, {
                  default: i(() => [
                    E("上一步 ")
                  ]),
                  _: 1
                }, 8, ["plain", "disabled"]),
                u(e(g), {
                  size: "small",
                  type: a.mask ? "primary" : "",
                  onClick: B
                }, {
                  default: i(() => [
                    E(y(s.value === d.value.length - 1 ? "完成" : "下一步"), 1)
                  ]),
                  _: 1
                }, 8, ["type"])
              ])
            ], 2)
          ]),
          _: 1
        }, 8, ["popper-class", "placement"])) : _("", !0)
      ], 6)) : _("", !0)
    ], 64));
  }
});
export {
  se as default
};
