import "../../../../../node_modules/element-plus/es/index.mjs";
/* empty css                                                             */
/* empty css                                                                   */
/* 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";
import { useCssVars, computed, ref, watch, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, withKeys, normalizeStyle, withCtx, createElementVNode, normalizeClass, renderList, withDirectives, createVNode, resolveDynamicComponent, mergeProps, vShow, createTextVNode, toDisplayString, unref } from "vue";
import { DArrowRight as d_arrow_right_default, DArrowLeft as d_arrow_left_default } from "../../../../../node_modules/@element-plus/icons-vue/dist/index.mjs";
import { Text } from "../forms/text/index.mjs";
import { Select } from "../forms/select/index.mjs";
import { MultipleSelection } from "../forms/multipleSelection/index.mjs";
import { Date } from "../forms/date/index.mjs";
import { Number } from "../forms/number/index.mjs";
import { reverseHandleSearchData, handleSearchData } from "../../utils/common.mjs";
import { getCurrentVueInstance } from "../../utils/getInstance.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 { ElDatePicker } from "../../../../../node_modules/element-plus/es/components/date-picker/index.mjs";
import { ElInputNumber } from "../../../../../node_modules/element-plus/es/components/input-number/index.mjs";
import { ElButton } from "../../../../../node_modules/element-plus/es/components/button/index.mjs";
import { ElDivider } from "../../../../../node_modules/element-plus/es/components/divider/index.mjs";
import { ElIcon } from "../../../../../node_modules/element-plus/es/components/icon/index.mjs";
const _hoisted_1 = {
  key: 1,
  style: { "display": "flex", "align-items": "center", "gap": "8px", "width": "100%" }
};
const _hoisted_2 = { class: "filter-actions inline" };
const _sfc_main = {
  __name: "TableFilter",
  props: {
    queryConfig: {
      type: Object,
      default: () => ({})
    },
    fieldsData: {
      type: Array,
      default: () => []
    },
    isCache: {
      type: Boolean,
      default: false
    }
  },
  emits: ["search", "reset"],
  setup(__props, { expose: __expose, emit: __emit }) {
    var _a;
    useCssVars((_ctx) => ({
      "f3ebd008": `${config.value.collapseRows * 90}px`
    }));
    const props = __props;
    const emit = __emit;
    const config = computed(() => {
      var _a2, _b, _c, _d, _e;
      return {
        enabled: ((_a2 = props.queryConfig) == null ? void 0 : _a2.enabled) ?? false,
        mode: ((_b = props.queryConfig) == null ? void 0 : _b.mode) || "fixed",
        columnCount: ((_c = props.queryConfig) == null ? void 0 : _c.columnCount) || 3,
        collapseRows: ((_d = props.queryConfig) == null ? void 0 : _d.collapseRows) || 2,
        filterFields: ((_e = props.queryConfig) == null ? void 0 : _e.filterFields) || []
      };
    });
    const getFieldConfig = (fieldId) => {
      return props.fieldsData.find((field) => field.id === fieldId) || {};
    };
    const completeFilterFields = computed(() => {
      return config.value.filterFields.map((filterField) => {
        const fieldConfig = getFieldConfig(filterField.fieldId);
        return {
          ...filterField,
          ...fieldConfig
        };
      });
    });
    const filterValues = ref({});
    const ctx = getCurrentVueInstance();
    const route = (_a = ctx.$route) == null ? void 0 : _a.path;
    if (route && props.isCache) {
      const routeParams = JSON.parse(sessionStorage.getItem(route));
      const filters = JSON.parse((routeParams == null ? void 0 : routeParams.filters) || "{}");
      filterValues.value = reverseHandleSearchData(
        filters,
        completeFilterFields.value
      );
    }
    const isCollapsed = ref(true);
    const shouldShowToggle = computed(() => {
      const fieldCount = completeFilterFields.value.length;
      const maxVisibleFields = config.value.columnCount * config.value.collapseRows;
      return fieldCount > maxVisibleFields;
    });
    computed(() => {
      const totalRows = Math.ceil(
        completeFilterFields.value.length / config.value.columnCount
      );
      if (totalRows === 1) {
        return true;
      }
      if (isCollapsed.value) {
        return config.value.collapseRows === 1;
      } else {
        return totalRows === 1;
      }
    });
    const getFilterComponent = (fieldType) => {
      const componentMap = {
        text: Text,
        select: Select,
        date: Date,
        number: Number,
        multipleSelection: MultipleSelection,
        switch: Select
      };
      return componentMap[fieldType] || Text;
    };
    const getComponentConfig = (field) => {
      return { ...field };
    };
    const getPlaceholder = (field, type = "default") => {
      const placeholderMap = {
        text: "请输入",
        select: "请选择",
        date: type === "start" ? "开始日期" : type === "end" ? "结束日期" : "请选择日期",
        number: "请输入",
        number_min: "最小值",
        number_max: "最大值",
        radio: "请选择",
        checkbox: "请选择",
        switch: "请选择"
      };
      if (field.fieldType === "date") {
        return placeholderMap.date;
      }
      if (field.fieldType === "number") {
        return type === "min" ? placeholderMap.number_min : type === "max" ? placeholderMap.number_max : placeholderMap.number;
      }
      return `${placeholderMap[field.fieldType] || "请输入"}${field.label || ""}`;
    };
    const toggleCollapse = () => {
      isCollapsed.value = !isCollapsed.value;
    };
    const handleSearch = () => {
      const filters = handleSearchData(
        filterValues.value,
        completeFilterFields.value
      );
      emit("search", { filters: JSON.stringify(filters) });
    };
    const handleReset = () => {
      filterValues.value = {};
      emit("reset");
    };
    watch(
      () => props.queryConfig,
      () => {
        filterValues.value = {};
        isCollapsed.value = true;
      },
      { deep: true }
    );
    __expose({
      getFilterValues: () => filterValues.value,
      setFilterValues: (values) => {
        filterValues.value = { ...values };
      },
      reset: handleReset
    });
    return (_ctx, _cache) => {
      const _component_el_date_picker = ElDatePicker;
      const _component_el_input_number = ElInputNumber;
      const _component_el_form_item = ElFormItem;
      const _component_el_button = ElButton;
      const _component_el_form = ElForm;
      const _component_el_icon = ElIcon;
      const _component_el_divider = ElDivider;
      return openBlock(), createElementBlock(Fragment, null, [
        config.value.enabled ? (openBlock(), createBlock(_component_el_form, {
          key: 0,
          model: filterValues.value,
          class: "fec-table-filter",
          "label-width": "100px",
          "label-position": "right",
          style: normalizeStyle({ "--column-count": config.value.columnCount }),
          tabindex: "0",
          size: "default",
          onKeydown: withKeys(handleSearch, ["enter"])
        }, {
          default: withCtx(() => [
            createElementVNode("div", {
              class: normalizeClass(["filter-fields", { "is-collapsed": isCollapsed.value }])
            }, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(completeFilterFields.value, (field, index) => {
                return withDirectives((openBlock(), createElementBlock("div", {
                  key: field.id,
                  class: "filter-field"
                }, [
                  createVNode(_component_el_form_item, {
                    label: field.label || "筛选条件"
                  }, {
                    default: withCtx(() => [
                      field.fieldType == "date" ? (openBlock(), createBlock(_component_el_date_picker, {
                        key: 0,
                        modelValue: filterValues.value[field.fieldId],
                        "onUpdate:modelValue": ($event) => filterValues.value[field.fieldId] = $event,
                        type: "daterange",
                        "start-placeholder": getPlaceholder(field, "start"),
                        "end-placeholder": getPlaceholder(field, "end"),
                        format: "YYYY-MM-DD",
                        "value-format": "YYYYMMDD",
                        clearable: "",
                        style: { "width": "100%" }
                      }, null, 8, ["modelValue", "onUpdate:modelValue", "start-placeholder", "end-placeholder"])) : field.fieldType == "number" ? (openBlock(), createElementBlock("div", _hoisted_1, [
                        createVNode(_component_el_input_number, {
                          modelValue: filterValues.value[field.fieldId],
                          "onUpdate:modelValue": ($event) => filterValues.value[field.fieldId] = $event,
                          placeholder: getPlaceholder(field, "min"),
                          controls: false,
                          "controls-position": "right",
                          style: { "flex": "1" },
                          clearable: ""
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
                        _cache[0] || (_cache[0] = createElementVNode("span", null, "-", -1)),
                        createVNode(_component_el_input_number, {
                          modelValue: filterValues.value[`${field.fieldId}_max`],
                          "onUpdate:modelValue": ($event) => filterValues.value[`${field.fieldId}_max`] = $event,
                          placeholder: getPlaceholder(field, "max"),
                          controls: false,
                          "controls-position": "right",
                          style: { "flex": "1" },
                          clearable: ""
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
                      ])) : (openBlock(), createBlock(resolveDynamicComponent(getFilterComponent(field.fieldType)), mergeProps({
                        key: 2,
                        modelValue: filterValues.value[field.fieldId],
                        "onUpdate:modelValue": ($event) => filterValues.value[field.fieldId] = $event,
                        config: { ...field, eventHandlers: {} },
                        ref_for: true
                      }, getComponentConfig(field)), null, 16, ["modelValue", "onUpdate:modelValue", "config"]))
                    ]),
                    _: 2
                  }, 1032, ["label"])
                ])), [
                  [
                    vShow,
                    !isCollapsed.value || index < config.value.columnCount * config.value.collapseRows
                  ]
                ]);
              }), 128))
            ], 2),
            createElementVNode("div", _hoisted_2, [
              createVNode(_component_el_button, {
                type: "primary",
                onClick: handleSearch
              }, {
                default: withCtx(() => _cache[1] || (_cache[1] = [
                  createTextVNode("查询")
                ])),
                _: 1
              }),
              createVNode(_component_el_button, {
                type: "primary",
                onClick: handleReset
              }, {
                default: withCtx(() => _cache[2] || (_cache[2] = [
                  createTextVNode("重置")
                ])),
                _: 1
              })
            ])
          ]),
          _: 1
        }, 8, ["model", "style"])) : createCommentVNode("", true),
        shouldShowToggle.value ? (openBlock(), createBlock(_component_el_divider, {
          key: 1,
          "border-style": "dashed",
          class: "filter-divider"
        }, {
          default: withCtx(() => [
            createElementVNode("div", {
              onClick: toggleCollapse,
              class: "collapse-toggle"
            }, [
              createElementVNode("span", null, toDisplayString(isCollapsed.value ? "更多筛选项" : "收起"), 1),
              createVNode(_component_el_icon, { style: { "transform": "rotate(90deg)" } }, {
                default: withCtx(() => [
                  isCollapsed.value ? (openBlock(), createBlock(unref(d_arrow_right_default), { key: 0 })) : (openBlock(), createBlock(unref(d_arrow_left_default), { key: 1 }))
                ]),
                _: 1
              })
            ])
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 64);
    };
  }
};
const TableFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba2f1878"]]);
export {
  TableFilter as default
};
