import { w as withInstall } from "../badge/index2.js";
import { defineComponent, computed, ref, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, unref, toDisplayString } from "vue";
import { i as iconfont } from "../checkbox/index2.js";
import { _ as _sfc_main$1 } from "../dropdown/index2.js";
import { _ as _sfc_main$2 } from "../input/index2.js";
import { _ as _sfc_main$3 } from "../scroll/index2.js";
import "../_chunks/@vueuse/index.js";
import "../dropdownMenu/index2.js";
var index = /* @__PURE__ */ (() => ".layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}:root{--icon-picker-border-radius: var(--global-border-radius);--icon-picker-checked-color: var(--global-checked-color)}.layui-iconpicker{position:relative;height:38px;line-height:38px;border-width:1px;border-style:solid;border-radius:var(--icon-picker-border-radius);cursor:pointer}.layui-iconpicker .layui-inline{height:36px;line-height:36px;vertical-align:top}.layui-iconpicker-title{padding-left:5px}.layui-iconpicker-main{padding:0 10px}.layui-iconpicker-main .layui-icon{font-size:20px}.layui-iconpicker-main .layui-inline{vertical-align:top}.layui-iconpicker-split .layui-iconpicker-main{padding:0 15px;border-right-width:1px;border-right-style:solid}.layui-iconpicker-suffix{position:relative;width:35px;text-align:center}.layui-iconpicker-suffix .layui-icon{font-size:14px;color:#00000080;transition:all .3s}.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down{transform:rotate(180deg)}.layui-iconpicker-search{padding:10px;box-shadow:0 2px 8px #f0f1f2;border-bottom:1px solid whitesmoke}.layui-iconpicker-list{width:321px}.layui-iconpicker-list ul{margin:6px}.layui-iconpicker-list li{vertical-align:top;display:inline-block;width:60px;margin:2.5px;padding:5px;overflow:hidden;border:1px solid #eee;border-radius:2px;cursor:pointer;text-align:center}.layui-iconpicker-list li:hover{background-color:var(--global-neutral-color-1);color:#00000080}.layui-iconpicker-list li.layui-this{border-color:var(--icon-picker-checked-color);color:var(--icon-picker-checked-color)}.layui-iconpicker-list li .layui-icon{font-size:20px}.layui-iconpicker-list li .layui-elip{margin-top:2px;line-height:20px;font-size:12px}.layui-iconpicker-list .layui-none{margin:30px 0 35px}.layui-iconpicker-scroll .layui-iconpicker-list{max-height:200px}.layui-iconpicker-page{position:relative;padding:10px 10px 5px;border-top:1px solid #eee;text-align:right}.layui-iconpicker-page .layui-laypage{margin:0}.layui-iconpicker-page .layui-laypage a,.layui-iconpicker-page .layui-laypage span{padding:0 10px;color:#666}.layui-iconpicker-page .layui-laypage-count{position:absolute;left:10px}.layui-iconpicker-page .layui-laypage-curr .layui-laypage-em{background:0 0}.layui-iconpicker-page .layui-laypage-curr em{color:#666;color:#0009}.layui-iconpicker-page .layui-laypage-first,.layui-iconpicker-page .layui-laypage-last,.layui-iconpicker-page .layui-laypage-spr{display:none}.layui-colorpicker-disabled{opacity:.6}.layui-colorpicker-disabled,.layui-colorpicker-disabled *{cursor:not-allowed!important}\n")();
const _hoisted_1 = { class: "layui-inline layui-iconpicker-main" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "layui-inline layui-iconpicker-suffix" }, [
  /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-down layui-anim" })
], -1);
const _hoisted_3 = { class: "layui-iconpicker-view layui-iconpicker-scroll" };
const _hoisted_4 = {
  key: 0,
  class: "layui-iconpicker-search"
};
const _hoisted_5 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" }, null, -1);
const _hoisted_6 = { class: "layui-iconpicker-list" };
const _hoisted_7 = ["onClick"];
const _hoisted_8 = { class: "layui-elip" };
const _hoisted_9 = {
  key: 1,
  class: "layui-iconpicker-page"
};
const _hoisted_10 = {
  id: "layui-laypage-1",
  class: "layui-laypage layui-laypage-default"
};
const _hoisted_11 = { class: "layui-laypage-count" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-left" }, null, -1);
const _hoisted_13 = [
  _hoisted_12
];
const _hoisted_14 = { class: "layui-laypage-curr" };
const _hoisted_15 = /* @__PURE__ */ createElementVNode("em", { class: "layui-laypage-em" }, null, -1);
const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", { class: "layui-laypage-spr" }, "\u2026", -1);
const _hoisted_17 = /* @__PURE__ */ createElementVNode("a", {
  href: "javascript:;",
  class: "layui-laypage-last",
  title: "\u5C3E\u9875"
}, "14", -1);
const _hoisted_18 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-right" }, null, -1);
const _hoisted_19 = [
  _hoisted_18
];
const __default__ = {
  name: "LayIconPicker"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    page: { type: Boolean, default: false },
    modelValue: { default: "layui-icon-face-smile" },
    disabled: { type: Boolean, default: false },
    showSearch: { type: Boolean },
    contentClass: null,
    contentStyle: null
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit }) {
    const props = __props;
    const selectedIcon = computed(() => props.modelValue);
    const dropdownRef = ref(null);
    const selectIcon = function(icon) {
      var _a;
      emit("update:modelValue", icon);
      emit("change", icon);
      (_a = dropdownRef.value) == null ? void 0 : _a.hide();
    };
    const icones = ref([]);
    const total = ref(iconfont.length);
    const totalPage = ref(total.value / 12);
    const currentPage = ref(1);
    if (props.page) {
      icones.value = iconfont.slice(0, 12);
    } else {
      icones.value = iconfont;
    }
    const next = () => {
      if (currentPage.value === totalPage.value) {
        return;
      }
      currentPage.value = currentPage.value + 1;
      const start = (currentPage.value - 1) * 12;
      const end = start + 12;
      icones.value = iconfont.slice(start, end);
    };
    const prev = () => {
      if (currentPage.value === 1) {
        return;
      }
      currentPage.value = currentPage.value - 1;
      const start = (currentPage.value - 1) * 12;
      const end = start + 12;
      icones.value = iconfont.slice(start, end);
    };
    const clear = () => {
      const start = (currentPage.value - 1) * 12;
      const end = start + 12;
      if (props.page) {
        icones.value = iconfont.slice(start, end);
        total.value = iconfont.length;
        totalPage.value = Math.ceil(iconfont.length / 12);
      } else {
        icones.value = iconfont;
      }
    };
    const search = (e) => {
      currentPage.value = 1;
      const start = (currentPage.value - 1) * 12;
      const end = start + 12;
      const text = e;
      if (text) {
        if (props.page) {
          icones.value = searchList(text, iconfont).slice(start, end);
          total.value = searchList(text, iconfont).length;
          totalPage.value = Math.ceil(searchList(text, iconfont).length / 12);
        } else {
          icones.value = searchList(text, iconfont);
        }
      } else {
        if (props.page) {
          icones.value = iconfont.slice(start, end);
          total.value = iconfont.length;
          totalPage.value = Math.ceil(iconfont.length / 12);
        } else {
          icones.value = iconfont;
        }
      }
    };
    const searchList = (str, container) => {
      var newList = [];
      var startChar = str.charAt(0);
      var strLen = str.length;
      for (var i = 0; i < container.length; i++) {
        var obj = container[i];
        var isMatch = false;
        for (var p in obj) {
          if (typeof obj[p] == "function") {
            obj[p]();
          } else {
            var curItem = "";
            if (obj[p] != null) {
              curItem = obj[p];
            }
            for (var j = 0; j < curItem.length; j++) {
              if (curItem.charAt(j) == startChar) {
                if (curItem.substring(j).substring(0, strLen) == str) {
                  isMatch = true;
                  break;
                }
              }
            }
          }
        }
        if (isMatch) {
          newList.push(obj);
        }
      }
      return newList;
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$1, {
        ref_key: "dropdownRef",
        ref: dropdownRef,
        disabled: __props.disabled,
        contentClass: __props.contentClass,
        contentStyle: __props.contentStyle,
        updateAtScroll: ""
      }, {
        content: withCtx(() => [
          createElementVNode("div", _hoisted_3, [
            __props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_4, [
              createVNode(_sfc_main$2, {
                onInput: search,
                onClear: clear,
                autocomplete: "true",
                "allow-clear": true
              }, {
                prefix: withCtx(() => [
                  _hoisted_5
                ]),
                _: 1
              })
            ])) : createCommentVNode("", true),
            createElementVNode("div", _hoisted_6, [
              createVNode(_sfc_main$3, {
                style: { "height": "200px" },
                thumbColor: "rgb(238, 238, 238)"
              }, {
                default: withCtx(() => [
                  createElementVNode("ul", null, [
                    (openBlock(true), createElementBlock(Fragment, null, renderList(icones.value, (icon) => {
                      return openBlock(), createElementBlock("li", {
                        key: icon,
                        class: normalizeClass([unref(selectedIcon) === icon.class ? "layui-this" : ""]),
                        onClick: ($event) => selectIcon(icon.class)
                      }, [
                        createElementVNode("i", {
                          class: normalizeClass(["layui-icon", [icon.class]])
                        }, null, 2),
                        createElementVNode("p", _hoisted_8, toDisplayString(icon.name), 1)
                      ], 10, _hoisted_7);
                    }), 128))
                  ])
                ]),
                _: 1
              })
            ]),
            __props.page ? (openBlock(), createElementBlock("div", _hoisted_9, [
              createElementVNode("div", _hoisted_10, [
                createElementVNode("span", _hoisted_11, "\u5171 " + toDisplayString(total.value) + " \u4E2A", 1),
                createElementVNode("a", {
                  href: "javascript:;",
                  class: normalizeClass(["layui-laypage-prev", [currentPage.value === 1 ? "layui-disabled" : ""]]),
                  onClick: _cache[0] || (_cache[0] = ($event) => prev())
                }, _hoisted_13, 2),
                createElementVNode("span", _hoisted_14, [
                  _hoisted_15,
                  createElementVNode("em", null, toDisplayString(currentPage.value) + " / " + toDisplayString(totalPage.value), 1)
                ]),
                _hoisted_16,
                _hoisted_17,
                createElementVNode("a", {
                  href: "javascript:;",
                  class: normalizeClass([[currentPage.value === totalPage.value ? "layui-disabled" : ""], "layui-laypage-next"]),
                  onClick: _cache[1] || (_cache[1] = ($event) => next())
                }, _hoisted_19, 2)
              ])
            ])) : createCommentVNode("", true)
          ])
        ]),
        default: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass(["layui-inline layui-border-box layui-iconpicker layui-iconpicker-split", [{ "layui-colorpicker-disabled": __props.disabled }]])
          }, [
            createElementVNode("div", _hoisted_1, [
              createElementVNode("i", {
                class: normalizeClass(["layui-inline layui-icon", [unref(selectedIcon)]])
              }, null, 2)
            ]),
            _hoisted_2
          ], 2)
        ]),
        _: 1
      }, 8, ["disabled", "contentClass", "contentStyle"]);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };