import { defineComponent, inject, useModel, provide, ref, computed, nextTick, resolveComponent, createElementBlock, openBlock, withDirectives, createVNode, withCtx, createElementVNode, normalizeClass, normalizeStyle, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, unref, createTextVNode, toDisplayString, vShow, mergeModels } from 'vue';
import { useElementSize } from '@vueuse/core';
import { TableCtxKey } from '../../../../constants/table.mjs';
import { Search, Refresh, ArrowDown } from '@element-plus/icons-vue';
import { searchFormItemList, searchFormEmits, searchFormProps } from './searchForm.mjs';
import { queryParamsKey, searchFormHandleQueryKey } from './constants.mjs';

const itemGap = 8;
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmSearchForm"
  },
  __name: "SearchForm",
  props: /* @__PURE__ */ mergeModels(searchFormProps, {
    "showSearch": { type: Boolean, ...{ default: true } },
    "showSearchModifiers": {},
    "queryParams": { required: true },
    "queryParamsModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(searchFormEmits, ["update:showSearch", "update:queryParams"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const tableCtx = inject(TableCtxKey, {});
    const showSearch = useModel(__props, "showSearch");
    const queryParams = useModel(__props, "queryParams");
    provide(queryParamsKey, queryParams);
    const props = __props;
    const emit = __emit;
    const queryDivRef = ref();
    const visibilityMarkRef = ref();
    const { width: queryDivWidth, height: queryDivHeight } = useElementSize(queryDivRef);
    const colsCount = computed(() => Math.floor(queryDivWidth.value / 269));
    const showMore = ref(props.defaultShowMore);
    const notShowShowMore = computed(() => showMore.value === true && queryDivHeight.value <= 70);
    const searchButtonItemStyle = computed(() => {
      if (notShowShowMore.value) {
        return {};
      }
      return {
        gridColumn: colsCount.value,
        gridRow: showMore.value ? void 0 : 1
      };
    });
    const handleShowMoreChange = async () => {
      showMore.value = !showMore.value;
      const scrollEvent = new Event("resize");
      await nextTick();
      window.dispatchEvent(scrollEvent);
    };
    const optionsList = computed(() => {
      return props.options.map((it) => {
        const findComponent = searchFormItemList.find((item) => item.type === it.type);
        if (findComponent) {
          it.component = findComponent.component;
        }
        return it;
      });
    });
    const queryRef = ref();
    tableCtx.queryRef = queryRef;
    const handleQuery = (...args) => {
      emit("handleQuery", ...args);
      tableCtx?.tableRef?.value?.scrollTo({ top: 0, behavior: "smooth" });
      tableCtx.tableV2Ref?.value?.scrollTo({ scrollLeft: 0, scrollTop: 0 });
    };
    provide(searchFormHandleQueryKey, handleQuery);
    const resetQuery = () => {
      queryRef.value?.resetFields();
      emit("resetQuery");
      tableCtx?.tableRef?.value?.scrollTo({ top: 0, behavior: "smooth" });
      tableCtx.tableV2Ref?.value?.scrollTo({ scrollLeft: 0, scrollTop: 0 });
    };
    __expose({
      // queryRef,
      handleQuery,
      resetQuery
    });
    return (_ctx, _cache) => {
      const _component_gm_button = resolveComponent("gm-button");
      const _component_gm_icon = resolveComponent("gm-icon");
      const _component_gm_form_item = resolveComponent("gm-form-item");
      const _component_gm_form = resolveComponent("gm-form");
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "queryDivRef",
          ref: queryDivRef,
          class: "gm-mb-5"
        },
        [
          withDirectives(createVNode(_component_gm_form, {
            ref_key: "queryRef",
            ref: queryRef,
            model: queryParams.value,
            inline: true,
            class: "gmSearchForm"
          }, {
            default: withCtx(() => [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(showMore.value ? "" : "gm-h-[36px] gm-overflow-hidden")
                },
                [
                  createElementVNode(
                    "div",
                    {
                      class: "gm-relative gm-grid gm-w-full",
                      style: normalizeStyle({ gridTemplateColumns: `repeat(${colsCount.value}, minmax(0, 1fr))`, gap: itemGap + "px" })
                    },
                    [
                      (openBlock(true), createElementBlock(
                        Fragment,
                        null,
                        renderList(optionsList.value, (item, index) => {
                          return openBlock(), createBlock(resolveDynamicComponent(item.component), mergeProps({ key: index }, item.props, {
                            modelValue: queryParams.value[item.props.prop],
                            "onUpdate:modelValue": ($event) => queryParams.value[item.props.prop] = $event
                          }), null, 16, ["modelValue", "onUpdate:modelValue"]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      )),
                      renderSlot(_ctx.$slots, "default", {}, void 0, true),
                      withDirectives(createVNode(_component_gm_form_item, {
                        style: normalizeStyle(searchButtonItemStyle.value)
                      }, {
                        default: withCtx(() => [
                          createElementVNode(
                            "div",
                            {
                              class: normalizeClass(["gm-flex gm-w-full", notShowShowMore.value ? "" : "gm-justify-end"])
                            },
                            [
                              createVNode(_component_gm_button, {
                                type: "primary",
                                icon: unref(Search),
                                class: "",
                                onClick: handleQuery
                              }, {
                                default: withCtx(() => [
                                  createTextVNode("\u641C\u7D22")
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["icon"]),
                              createVNode(_component_gm_button, {
                                icon: unref(Refresh),
                                onClick: resetQuery
                              }, {
                                default: withCtx(() => [
                                  createTextVNode("\u91CD\u7F6E")
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["icon"]),
                              withDirectives(createVNode(
                                _component_gm_button,
                                {
                                  type: "primary",
                                  text: "",
                                  onClick: handleShowMoreChange
                                },
                                {
                                  default: withCtx(() => [
                                    createTextVNode(
                                      toDisplayString(showMore.value ? "\u7F29\u8D77" : "\u5C55\u5F00") + " ",
                                      1
                                      /* TEXT */
                                    ),
                                    createVNode(_component_gm_icon, {
                                      class: normalizeClass(["el-icon--right", showMore.value ? "gm-rotate-180" : ""])
                                    }, {
                                      default: withCtx(() => [
                                        createVNode(unref(ArrowDown))
                                      ]),
                                      _: 1
                                      /* STABLE */
                                    }, 8, ["class"])
                                  ]),
                                  _: 1
                                  /* STABLE */
                                },
                                512
                                /* NEED_PATCH */
                              ), [
                                [vShow, !notShowShowMore.value]
                              ])
                            ],
                            2
                            /* CLASS */
                          )
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["style"]), [
                        [vShow, !props.hideActionButtons]
                      ]),
                      createElementVNode(
                        "div",
                        {
                          ref_key: "visibilityMarkRef",
                          ref: visibilityMarkRef,
                          class: "gm-absolute gm-bottom-3 gm-right-0 -gm-z-10 gm-h-1 gm-w-1"
                        },
                        null,
                        512
                        /* NEED_PATCH */
                      )
                    ],
                    4
                    /* STYLE */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["model"]), [
            [vShow, showSearch.value]
          ])
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});

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