'use strict';

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

var vue = require('vue');
require('../../../../utils/index.js');
require('../config/index.js');
require('../../../../hooks/index.js');
var index = require('../../../../hooks/use-scroll/index.js');
var createNamespace = require('../../../../utils/create-namespace.js');
var modal = require('../config/modal.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "LlIconPickerModal"
  },
  __name: "modal",
  props: modal.iconPickerModalProps,
  emits: modal.iconPickerModalEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { scrollPosition, isHasScrollBar, scrollRef } = index.useScroll();
    const searchIconValue = vue.ref("");
    const selectIcon = vue.ref("");
    const iconList = vue.ref([]);
    const bem = createNamespace.createNamespace("icon-picker-modal");
    const isShowContentBottomBox = vue.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;
    vue.watch(
      () => props.open,
      (newVisible) => {
        if (newVisible) searchIconValue.value = "";
        if (newVisible) {
          selectIcon.value = props.value;
        }
      },
      {
        immediate: true
      }
    );
    vue.watch(
      () => props.data,
      (newData) => {
        iconList.value = [...newData];
      },
      {
        immediate: true
      }
    );
    vue.watch(searchIconValue, () => {
      iconList.value = props.data.filter(
        (ele) => ~ele.font_class.indexOf(searchIconValue.value)
      );
    });
    vue.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 = vue.resolveComponent("ll-icon");
      const _component_ll_input = vue.resolveComponent("ll-input");
      const _component_a_form_item = vue.resolveComponent("a-form-item");
      const _component_a_button = vue.resolveComponent("a-button");
      const _component_a_space = vue.resolveComponent("a-space");
      const _component_ll_new_modal = vue.resolveComponent("ll-new-modal");
      return vue.openBlock(), vue.createBlock(_component_ll_new_modal, {
        open: _ctx.open,
        title: "\u56FE\u6807\u9009\u62E9",
        class: vue.normalizeClass(`icon-picker-modal-wrapper ${vue.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: vue.withCtx(() => [
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(vue.unref(bem).e("modal-content"))
            },
            [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).e("input-container"))
                },
                [
                  vue.createVNode(_component_a_form_item, { name: "h" }, {
                    default: vue.withCtx(() => [
                      vue.createVNode(_component_ll_input, {
                        value: searchIconValue.value,
                        "onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchIconValue.value = $event),
                        class: vue.normalizeClass(vue.unref(bem).e("input")),
                        placeholder: "\u641C\u7D22..."
                      }, {
                        prefix: vue.withCtx(() => [
                          vue.createVNode(_component_ll_icon, { "icon-name": "icon-search" })
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["value", "class"])
                    ]),
                    _: 1
                    /* STABLE */
                  })
                ],
                2
                /* CLASS */
              ),
              vue.createElementVNode(
                "div",
                {
                  ref_key: "scrollRef",
                  ref: scrollRef,
                  class: vue.normalizeClass(vue.unref(bem).e("list"))
                },
                [
                  vue.createVNode(_component_a_space, {
                    size: [16, 16],
                    wrap: "",
                    class: vue.normalizeClass(vue.unref(bem).e("space"))
                  }, {
                    default: vue.withCtx(() => [
                      (vue.openBlock(true), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(iconList.value, (item) => {
                          return vue.openBlock(), vue.createBlock(_component_a_button, {
                            key: item.icon_id,
                            type: "default",
                            class: vue.normalizeClass([
                              vue.unref(bem).e("button"),
                              selectIcon.value === item.font_class ? vue.unref(bem).is("active") : ""
                            ]),
                            onClick: ($event) => handleSelectIcon(item)
                          }, {
                            icon: vue.withCtx(() => [
                              vue.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"]);
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=modal.vue2.js.map
