'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
var table = require('../../../../constants/table.js');
var iconsVue = require('@element-plus/icons-vue');
var searchForm = require('./searchForm.js');
var constants = require('./constants.js');

const itemGap = 8;
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "GmSearchForm"
  },
  __name: "SearchForm",
  props: /* @__PURE__ */ vue.mergeModels(searchForm.searchFormProps, {
    "showSearch": { type: Boolean, ...{ default: true } },
    "showSearchModifiers": {},
    "queryParams": { required: true },
    "queryParamsModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(searchForm.searchFormEmits, ["update:showSearch", "update:queryParams"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const tableCtx = vue.inject(table.TableCtxKey, {});
    const showSearch = vue.useModel(__props, "showSearch");
    const queryParams = vue.useModel(__props, "queryParams");
    vue.provide(constants.queryParamsKey, queryParams);
    const props = __props;
    const emit = __emit;
    const queryDivRef = vue.ref();
    const visibilityMarkRef = vue.ref();
    const { width: queryDivWidth, height: queryDivHeight } = core.useElementSize(queryDivRef);
    const colsCount = vue.computed(() => Math.floor(queryDivWidth.value / 269));
    const showMore = vue.ref(props.defaultShowMore);
    const notShowShowMore = vue.computed(() => showMore.value === true && queryDivHeight.value <= 70);
    const searchButtonItemStyle = vue.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 vue.nextTick();
      window.dispatchEvent(scrollEvent);
    };
    const optionsList = vue.computed(() => {
      return props.options.map((it) => {
        const findComponent = searchForm.searchFormItemList.find((item) => item.type === it.type);
        if (findComponent) {
          it.component = findComponent.component;
        }
        return it;
      });
    });
    const queryRef = vue.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 });
    };
    vue.provide(constants.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 = vue.resolveComponent("gm-button");
      const _component_gm_icon = vue.resolveComponent("gm-icon");
      const _component_gm_form_item = vue.resolveComponent("gm-form-item");
      const _component_gm_form = vue.resolveComponent("gm-form");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          ref_key: "queryDivRef",
          ref: queryDivRef,
          class: "gm-mb-5"
        },
        [
          vue.withDirectives(vue.createVNode(_component_gm_form, {
            ref_key: "queryRef",
            ref: queryRef,
            model: queryParams.value,
            inline: true,
            class: "gmSearchForm"
          }, {
            default: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(showMore.value ? "" : "gm-h-[36px] gm-overflow-hidden")
                },
                [
                  vue.createElementVNode(
                    "div",
                    {
                      class: "gm-relative gm-grid gm-w-full",
                      style: vue.normalizeStyle({ gridTemplateColumns: `repeat(${colsCount.value}, minmax(0, 1fr))`, gap: itemGap + "px" })
                    },
                    [
                      (vue.openBlock(true), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(optionsList.value, (item, index) => {
                          return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), vue.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 */
                      )),
                      vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
                      vue.withDirectives(vue.createVNode(_component_gm_form_item, {
                        style: vue.normalizeStyle(searchButtonItemStyle.value)
                      }, {
                        default: vue.withCtx(() => [
                          vue.createElementVNode(
                            "div",
                            {
                              class: vue.normalizeClass(["gm-flex gm-w-full", notShowShowMore.value ? "" : "gm-justify-end"])
                            },
                            [
                              vue.createVNode(_component_gm_button, {
                                type: "primary",
                                icon: vue.unref(iconsVue.Search),
                                class: "",
                                onClick: handleQuery
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createTextVNode("\u641C\u7D22")
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["icon"]),
                              vue.createVNode(_component_gm_button, {
                                icon: vue.unref(iconsVue.Refresh),
                                onClick: resetQuery
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createTextVNode("\u91CD\u7F6E")
                                ]),
                                _: 1
                                /* STABLE */
                              }, 8, ["icon"]),
                              vue.withDirectives(vue.createVNode(
                                _component_gm_button,
                                {
                                  type: "primary",
                                  text: "",
                                  onClick: handleShowMoreChange
                                },
                                {
                                  default: vue.withCtx(() => [
                                    vue.createTextVNode(
                                      vue.toDisplayString(showMore.value ? "\u7F29\u8D77" : "\u5C55\u5F00") + " ",
                                      1
                                      /* TEXT */
                                    ),
                                    vue.createVNode(_component_gm_icon, {
                                      class: vue.normalizeClass(["el-icon--right", showMore.value ? "gm-rotate-180" : ""])
                                    }, {
                                      default: vue.withCtx(() => [
                                        vue.createVNode(vue.unref(iconsVue.ArrowDown))
                                      ]),
                                      _: 1
                                      /* STABLE */
                                    }, 8, ["class"])
                                  ]),
                                  _: 1
                                  /* STABLE */
                                },
                                512
                                /* NEED_PATCH */
                              ), [
                                [vue.vShow, !notShowShowMore.value]
                              ])
                            ],
                            2
                            /* CLASS */
                          )
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["style"]), [
                        [vue.vShow, !props.hideActionButtons]
                      ]),
                      vue.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"]), [
            [vue.vShow, showSearch.value]
          ])
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});

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