import "../../../../../node_modules/element-plus/es/index.mjs";
/* empty css                                                             */
/* empty css                                                                  */
/* empty css                                                                */
/* empty css                                                                     */
/* empty css                                                                  */
/* empty css                                                                 */
/* empty css                                                                     */
/* empty css                                                                             */
import "../../../../../node_modules/element-plus/theme-chalk/el-date-picker.css.mjs";
/* empty css                                                               */
/* empty css                                                                  */
/* empty css                                                                        */
/* empty css                                                                  */
import { computed, reactive, watch, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, unref, normalizeStyle, Fragment, renderList, createBlock, normalizeClass, withModifiers, toDisplayString, createTextVNode } from "vue";
import { VueDraggable as lo } from "../../../../../node_modules/vue-draggable-plus/dist/vue-draggable-plus.mjs";
import { Close as close_default, Search as search_default, Refresh as refresh_default } from "../../../../../node_modules/@element-plus/icons-vue/dist/index.mjs";
import { getEditConfigData, getCurrentClass, setSelectedItem, setHoverItem } from "../../utils/common.mjs";
/* empty css                      */
import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.mjs";
import { ElForm, ElFormItem } from "../../../../../node_modules/element-plus/es/components/form/index.mjs";
import { ElIcon } from "../../../../../node_modules/element-plus/es/components/icon/index.mjs";
import { ElInput } from "../../../../../node_modules/element-plus/es/components/input/index.mjs";
import { ElSelect, ElOption } from "../../../../../node_modules/element-plus/es/components/select/index.mjs";
import { ElDatePicker } from "../../../../../node_modules/element-plus/es/components/date-picker/index.mjs";
import { ElButton } from "../../../../../node_modules/element-plus/es/components/button/index.mjs";
const _hoisted_1 = { class: "fixed-mode-config" };
const _hoisted_2 = { class: "filter-form-section" };
const _hoisted_3 = { class: "form-item-label" };
const _sfc_main = {
  __name: "FixedModeConfig",
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const editConfigData = computed(() => getEditConfigData());
    const filterFields = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val)
    });
    const columnCount = computed(() => {
      var _a, _b;
      return ((_b = (_a = editConfigData.value) == null ? void 0 : _a.queryConfig) == null ? void 0 : _b.columnCount) || 3;
    });
    const isSingleLine = computed(() => {
      return filterFields.value.length <= columnCount.value;
    });
    const formData = reactive({});
    function getFieldInfo(filterField) {
      var _a, _b;
      const allFields = [
        ...((_a = editConfigData.value) == null ? void 0 : _a.fieldsData) || [],
        ...((_b = editConfigData.value) == null ? void 0 : _b.hiddenFields) || []
      ];
      const field = allFields.find((f) => f.id == filterField.fieldId);
      return field;
    }
    function getFieldLabel(filterField) {
      const fieldInfo = getFieldInfo(filterField);
      return (fieldInfo == null ? void 0 : fieldInfo.label) || "";
    }
    watch(
      filterFields,
      (fields) => {
        fields.forEach((filterField) => {
          const fieldInfo = getFieldInfo(filterField);
          if (fieldInfo && !(fieldInfo.fieldName in formData)) {
            formData[fieldInfo.fieldName] = fieldInfo.fieldType == "daterange" ? [] : "";
          }
        });
        const currentFieldNames = fields.map((filterField) => {
          const fieldInfo = getFieldInfo(filterField);
          return fieldInfo == null ? void 0 : fieldInfo.fieldName;
        }).filter(Boolean);
        Object.keys(formData).forEach((key) => {
          if (!currentFieldNames.includes(key)) {
            delete formData[key];
          }
        });
      },
      { immediate: true, deep: true }
    );
    function removeField(field) {
      var _a, _b;
      const index = filterFields.value.findIndex((f) => f.id == field.id);
      if (index !== -1) {
        filterFields.value.splice(index, 1);
        let fieldItem = (_a = editConfigData.value) == null ? void 0 : _a.fieldsData.find(
          (item) => item.id == field.fieldId
        );
        if (!fieldItem) {
          fieldItem = (_b = editConfigData.value) == null ? void 0 : _b.hiddenFields.find(
            (item) => item.id == field.fieldId
          );
        }
        if (fieldItem) {
          fieldItem.isFilter = false;
        }
      }
    }
    function isInputType(field) {
      const inputTypes = ["text", "textarea", "number"];
      return inputTypes.includes(field.fieldType);
    }
    function isSelectType(field) {
      const selectTypes = ["select", "radio", "checkbox", "switch"];
      return selectTypes.includes(field.fieldType);
    }
    function isDateType(field) {
      const dateTypes = [
        "date",
        "datetime",
        "time",
        "month",
        "year",
        "dates",
        "week"
      ];
      return dateTypes.includes(field.fieldType);
    }
    function handleSearch() {
    }
    function resetForm() {
    }
    return (_ctx, _cache) => {
      const _component_el_icon = ElIcon;
      const _component_el_input = ElInput;
      const _component_el_option = ElOption;
      const _component_el_select = ElSelect;
      const _component_el_date_picker = ElDatePicker;
      const _component_el_form_item = ElFormItem;
      const _component_el_form = ElForm;
      const _component_el_button = ElButton;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createVNode(_component_el_form, {
            ref: "formRef",
            model: formData,
            class: "filter-form",
            "label-width": "80px"
          }, {
            default: withCtx(() => [
              createVNode(unref(lo), {
                modelValue: filterFields.value,
                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filterFields.value = $event),
                animation: 150,
                group: { name: "filterFields" },
                ghostClass: "ghost",
                class: "form-items-draggable",
                style: normalizeStyle({ "--column-count": columnCount.value })
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(filterFields.value, (filterField) => {
                    return openBlock(), createBlock(_component_el_form_item, {
                      key: filterField.id,
                      label: getFieldLabel(filterField),
                      onMouseenter: ($event) => unref(setHoverItem)(filterField),
                      onMouseleave: _cache[0] || (_cache[0] = ($event) => unref(setHoverItem)()),
                      onClick: withModifiers(($event) => unref(setSelectedItem)(filterField), ["stop"]),
                      class: normalizeClass(unref(getCurrentClass)(filterField))
                    }, {
                      label: withCtx(() => [
                        createElementVNode("div", _hoisted_3, [
                          createElementVNode("span", null, toDisplayString(getFieldLabel(filterField)), 1)
                        ])
                      ]),
                      default: withCtx(() => [
                        createVNode(_component_el_icon, {
                          class: "delete-icon",
                          onClick: withModifiers(($event) => removeField(filterField), ["stop"])
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(close_default))
                          ]),
                          _: 2
                        }, 1032, ["onClick"]),
                        isInputType(getFieldInfo(filterField)) ? (openBlock(), createBlock(_component_el_input, {
                          key: 0,
                          modelValue: formData[getFieldInfo(filterField).fieldName],
                          "onUpdate:modelValue": ($event) => formData[getFieldInfo(filterField).fieldName] = $event,
                          class: "filter-item"
                        }, null, 8, ["modelValue", "onUpdate:modelValue"])) : isSelectType(getFieldInfo(filterField)) ? (openBlock(), createBlock(_component_el_select, {
                          key: 1,
                          modelValue: formData[getFieldInfo(filterField).fieldName],
                          "onUpdate:modelValue": ($event) => formData[getFieldInfo(filterField).fieldName] = $event,
                          class: "filter-item"
                        }, {
                          default: withCtx(() => [
                            createVNode(_component_el_option, {
                              label: "选项1",
                              value: "1"
                            }),
                            createVNode(_component_el_option, {
                              label: "选项2",
                              value: "2"
                            })
                          ]),
                          _: 2
                        }, 1032, ["modelValue", "onUpdate:modelValue"])) : isDateType(getFieldInfo(filterField)) ? (openBlock(), createBlock(_component_el_date_picker, {
                          key: 2,
                          modelValue: formData[getFieldInfo(filterField).fieldName],
                          "onUpdate:modelValue": ($event) => formData[getFieldInfo(filterField).fieldName] = $event,
                          type: "daterange",
                          "range-separator": "至",
                          "start-placeholder": "开始日期",
                          "end-placeholder": "结束日期",
                          class: "filter-item"
                        }, null, 8, ["modelValue", "onUpdate:modelValue"])) : (openBlock(), createBlock(_component_el_input, {
                          key: 3,
                          modelValue: formData[getFieldInfo(filterField).fieldName],
                          "onUpdate:modelValue": ($event) => formData[getFieldInfo(filterField).fieldName] = $event,
                          class: "filter-item"
                        }, null, 8, ["modelValue", "onUpdate:modelValue"]))
                      ]),
                      _: 2
                    }, 1032, ["label", "onMouseenter", "onClick", "class"]);
                  }), 128))
                ]),
                _: 1
              }, 8, ["modelValue", "style"])
            ]),
            _: 1
          }, 8, ["model"])
        ]),
        createElementVNode("div", {
          class: normalizeClass(["fixed-search-btn", { inline: isSingleLine.value }])
        }, [
          createVNode(_component_el_button, {
            icon: unref(search_default),
            type: "primary",
            onClick: handleSearch
          }, {
            default: withCtx(() => _cache[2] || (_cache[2] = [
              createTextVNode("搜索")
            ])),
            _: 1
          }, 8, ["icon"]),
          createVNode(_component_el_button, {
            icon: unref(refresh_default),
            onClick: resetForm,
            class: "reset-btn"
          }, {
            default: withCtx(() => _cache[3] || (_cache[3] = [
              createTextVNode("重置")
            ])),
            _: 1
          }, 8, ["icon"])
        ], 2)
      ]);
    };
  }
};
const FixedModeConfig = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ad9c58ca"]]);
export {
  FixedModeConfig as default
};
