'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var remixiconSymbol = require('remixicon/fonts/remixicon.symbol.svg');
var elementPlus = require('element-plus');
var index$1 = require('../../button/index.js');
var index = require('../../svg-icon/index.js');

"use strict";
const _hoisted_1 = { class: "me-icon-selector" };
const _hoisted_2 = { style: { "display": "flex", "align-items": "center" } };
const _hoisted_3 = { class: "me-icon-selector__list" };
const _hoisted_4 = ["onClick"];
const __default__ = vue.defineComponent({
  name: "me-icon-selector"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    "modelValue": { type: String, ...{ default: "" } },
    "modelModifiers": {}
  },
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const xhr = new XMLHttpRequest();
    xhr.open("GET", remixiconSymbol, false);
    xhr.send();
    var parser = new DOMParser();
    var doc = parser.parseFromString(xhr.responseText, "text/html");
    const els = doc.querySelectorAll('[id^="ri-"]');
    const riList = Array.from(els).map((item) => item.getAttribute("id"));
    const prefix = vue.ref("ri");
    const popoverRef = vue.ref();
    const model = vue.useModel(__props, "modelValue");
    const tabs = {
      ri: {
        label: "\u9884\u8BBE\u56FE\u6807",
        data: riList
      }
    };
    const searchValue = vue.ref("");
    const queryData = vue.ref({
      pageIndex: 1,
      pageSize: 30
    });
    const curData = vue.computed(() => {
      return tabs[prefix.value].data.filter((val) => val.indexOf(searchValue.value) !== -1);
    });
    const dataSource = vue.computed(() => {
      const { pageIndex, pageSize } = queryData.value;
      return curData.value.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
    });
    const clickIcon = (icon) => {
      model.value = icon;
      popoverRef.value.hide();
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(vue.unref(elementPlus.ElInput), {
          modelValue: model.value,
          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => model.value = $event),
          clearable: "",
          placeholder: "\u9009\u62E9\u56FE\u6807"
        }, {
          prepend: vue.withCtx(() => [
            vue.createVNode(vue.unref(index.MeSvgIcon), { name: model.value }, null, 8, ["name"])
          ]),
          append: vue.withCtx(() => [
            vue.createVNode(
              vue.unref(elementPlus.ElPopover),
              {
                ref_key: "popoverRef",
                ref: popoverRef,
                "hide-after": 0,
                "popper-class": "icon-selector-popper",
                trigger: "click",
                width: 280
              },
              {
                reference: vue.withCtx(() => [
                  vue.renderSlot(_ctx.$slots, "default", {}, () => [
                    vue.createVNode(vue.unref(index$1.MeButton), null, {
                      default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
                        vue.createTextVNode(
                          " \u9009\u62E9 ",
                          -1
                          /* CACHED */
                        )
                      ])]),
                      _: 1
                      /* STABLE */
                    })
                  ])
                ]),
                default: vue.withCtx(() => [
                  vue.createElementVNode("div", _hoisted_2, [
                    vue.createVNode(vue.unref(elementPlus.ElInput), {
                      modelValue: searchValue.value,
                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
                      clearable: "",
                      placeholder: "\u641C\u7D22\u56FE\u6807"
                    }, null, 8, ["modelValue"])
                  ]),
                  vue.createVNode(vue.unref(elementPlus.ElTabs), {
                    modelValue: prefix.value,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => prefix.value = $event),
                    class: "demo-tabs"
                  }, {
                    default: vue.withCtx(() => [
                      (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(tabs, (item, key) => {
                          return vue.createVNode(vue.unref(elementPlus.ElTabPane), {
                            key,
                            label: item.label,
                            name: key
                          }, null, 8, ["label", "name"]);
                        }),
                        64
                        /* STABLE_FRAGMENT */
                      ))
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue"]),
                  vue.createElementVNode("div", _hoisted_3, [
                    (vue.openBlock(true), vue.createElementBlock(
                      vue.Fragment,
                      null,
                      vue.renderList(dataSource.value, (item, index$1) => {
                        return vue.openBlock(), vue.createElementBlock("div", {
                          key: index$1,
                          class: "icon-item flex-center",
                          onClick: ($event) => clickIcon(item)
                        }, [
                          vue.createVNode(vue.unref(index.MeSvgIcon), { name: item }, null, 8, ["name"])
                        ], 8, _hoisted_4);
                      }),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ]),
                  prefix.value === "ri" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), {
                    key: 0,
                    href: "https://www.remixicon.cn/",
                    target: "_blank",
                    type: "primary"
                  }, {
                    default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
                      vue.createTextVNode(
                        "https://www.remixicon.cn",
                        -1
                        /* CACHED */
                      )
                    ])]),
                    _: 1
                    /* STABLE */
                  })) : vue.createCommentVNode("v-if", true),
                  vue.createVNode(vue.unref(elementPlus.ElPagination), {
                    background: "",
                    "current-page": queryData.value.pageIndex,
                    layout: "total, prev, next",
                    "page-size": queryData.value.pageSize,
                    total: tabs[prefix.value].data.length,
                    onCurrentChange: _cache[2] || (_cache[2] = (val) => queryData.value.pageIndex = val)
                  }, null, 8, ["current-page", "page-size", "total"])
                ]),
                _: 3
                /* FORWARDED */
              },
              512
              /* NEED_PATCH */
            )
          ]),
          _: 3
          /* FORWARDED */
        }, 8, ["modelValue"])
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=icon-selector.vue2.js.map
