import { defineComponent, useModel, ref, openBlock, createElementBlock, createVNode, unref, mergeProps, withCtx, createTextVNode, toDisplayString, withKeys, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, renderSlot, mergeModels } from 'vue';
import { ElInput, ElDropdown, ElButton, ElDropdownMenu, ElScrollbar, ElDropdownItem } from 'element-plus';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const _hoisted_1 = {
  key: 0,
  style: { "padding": "0 5px 5px 5px" }
};
const __default__ = defineComponent({
  name: "me-input-select"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: /* @__PURE__ */ mergeModels({
    options: { type: Array, required: true },
    selectLabel: { type: String, required: false, default: "\u8BF7\u9009\u62E9" },
    search: { type: Boolean, required: false, default: false }
  }, {
    "modelValue": { type: [String, Number] },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["searchEmit", "clickOutSideEmit"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const model = useModel(__props, "modelValue");
    const isEdit = ref(false);
    const searchValue = ref("");
    const divRef = ref();
    const handleClick = () => {
      const onClick = (e) => {
        const clickInner = divRef.value?.contains(e.target);
      };
      window.addEventListener("click", onClick);
    };
    const handleSearch = () => {
      emit("searchEmit", searchValue.value);
    };
    const handleInputBlur = () => {
      isEdit.value = false;
      emit("clickOutSideEmit", isEdit.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: "me-input-select",
          ref_key: "divRef",
          ref: divRef,
          onClick: handleClick
        },
        [
          createVNode(unref(ElInput), mergeProps({
            modelValue: model.value,
            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
            style: { "max-width": "600px" },
            placeholder: "Please input",
            class: "input-with-select",
            onBlur: handleInputBlur
          }, _ctx.$attrs), {
            append: withCtx(() => [
              createVNode(
                unref(ElDropdown),
                mergeProps({
                  style: { "width": "80px" },
                  class: "flex-center",
                  "max-height": "400",
                  trigger: "click"
                }, _ctx.$attrs),
                {
                  dropdown: withCtx(() => [
                    createVNode(unref(ElDropdownMenu), { style: { "width": "100%" } }, {
                      default: withCtx(() => [
                        __props.search ? (openBlock(), createElementBlock("div", _hoisted_1, [
                          createVNode(unref(ElInput), {
                            modelValue: searchValue.value,
                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
                            onKeyup: withKeys(handleSearch, ["enter"]),
                            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22",
                            maxlength: "15"
                          }, {
                            append: withCtx(() => [
                              createElementVNode("span", {
                                style: { "cursor": "pointer" },
                                onClick: handleSearch
                              }, [
                                createVNode(unref(MeSvgIcon), { name: "ri-search-line" })
                              ])
                            ]),
                            _: 1
                            /* STABLE */
                          }, 8, ["modelValue"])
                        ])) : createCommentVNode("v-if", true),
                        createVNode(unref(ElScrollbar), {
                          height: "260px",
                          style: { "overflow-y": "auto" }
                        }, {
                          default: withCtx(() => [
                            (openBlock(true), createElementBlock(
                              Fragment,
                              null,
                              renderList(props.options, (item, index) => {
                                return openBlock(), createBlock(unref(ElDropdownItem), { command: item }, {
                                  default: withCtx(() => [
                                    renderSlot(_ctx.$slots, "item", {
                                      data: item,
                                      index
                                    }, () => [
                                      createTextVNode(
                                        toDisplayString(item?.label),
                                        1
                                        /* TEXT */
                                      )
                                    ])
                                  ]),
                                  _: 2
                                  /* DYNAMIC */
                                }, 1032, ["command"]);
                              }),
                              256
                              /* UNKEYED_FRAGMENT */
                            ))
                          ]),
                          _: 3
                          /* FORWARDED */
                        })
                      ]),
                      _: 3
                      /* FORWARDED */
                    })
                  ]),
                  default: withCtx(() => [
                    createVNode(unref(ElButton), {
                      type: "primary",
                      onClick: _cache[0] || (_cache[0] = () => {
                      })
                    }, {
                      default: withCtx(() => [
                        createTextVNode(
                          toDisplayString(props.selectLabel),
                          1
                          /* TEXT */
                        )
                      ]),
                      _: 1
                      /* STABLE */
                    })
                  ]),
                  _: 3
                  /* FORWARDED */
                },
                16
                /* FULL_PROPS */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["modelValue"])
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});

export { script as default };
//# sourceMappingURL=input-select.vue2.mjs.map
