"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("../../../../../node_modules/element-plus/es/index.js");
;/* empty css                                                             */
;/* empty css                                                                   */
;/* empty css                                                                */
;/* empty css                                                                  */
;/* empty css                                                                     */
;/* empty css                                                                 */
;/* empty css                                                                        */
;/* empty css                                                                  */
;/* empty css                                                                     */
;/* empty css                                                                             */
require("../../../../../node_modules/element-plus/theme-chalk/el-date-picker.css.js");
const Vue = require("vue");
const index$6 = require("../../../../../node_modules/@element-plus/icons-vue/dist/index.js");
const index$b = require("../forms/text/index.js");
const index$7 = require("../forms/select/index.js");
const index$8 = require("../forms/multipleSelection/index.js");
const index$a = require("../forms/date/index.js");
const index$9 = require("../forms/number/index.js");
const common = require("../../utils/common.js");
const getInstance = require("../../utils/getInstance.js");
;/* empty css                  */
const _pluginVue_exportHelper = require("../../../../../_virtual/_plugin-vue_export-helper.js");
const index = require("../../../../../node_modules/element-plus/es/components/form/index.js");
const index$1 = require("../../../../../node_modules/element-plus/es/components/date-picker/index.js");
const index$2 = require("../../../../../node_modules/element-plus/es/components/input-number/index.js");
const index$3 = require("../../../../../node_modules/element-plus/es/components/button/index.js");
const index$4 = require("../../../../../node_modules/element-plus/es/components/divider/index.js");
const index$5 = require("../../../../../node_modules/element-plus/es/components/icon/index.js");
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;
    Vue.useCssVars((_ctx) => ({
      "f3ebd008": `${config.value.collapseRows * 90}px`
    }));
    const props = __props;
    const emit = __emit;
    const config = Vue.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 = Vue.computed(() => {
      return config.value.filterFields.map((filterField) => {
        const fieldConfig = getFieldConfig(filterField.fieldId);
        return {
          ...filterField,
          ...fieldConfig
        };
      });
    });
    const filterValues = Vue.ref({});
    const ctx = getInstance.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 = common.reverseHandleSearchData(
        filters,
        completeFilterFields.value
      );
    }
    const isCollapsed = Vue.ref(true);
    const shouldShowToggle = Vue.computed(() => {
      const fieldCount = completeFilterFields.value.length;
      const maxVisibleFields = config.value.columnCount * config.value.collapseRows;
      return fieldCount > maxVisibleFields;
    });
    Vue.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: index$b.Text,
        select: index$7.Select,
        date: index$a.Date,
        number: index$9.Number,
        multipleSelection: index$8.MultipleSelection,
        switch: index$7.Select
      };
      return componentMap[fieldType] || index$b.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 = common.handleSearchData(
        filterValues.value,
        completeFilterFields.value
      );
      emit("search", { filters: JSON.stringify(filters) });
    };
    const handleReset = () => {
      filterValues.value = {};
      emit("reset");
    };
    Vue.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 = index$1.ElDatePicker;
      const _component_el_input_number = index$2.ElInputNumber;
      const _component_el_form_item = index.ElFormItem;
      const _component_el_button = index$3.ElButton;
      const _component_el_form = index.ElForm;
      const _component_el_icon = index$5.ElIcon;
      const _component_el_divider = index$4.ElDivider;
      return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [
        config.value.enabled ? (Vue.openBlock(), Vue.createBlock(_component_el_form, {
          key: 0,
          model: filterValues.value,
          class: "fec-table-filter",
          "label-width": "100px",
          "label-position": "right",
          style: Vue.normalizeStyle({ "--column-count": config.value.columnCount }),
          tabindex: "0",
          size: "default",
          onKeydown: Vue.withKeys(handleSearch, ["enter"])
        }, {
          default: Vue.withCtx(() => [
            Vue.createElementVNode("div", {
              class: Vue.normalizeClass(["filter-fields", { "is-collapsed": isCollapsed.value }])
            }, [
              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(completeFilterFields.value, (field, index2) => {
                return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
                  key: field.id,
                  class: "filter-field"
                }, [
                  Vue.createVNode(_component_el_form_item, {
                    label: field.label || "筛选条件"
                  }, {
                    default: Vue.withCtx(() => [
                      field.fieldType == "date" ? (Vue.openBlock(), Vue.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" ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
                        Vue.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] = Vue.createElementVNode("span", null, "-", -1)),
                        Vue.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"])
                      ])) : (Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(getFilterComponent(field.fieldType)), Vue.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"])
                ])), [
                  [
                    Vue.vShow,
                    !isCollapsed.value || index2 < config.value.columnCount * config.value.collapseRows
                  ]
                ]);
              }), 128))
            ], 2),
            Vue.createElementVNode("div", _hoisted_2, [
              Vue.createVNode(_component_el_button, {
                type: "primary",
                onClick: handleSearch
              }, {
                default: Vue.withCtx(() => _cache[1] || (_cache[1] = [
                  Vue.createTextVNode("查询")
                ])),
                _: 1
              }),
              Vue.createVNode(_component_el_button, {
                type: "primary",
                onClick: handleReset
              }, {
                default: Vue.withCtx(() => _cache[2] || (_cache[2] = [
                  Vue.createTextVNode("重置")
                ])),
                _: 1
              })
            ])
          ]),
          _: 1
        }, 8, ["model", "style"])) : Vue.createCommentVNode("", true),
        shouldShowToggle.value ? (Vue.openBlock(), Vue.createBlock(_component_el_divider, {
          key: 1,
          "border-style": "dashed",
          class: "filter-divider"
        }, {
          default: Vue.withCtx(() => [
            Vue.createElementVNode("div", {
              onClick: toggleCollapse,
              class: "collapse-toggle"
            }, [
              Vue.createElementVNode("span", null, Vue.toDisplayString(isCollapsed.value ? "更多筛选项" : "收起"), 1),
              Vue.createVNode(_component_el_icon, { style: { "transform": "rotate(90deg)" } }, {
                default: Vue.withCtx(() => [
                  isCollapsed.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$6.DArrowRight), { key: 0 })) : (Vue.openBlock(), Vue.createBlock(Vue.unref(index$6.DArrowLeft), { key: 1 }))
                ]),
                _: 1
              })
            ])
          ]),
          _: 1
        })) : Vue.createCommentVNode("", true)
      ], 64);
    };
  }
};
const TableFilter = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-ba2f1878"]]);
exports.default = TableFilter;
