import '@das-fed/ui/packages/business-components/area-phone-select/style.css';
import { defineComponent as $, ref as s, computed as c, onMounted as N, createBlock as U, openBlock as d, unref as p, mergeProps as W, withCtx as _, createElementVNode as y, createElementBlock as h, createCommentVNode as R, createVNode as C, withDirectives as z, Fragment as L, renderList as x, normalizeClass as B, createTextVNode as M, toDisplayString as A, renderSlot as j, nextTick as q, onBeforeUnmount as G, normalizeStyle as H } from "vue";
import { withInstall as E } from "@das-fed/utils/with-install/index";
import { t as J, setI18nRule as K } from "@das-fed/web/packages/i18n/index";
import { DasPopoverRef as Q, DasPopover as X } from "@das-fed/ui/packages/components/popover/index";
import { DasScrollbar as Y } from "@das-fed/ui/packages/components/scrollbar/index";
import { DasSearch as Z } from "@das-fed/ui/packages/components/search/index";
import { DasIconFold as ee } from "@das-fed/ui/packages/icons/fold/index";
import { DasEmpty as oe } from "@das-fed/ui/packages/components/empty/index";
import { vDasTooltip as te } from "@das-fed/ui/packages/components/text-tooltip/index";
import { vDasLoading as ae } from "@das-fed/ui/packages/components/loading/index";
import { createService as se } from "@das-fed/utils/api-services";
import { DasInput as le } from "@das-fed/ui/packages/components/input/index";
import { SizeWatcher as ne } from "@das-fed/utils/size-watcher";
const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/.test(t), O = (t) => typeof t == "string" && re(t) ? t : t + "px", ie = se("/api/tool/v2"), de = ie.get("/dictionary/phone-codes"), ue = { class: "label" }, pe = { class: "das-ui-area-phone-popover-content" }, ce = {
  key: 0,
  class: "search-box"
}, ve = { class: "list" }, me = ["onClick"], fe = { class: "item-label" }, he = { class: "item-code" }, be = {
  name: "area-popover"
}, we = /* @__PURE__ */ $({
  ...be,
  props: {
    modelValue: {},
    label: { default: "phoneCode" },
    width: {},
    visible: { type: Boolean, default: !1 },
    isView: { type: Boolean },
    disabled: { type: Boolean },
    showArrow: { type: Boolean, default: !1 },
    filter: { type: Boolean, default: !0 }
  },
  emits: ["update:modelValue", "update:visible", "change"],
  setup(t, { expose: b, emit: r }) {
    const a = t, v = r, V = Q(), m = s(""), g = s(J("area-phone-placeholder")), P = c(() => a.width ? O(a.width) : "240px"), D = s({
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, 4]
          }
        }
      ]
    }), f = c({
      get: () => a.visible,
      set: (o) => {
        v("update:visible", o);
      }
    }), u = c({
      get: () => a.modelValue ?? {
        name: "中国",
        code: "CN",
        phoneCode: "+86"
      },
      set: (o) => {
        v("update:modelValue", o);
      }
    }), k = c(() => u.value[a.label]), S = (o) => {
      u.value = o, f.value = !1, v("change", o);
    }, I = c(() => a.filter ? e.value.filter((o) => o.name.includes(m.value)) : e.value), e = s([]), l = s(!1);
    return N(async () => {
      l.value = !0;
      const [o, i] = await de().run();
      l.value = !1, !o && (e.value = i || []);
    }), b({ popoverRef: V }), (o, i) => (d(), U(p(X), W({
      ref_key: "popoverRef",
      ref: V,
      "show-arrow": o.showArrow,
      "popper-options": D.value,
      trigger: "click",
      width: P.value,
      popperClass: "das-ui-area-phone-popover",
      visible: f.value,
      "onUpdate:visible": i[1] || (i[1] = (n) => f.value = n),
      disabled: o.isView || o.disabled
    }, o.$attrs, {
      onBeforeLeave: i[2] || (i[2] = (n) => m.value = "")
    }), {
      reference: _(() => [
        j(o.$slots, "reference", {}, () => [
          y(
            "div",
            {
              class: B(["das-ui-area-phone-popover-reference", o.disabled ? "is-disabled" : ""])
            },
            [
              y(
                "div",
                ue,
                A(k.value),
                1
                /* TEXT */
              ),
              y(
                "div",
                {
                  class: B({ "icon-box": !0, show: f.value, hide: o.isView || o.disabled })
                },
                [
                  C(p(ee), { size: "medium" })
                ],
                2
                /* CLASS */
              )
            ],
            2
            /* CLASS */
          )
        ], !0)
      ]),
      default: _(() => [
        y("div", pe, [
          o.filter ? (d(), h("div", ce, [
            C(p(Z), {
              isIconLeft: "",
              size: "custom",
              placeholder: g.value,
              border: "",
              width: "100%",
              modelValue: m.value,
              "onUpdate:modelValue": i[0] || (i[0] = (n) => m.value = n)
            }, null, 8, ["placeholder", "modelValue"])
          ])) : R("v-if", !0),
          C(p(Y), null, {
            default: _(() => [
              z((d(), h("div", ve, [
                l.value ? R("v-if", !0) : (d(), h(
                  L,
                  { key: 0 },
                  [
                    (d(!0), h(
                      L,
                      null,
                      x(I.value, (n) => (d(), h("div", {
                        class: B(["item", {
                          selected: u.value && u.value.name + u.value.phoneCode == n.name + n.phoneCode
                        }]),
                        onClick: (Ce) => S(n)
                      }, [
                        z((d(), h("div", fe, [
                          M(
                            A(n.name ?? ""),
                            1
                            /* TEXT */
                          )
                        ])), [
                          [p(te)]
                        ]),
                        y(
                          "div",
                          he,
                          A(n.phoneCode ?? ""),
                          1
                          /* TEXT */
                        )
                      ], 10, me))),
                      256
                      /* UNKEYED_FRAGMENT */
                    )),
                    I.value.length ? R("v-if", !0) : (d(), U(p(oe), { key: 0 }))
                  ],
                  64
                  /* STABLE_FRAGMENT */
                ))
              ])), [
                [p(ae), l.value]
              ])
            ]),
            _: 1
            /* STABLE */
          })
        ])
      ]),
      _: 3
      /* FORWARDED */
    }, 16, ["show-arrow", "popper-options", "width", "visible", "disabled"]));
  }
}), T = (t, b) => {
  const r = t.__vccOpts || t;
  for (const [a, v] of b)
    r[a] = v;
  return r;
}, F = /* @__PURE__ */ T(we, [["__scopeId", "data-v-762f72de"]]), Ve = /* @__PURE__ */ $({
  __name: "index",
  props: {
    modelValue: { default: "" },
    areaItem: {},
    width: {},
    isView: { type: Boolean },
    disabled: { type: Boolean }
  },
  emits: ["update:modelValue", "update:areaItem", "change", "area-change"],
  setup(t, { emit: b }) {
    const r = t, a = b, v = c(() => r.width ? O(r.width) : "100%"), V = c({
      get: () => r.modelValue,
      set: (e) => a("update:modelValue", e)
    }), m = c({
      get: () => r.areaItem ?? {},
      set: (e) => {
        a("update:areaItem", e);
      }
    }), g = s(null), P = s(null), D = s(null), f = s(240), u = s(!1), k = () => {
      f.value = g.value.clientWidth ?? 0;
    };
    N(() => {
      q(() => {
        k(), D.value = ne(() => {
          k();
        }, g.value);
      });
    }), G(() => {
      var e;
      (e = D.value) == null || e.disconnect();
    });
    const S = (e) => {
      a("area-change", e);
    }, I = (e) => {
      a("change", e);
    };
    return (e, l) => (d(), h(
      "div",
      {
        ref_key: "phoneRef",
        ref: g,
        class: B(["das-ui-area-phone-select", { "is-disabled": e.disabled && !e.isView, "is-view": e.isView }]),
        style: H({ width: v.value })
      },
      [
        C(p(le), W({
          ref_key: "inputRef",
          ref: P,
          width: "100%",
          disabled: e.disabled,
          isView: e.isView,
          modelValue: V.value,
          "onUpdate:modelValue": l[2] || (l[2] = (w) => V.value = w),
          onChange: I
        }, e.$attrs), {
          prepend: _(() => [
            C(F, {
              visible: u.value,
              "onUpdate:visible": l[0] || (l[0] = (w) => u.value = w),
              isView: e.isView,
              disabled: e.disabled,
              modelValue: m.value,
              "onUpdate:modelValue": l[1] || (l[1] = (w) => m.value = w),
              width: f.value,
              onChange: S
            }, null, 8, ["visible", "isView", "disabled", "modelValue", "width"])
          ]),
          _: 1
          /* STABLE */
        }, 16, ["disabled", "isView", "modelValue"])
      ],
      6
      /* CLASS, STYLE */
    ));
  }
}), ge = /* @__PURE__ */ T(Ve, [["__scopeId", "data-v-3b9ba6be"]]), ye = {
  "area-phone-placeholder": { "zh-CN": "请输入所在国家或区域中文名称", en: "Please enter your country or region" }
};
K(ye);
const Ne = () => s(null), We = () => s(null), Ee = E(ge), Oe = E(F), Te = { name: "区号选择手机号输入框" };
export {
  Ee as DasAreaPhoneSelect,
  Ne as DasAreaPhoneSelectRef,
  Oe as DasAreaPopover,
  We as DasAreaPopoverRef,
  Te as default
};
