import { defineComponent, ref, computed, watch, watchEffect, resolveComponent, createBlock, openBlock, normalizeClass, unref, withCtx, createElementVNode, createVNode, createElementBlock, Fragment, renderList } from 'vue';
import '../../../../utils/index.mjs';
import '../config/index.mjs';
import '../../../../hooks/index.mjs';
import { useScroll } from '../../../../hooks/use-scroll/index.mjs';
import { createNamespace } from '../../../../utils/create-namespace.mjs';
import { iconPickerModalEmits, iconPickerModalProps } from '../config/modal.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "LlIconPickerModal"
  },
  __name: "modal",
  props: iconPickerModalProps,
  emits: iconPickerModalEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { scrollPosition, isHasScrollBar, scrollRef } = useScroll();
    const searchIconValue = ref("");
    const selectIcon = ref("");
    const iconList = ref([]);
    const bem = createNamespace("icon-picker-modal");
    const isShowContentBottomBox = computed(() => {
      return isHasScrollBar.value && scrollPosition.value !== "bottom";
    });
    const handleOk = () => {
      emits("changeIconValue", selectIcon.value);
      emits("update:open", false);
    };
    const handleCancel = () => emits("update:open", false);
    const handleSelectIcon = (icon) => selectIcon.value = icon?.font_class;
    watch(
      () => props.open,
      (newVisible) => {
        if (newVisible) searchIconValue.value = "";
        if (newVisible) {
          selectIcon.value = props.value;
        }
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.data,
      (newData) => {
        iconList.value = [...newData];
      },
      {
        immediate: true
      }
    );
    watch(searchIconValue, () => {
      iconList.value = props.data.filter(
        (ele) => ~ele.font_class.indexOf(searchIconValue.value)
      );
    });
    watchEffect(() => {
      if (props.open) {
        if (isHasScrollBar && scrollRef.value && !scrollRef.value.scrollTop) {
          scrollRef.value.scrollTop = 0;
          scrollPosition.value = "top";
        }
      }
    });
    return (_ctx, _cache) => {
      const _component_ll_icon = resolveComponent("ll-icon");
      const _component_ll_input = resolveComponent("ll-input");
      const _component_a_form_item = resolveComponent("a-form-item");
      const _component_a_button = resolveComponent("a-button");
      const _component_a_space = resolveComponent("a-space");
      const _component_ll_new_modal = resolveComponent("ll-new-modal");
      return openBlock(), createBlock(_component_ll_new_modal, {
        open: _ctx.open,
        title: "\u56FE\u6807\u9009\u62E9",
        class: normalizeClass(`icon-picker-modal-wrapper ${unref(bem).b()}`),
        width: "766px",
        keyboard: false,
        "mask-closable": false,
        "is-show-footer-shadow": isShowContentBottomBox.value,
        "footer-shadow-placement": "outer",
        onOk: handleOk,
        onCancel: handleCancel
      }, {
        default: withCtx(() => [
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).e("modal-content"))
            },
            [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).e("input-container"))
                },
                [
                  createVNode(_component_a_form_item, { name: "h" }, {
                    default: withCtx(() => [
                      createVNode(_component_ll_input, {
                        value: searchIconValue.value,
                        "onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchIconValue.value = $event),
                        class: normalizeClass(unref(bem).e("input")),
                        placeholder: "\u641C\u7D22..."
                      }, {
                        prefix: withCtx(() => [
                          createVNode(_component_ll_icon, { "icon-name": "icon-search" })
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["value", "class"])
                    ]),
                    _: 1
                    /* STABLE */
                  })
                ],
                2
                /* CLASS */
              ),
              createElementVNode(
                "div",
                {
                  ref_key: "scrollRef",
                  ref: scrollRef,
                  class: normalizeClass(unref(bem).e("list"))
                },
                [
                  createVNode(_component_a_space, {
                    size: [16, 16],
                    wrap: "",
                    class: normalizeClass(unref(bem).e("space"))
                  }, {
                    default: withCtx(() => [
                      (openBlock(true), createElementBlock(
                        Fragment,
                        null,
                        renderList(iconList.value, (item) => {
                          return openBlock(), createBlock(_component_a_button, {
                            key: item.icon_id,
                            type: "default",
                            class: normalizeClass([
                              unref(bem).e("button"),
                              selectIcon.value === item.font_class ? unref(bem).is("active") : ""
                            ]),
                            onClick: ($event) => handleSelectIcon(item)
                          }, {
                            icon: withCtx(() => [
                              createVNode(_component_ll_icon, {
                                "icon-name": "icon-" + item.font_class,
                                style: { "font-size": "28px" }
                              }, null, 8, ["icon-name"])
                            ]),
                            _: 2
                            /* DYNAMIC */
                          }, 1032, ["class", "onClick"]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["class"])
                ],
                2
                /* CLASS */
              )
            ],
            2
            /* CLASS */
          )
        ]),
        _: 1
        /* STABLE */
      }, 8, ["open", "class", "is-show-footer-shadow"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=modal.vue2.mjs.map
