import '@das-fed/upf-ui/packages/components/search/style.css';
import { withInstall as S } from "@das-fed/upf-utils/with-install/index";
import { defineComponent as R, ref as u, computed as b, watch as y, openBlock as T, createElementBlock as w, normalizeClass as N, normalizeStyle as O, createCommentVNode as B, createVNode as W, unref as m, withCtx as g, mergeProps as P, createBlock as $, nextTick as U } from "vue";
import "element-plus/es/components/input/style/css";
import { ElInput as j } from "element-plus";
import { DasAutoRegisterIcon as q, DasIcon as C } from "@das-fed/upf-ui/packages/components/icon/index";
import { DasTooltip as G } from "@das-fed/upf-ui/packages/components/tooltip/index";
import { calcTextWidth as H } from "@das-fed/upf-utils/common-tools";
const J = {
  inheritAttrs: !1
}, K = /* @__PURE__ */ R({
  ...J,
  __name: "Index",
  props: {
    modelValue: { default: "" },
    border: { type: Boolean, default: !1 },
    searchType: { default: "basis" },
    placeholder: { default: "" },
    size: { default: "middle" },
    disabled: { type: Boolean, default: !1 },
    clearable: { type: Boolean, default: !0 },
    prefixIcon: { default: "" },
    suffixIcon: { default: "" },
    isIconLeft: { type: Boolean, default: !1 },
    isTitle: { type: Boolean, default: !0 },
    isExpandAtFocus: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue", "change"],
  setup(e, { emit: p }) {
    const a = e, d = p;
    q({
      search: import("@das-fed/upf-ui/packages/icons/search"),
      empty: import("@das-fed/upf-ui/packages/icons/empty")
    });
    const v = u(null), f = u(null), o = b({
      get: () => a.modelValue,
      set: (t) => d("update:modelValue", t)
    }), n = u(!1), L = b(() => o.value ? o.value : a.placeholder), z = (t) => {
      let l = t + "";
      o.value = l, d("change", l);
    }, k = () => H(a.placeholder, 12);
    y(
      () => f.value,
      (t) => {
        setTimeout(() => {
          var s, V;
          const l = t;
          l && (i.value = ((s = l == null ? void 0 : l.ref) == null ? void 0 : s.offsetWidth) ?? 0, c.value = o.value ? (V = l == null ? void 0 : l.ref) == null ? void 0 : V.scrollWidth : k());
        }, 200);
      }
    );
    const i = u(0), c = u(0), E = () => {
      U(() => {
        var t, l, s;
        (t = f.value) != null && t.ref && (i.value = (l = f.value) == null ? void 0 : l.ref.offsetWidth, c.value = o.value ? (s = f.value) == null ? void 0 : s.ref.scrollWidth : k(), (i.value === c.value || c.value - i.value < 1) && (n.value = !1));
      });
    };
    y(() => [o.value, a.placeholder], E);
    const r = u(), A = () => {
      E(), i.value === c.value || c.value - i.value < 1 ? n.value = !1 : (n.value = !0, r.value && clearTimeout(r.value));
    }, F = () => {
      r.value = setTimeout(() => {
        n.value = !1;
      }, 200);
    };
    y(
      () => {
        var t;
        return (t = v.value) == null ? void 0 : t.$tooltipRef.popperRef.contentRef;
      },
      (t) => {
        t && (t.addEventListener("mouseenter", function() {
          n.value = !0, r.value && clearTimeout(r.value);
        }), t.addEventListener("mouseleave", function() {
          r.value = setTimeout(() => {
            n.value = !1;
          }, 200);
        }));
      }
    );
    const h = u(""), x = u(!1), I = b(() => a.isExpandAtFocus === !0), D = () => {
      !I.value || i.value > 400 || (h.value = "400px", x.value = !0);
    }, M = () => {
      I.value && (h.value = "", x.value = !1);
    };
    return (t, l) => (T(), w(
      "div",
      {
        class: N(`das-ui-search ${e.size}`),
        style: O({ width: I.value && x.value ? h.value : "" })
      },
      [
        B(" 这里tooltip不能使用v-model:visible 有响应问题 "),
        W(m(G), {
          ref_key: "inputTooltipRef",
          ref: v,
          effect: "light",
          placement: "top",
          manual: !0,
          visible: n.value,
          disabled: e.isExpandAtFocus || !e.isTitle,
          content: L.value
        }, {
          default: g(() => [
            W(m(j), P({
              ref_key: "$refInput",
              ref: f
            }, t.$attrs, {
              placeholder: e.placeholder,
              type: "text",
              class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
              modelValue: o.value,
              "onUpdate:modelValue": l[0] || (l[0] = (s) => o.value = s),
              disabled: e.disabled,
              onChange: z,
              clearable: a.clearable,
              onFocus: D,
              onBlur: M,
              onMouseenter: A,
              onMouseleave: F
            }), {
              prefix: g(() => [
                e.isIconLeft ? (T(), $(m(C), {
                  key: 0,
                  icon: e.prefixIcon ? e.prefixIcon : "search"
                }, null, 8, ["icon"])) : B("v-if", !0)
              ]),
              suffix: g(() => [
                e.isIconLeft ? B("v-if", !0) : (T(), $(m(C), {
                  key: 0,
                  icon: e.suffixIcon ? e.suffixIcon : "search",
                  style: { cursor: "pointer" }
                }, null, 8, ["icon"]))
              ]),
              _: 1
              /* STABLE */
            }, 16, ["placeholder", "class", "modelValue", "disabled", "clearable"])
          ]),
          _: 1
          /* STABLE */
        }, 8, ["visible", "disabled", "content"])
      ],
      6
      /* CLASS, STYLE */
    ));
  }
}), Q = (e, p) => {
  const a = e.__vccOpts || e;
  for (const [d, v] of p)
    a[d] = v;
  return a;
}, X = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-e7df88a6"]]), oe = S(X);
export {
  oe as DasSearch,
  oe as default
};
