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