'use strict';

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

var vue = require('vue');
require('./renderComp.vue.js');
require('./moreChoose.vue.js');
var svg = require('@element-plus/icons-vue');
var useComputed = require('./useComputed.js');
require('../../../hooks/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var renderComp_vue_vue_type_script_setup_true_lang = require('./renderComp.vue2.js');
var moreChoose_vue_vue_type_script_setup_true_lang = require('./moreChoose.vue2.js');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "FQueryCondition"
  },
  __name: "index",
  props: {
    opts: { default: () => ({}) },
    labelWidth: { default: "120px" },
    btnCheckBind: { default: () => ({}) },
    btnResetBind: { default: () => ({}) },
    loading: { type: Boolean, default: false },
    reset: { type: Boolean, default: true },
    boolEnter: { type: Boolean, default: true },
    isShowOpen: { type: Boolean, default: true },
    isExpansion: { type: Boolean, default: false },
    maxVisibleRows: { default: 1 },
    packUpTxt: { default: "" },
    unfoldTxt: { default: "" },
    isFooter: { type: Boolean, default: true },
    configChangedReset: { type: Boolean, default: false },
    isShowWidthSize: { type: Boolean, default: false },
    widthSize: { default: 4 },
    isDropDownSelectMore: { type: Boolean, default: false },
    moreCheckList: { default: () => [] },
    popoverAttrs: { default: () => ({}) },
    labelPosition: { default: "right" }
  },
  emits: ["handleEvent", "submit", "reset", "getCheckList", "getRefs"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const {
      compChildName,
      selectListType,
      compChildLabel,
      compChildValue,
      compChildShowLabel,
      getColLength
    } = useComputed.useComputed();
    const { t } = useLocale.useLocale();
    const props = __props;
    const slots = vue.useSlots();
    const isShow = (name) => {
      return Object.keys(slots).includes(name);
    };
    const popoverAttrsBind = vue.computed(() => {
      return {
        showTxt: t("plus.search.popoverAttrs.showTxt"),
        title: t("plus.search.popoverAttrs.title"),
        allTxt: t("plus.search.popoverAttrs.allTxt"),
        reverseTxt: t("plus.search.popoverAttrs.reverseTxt"),
        clearTxt: t("plus.search.popoverAttrs.clearTxt"),
        ...props.popoverAttrs
      };
    });
    let queryState = vue.reactive({
      form: Object.keys(props.opts).reduce((acc, field) => {
        var _a;
        acc[field] = (_a = props.opts[field].defaultVal) != null ? _a : null;
        return acc;
      }, {})
    });
    let colLength = vue.ref(4);
    let showOpen = vue.ref(false);
    let open = vue.ref(false);
    const getPlaceholder = (row) => {
      let placeholder;
      if (row.comp && typeof row.comp == "string") {
        if (row.comp.includes("input")) {
          placeholder = t("plus.search.pleaseEnter") + row.label;
        } else if (row.comp.includes("select") || row.comp.includes("date")) {
          placeholder = t("plus.search.pleaseSelect") + row.label;
        } else {
          placeholder = row.label;
        }
      }
      return placeholder;
    };
    const queryAttrs = vue.computed(() => {
      return {
        btnTxt: t("plus.search.searchText"),
        ...props.btnCheckBind
      };
    });
    const resetAttrs = vue.computed(() => {
      return { btnTxt: t("plus.search.resetText"), ...props.btnResetBind };
    });
    const originCellLength = vue.computed(() => {
      let length = 0;
      Object.keys(props.opts).forEach((key) => {
        let span = props.opts[key].span || 1;
        if (length % colLength.value + span > colLength.value) {
          length += colLength.value - length % colLength.value;
        }
        length += span;
      });
      return length;
    });
    const cOpts = vue.computed(() => {
      let renderSpan = 0;
      return Object.keys(props.opts).reduce((acc, field) => {
        var _a;
        let opt = {
          ...props.opts[field]
        };
        if (showOpen.value) {
          renderSpan += (_a = opt.span) != null ? _a : 1;
          if (!open.value && renderSpan - 1 >= props.maxVisibleRows * colLength.value) {
            return acc;
          }
        }
        opt.dataIndex = field;
        acc[field] = opt;
        return acc;
      }, {});
    });
    const cellLength = vue.computed(() => {
      let length = 0;
      Object.keys(props.opts).forEach((key) => {
        let span = props.opts[key].span > 4 ? 4 : props.opts[key].span || 1;
        length += span;
      });
      return length;
    });
    const gridAreas = vue.computed(() => {
      var _a;
      const fields = Object.keys(cOpts.value);
      let rowIndex = 0;
      let rowSpan = 0;
      const areas = [[]];
      for (let fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
        const field = fields[fieldIndex];
        const opt = cOpts.value[field];
        const span = Math.min((_a = opt.span) != null ? _a : 1, Math.min(colLength.value, 4));
        if (rowSpan + span > colLength.value) {
          while (rowSpan < colLength.value) {
            areas[rowIndex].push(".");
            rowSpan += 1;
          }
          rowSpan = 0;
          areas[++rowIndex] = [];
        }
        rowSpan += span;
        for (let index = 0; index < span; index++) {
          areas[rowIndex].push(field);
        }
      }
      if (areas[rowIndex].length === colLength.value) {
        areas.push(Array(colLength.value).fill("submit_btn"));
      } else {
        while (areas[rowIndex].length < colLength.value) {
          areas[rowIndex].push("submit_btn");
        }
      }
      return areas.reduce((acc, cur) => {
        acc += `'${cur.join(" ")}'
`;
        return acc;
      }, "");
    });
    const packUpTxtText = vue.computed(() => props.packUpTxt || t("plus.search.retract"));
    const unfoldTxtText = vue.computed(() => props.unfoldTxt || t("plus.search.expand"));
    const cEvent = vue.computed(() => {
      return (opt) => {
        let event = { ...opt.eventHandle };
        let changeEvent = {};
        Object.keys(event).forEach((v) => {
          changeEvent[v] = (e) => {
            if (opt.comp.includes("select") || opt.comp.includes("picker") || opt.comp.includes("date")) {
              event[v] && event[v](e, queryState.form);
            } else {
              if (e) {
                event[v] && event[v](e, queryState.form);
              } else {
                event[v] && event[v](queryState.form);
              }
            }
          };
        });
        return { ...changeEvent };
      };
    });
    const initForm = (opts, keepVal = false) => {
      return Object.keys(opts).reduce((acc, field) => {
        var _a, _b, _c;
        if (keepVal && queryState.form) {
          acc[field] = (_b = (_a = queryState.form[field]) != null ? _a : opts[field].defaultVal) != null ? _b : null;
        } else {
          acc[field] = (_c = opts[field].defaultVal) != null ? _c : null;
        }
        return acc;
      }, {});
    };
    const emits = __emit;
    const tselecttableref = vue.ref({});
    const handleRef = (el, opt, key) => {
      emits("getRefs", el, opt, key);
      if (el) {
        tselecttableref.value[`tselecttableref-${key}`] = el;
      }
    };
    const getRefs = (el, opt, index) => {
      emits("getRefs", el, opt, index);
    };
    const resetHandle = () => {
      queryState.form = initForm(props.opts);
      const refList = Object.keys(tselecttableref.value).filter(
        (item) => item.includes("tselecttableref")
      );
      if (refList.length > 0 && tselecttableref.value) {
        refList.map((val) => {
          tselecttableref.value[val].clear();
        });
      }
      emits("reset", queryState.form);
      checkHandle("reset");
    };
    const resetData = () => {
      queryState.form = initForm(props.opts);
      const refList = Object.keys(tselecttableref.value).filter(
        (item) => item.includes("tselecttableref")
      );
      if (refList.length > 0 && tselecttableref.value) {
        refList.map((val) => {
          tselecttableref.value[val].clear();
        });
      }
    };
    const handleEvent = ({ isChange = false, type, val }, dataIndex) => {
      if (!isChange) {
        emits("handleEvent", type, val, queryState.form);
      } else if (dataIndex) {
        queryState.form[dataIndex] = val;
      }
    };
    const checkHandle = (flagText = false) => {
      emits("submit", queryState.form, flagText);
    };
    vue.onMounted(() => {
      if (props.isShowOpen) {
        showOpen.value = true;
      } else {
        showOpen.value = false;
      }
      if (props.isExpansion) {
        open.value = true;
      } else {
        open.value = false;
      }
      if (props.isShowWidthSize) {
        colLength.value = props.widthSize;
      } else {
        colLength.value = getColLength();
      }
      if (props.boolEnter) {
        document.onkeyup = (e) => {
          let key = e.keyCode;
          let pagination = document.querySelectorAll(".el-pagination");
          let isPaginationInputFocus = false;
          if (pagination) {
            pagination.forEach((ele) => {
              let paginationInputList = ele.getElementsByTagName("input");
              let paginationInput = paginationInputList[paginationInputList.length - 1];
              if (paginationInput === document.activeElement) {
                isPaginationInputFocus = true;
              }
            });
          }
          if (isPaginationInputFocus) {
            return;
          }
          if (key === 13) {
            checkHandle();
          }
        };
      }
      if (isShow("footerBtn") || !props.isFooter) {
        open.value = true;
      }
      if (props.isDropDownSelectMore) {
        open.value = true;
        showOpen.value = false;
      }
    });
    vue.watch(
      () => props.widthSize,
      (val) => {
        colLength.value = val;
      }
    );
    vue.watch(
      () => props.opts,
      (opts) => {
        queryState.form = initForm(opts, !props.configChangedReset);
      },
      { deep: true }
    );
    __expose({
      queryState,
      props,
      colLength,
      resetData,
      resetHandle,
      checkHandle,
      handleEvent
    });
    return (_ctx, _cache) => {
      const _component_el_form_item = vue.resolveComponent("el-form-item");
      const _component_el_button = vue.resolveComponent("el-button");
      const _component_el_icon = vue.resolveComponent("el-icon");
      const _component_el_form = vue.resolveComponent("el-form");
      return vue.openBlock(), vue.createBlock(_component_el_form, vue.mergeProps({ id: "f_query_condition" }, _ctx.$attrs, {
        "label-width": __props.labelWidth,
        form: vue.unref(queryState).form,
        labelPosition: __props.labelPosition,
        size: "default",
        class: "f-query-condition",
        style: {
          "grid-template-areas": gridAreas.value,
          "grid-template-columns": `repeat(${vue.unref(colLength)}, minmax(0px, ${100 / vue.unref(colLength)}%))`
        },
        onSubmit: _cache[2] || (_cache[2] = vue.withModifiers(() => {
        }, ["prevent"]))
      }), {
        default: vue.withCtx(() => [
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(cOpts.value, (opt, i) => {
              return vue.openBlock(), vue.createBlock(_component_el_form_item, vue.mergeProps({
                key: i,
                label: opt.label,
                "label-width": opt.labelWidth
              }, { ref_for: true }, _ctx.$attrs, {
                style: { gridArea: i },
                class: [
                  opt.className,
                  {
                    render_label: opt.labelRender,
                    render_label_position_top: __props.labelPosition == "top" && opt.labelRender,
                    render_label_position_left: __props.labelPosition == "left" && opt.labelRender
                  }
                ]
              }), vue.createSlots({
                default: vue.withCtx(() => [
                  opt.slotName ? vue.renderSlot(_ctx.$slots, opt.slotName, {
                    key: 0,
                    param: vue.unref(queryState).form,
                    scope: vue.unref(queryState).form
                  }) : vue.createCommentVNode("v-if", true),
                  opt.isSelfCom ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(opt.comp), vue.mergeProps(
                    {
                      key: 1,
                      ref_for: true,
                      ref: opt.comp === "t-select-table" ? (el) => handleRef(el, opt, i) : (el) => getRefs(el, opt, i),
                      modelValue: vue.unref(queryState).form[opt.dataIndex],
                      "onUpdate:modelValue": ($event) => vue.unref(queryState).form[opt.dataIndex] = $event,
                      placeholder: opt.placeholder || getPlaceholder(opt)
                    },
                    { ref_for: true },
                    typeof opt.bind == "function" ? opt.bind(vue.unref(queryState).form) : { clearable: true, filterable: true, ..._ctx.$attrs, ...opt.bind },
                    {
                      style: { width: opt.width || "100%" },
                      onChange: ($event) => handleEvent({ type: opt.event, val: vue.unref(queryState).form[opt.dataIndex] })
                    },
                    vue.toHandlers(cEvent.value(opt))
                  ), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder", "style", "onChange"])) : vue.createCommentVNode("v-if", true),
                  !opt.isSelfCom && !opt.slotName ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(opt.comp), vue.mergeProps(
                    {
                      key: 2,
                      ref_for: true
                    },
                    typeof opt.bind == "function" ? opt.bind(vue.unref(queryState).form) : { clearable: true, filterable: true, ..._ctx.$attrs, ...opt.bind },
                    {
                      placeholder: opt.placeholder || getPlaceholder(opt),
                      onChange: ($event) => handleEvent({ type: opt.event, val: vue.unref(queryState).form[opt.dataIndex] }),
                      ref_for: true,
                      ref: (el) => getRefs(el, opt, i)
                    },
                    vue.toHandlers(cEvent.value(opt)),
                    {
                      modelValue: vue.unref(queryState).form[opt.dataIndex],
                      "onUpdate:modelValue": ($event) => vue.unref(queryState).form[opt.dataIndex] = $event
                    }
                  ), {
                    default: vue.withCtx(() => [
                      (vue.openBlock(true), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(vue.unref(selectListType)(opt), (value, key) => {
                          return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(compChildName)(opt)), {
                            key,
                            disabled: value.disabled,
                            label: vue.unref(compChildLabel)(opt, value),
                            value: vue.unref(compChildValue)(opt, value, key)
                          }, {
                            default: vue.withCtx(() => [
                              vue.createTextVNode(
                                vue.toDisplayString(vue.unref(compChildShowLabel)(opt, value)),
                                1
                                /* TEXT */
                              )
                            ]),
                            _: 2
                            /* DYNAMIC */
                          }, 1032, ["disabled", "label", "value"]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1040, ["placeholder", "onChange", "modelValue", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true)
                ]),
                _: 2
                /* DYNAMIC */
              }, [
                opt.labelRender ? {
                  name: "label",
                  fn: vue.withCtx(() => [
                    vue.createVNode(renderComp_vue_vue_type_script_setup_true_lang.default, {
                      form: vue.unref(queryState).form,
                      render: opt.labelRender
                    }, null, 8, ["form", "render"])
                  ]),
                  key: "0"
                } : void 0
              ]), 1040, ["label", "label-width", "style", "class"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          Object.keys(cOpts.value).length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_form_item, {
            key: 0,
            "label-width": "0",
            style: { "grid-area": "submit_btn" },
            class: vue.normalizeClass([
              "btn",
              { flex_end: cellLength.value % vue.unref(colLength) === 0 },
              { btn_flex_end: Object.keys(cOpts.value).length === 4 || cellLength.value > 3 },
              { btn_label_position_top: __props.labelPosition == "top" }
            ])
          }, {
            default: vue.withCtx(() => [
              __props.isFooter ? (vue.openBlock(), vue.createElementBlock(
                vue.Fragment,
                { key: 0 },
                [
                  vue.renderSlot(_ctx.$slots, "footerBtn"),
                  !vue.unref(slots).footerBtn ? (vue.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    { key: 0 },
                    [
                      vue.createVNode(_component_el_button, vue.mergeProps({
                        class: "btn_check",
                        onClick: checkHandle
                      }, { type: "primary", ...queryAttrs.value }, { loading: __props.loading }), {
                        default: vue.withCtx(() => [
                          vue.createTextVNode(
                            vue.toDisplayString(queryAttrs.value.btnTxt),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 1
                        /* STABLE */
                      }, 16, ["loading"]),
                      __props.reset ? (vue.openBlock(), vue.createBlock(
                        _component_el_button,
                        vue.mergeProps({
                          key: 0,
                          class: "btn_reset"
                        }, resetAttrs.value, { onClick: resetHandle }),
                        {
                          default: vue.withCtx(() => [
                            vue.createTextVNode(
                              vue.toDisplayString(resetAttrs.value.btnTxt),
                              1
                              /* TEXT */
                            )
                          ]),
                          _: 1
                          /* STABLE */
                        },
                        16
                        /* FULL_PROPS */
                      )) : vue.createCommentVNode("v-if", true),
                      vue.renderSlot(_ctx.$slots, "querybar"),
                      originCellLength.value > __props.maxVisibleRows * vue.unref(colLength) && vue.unref(showOpen) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
                        key: 1,
                        onClick: _cache[0] || (_cache[0] = ($event) => vue.isRef(open) ? open.value = !vue.unref(open) : open = !vue.unref(open)),
                        link: ""
                      }, {
                        default: vue.withCtx(() => [
                          vue.createTextVNode(
                            vue.toDisplayString(vue.unref(open) ? packUpTxtText.value : unfoldTxtText.value) + " ",
                            1
                            /* TEXT */
                          ),
                          vue.unref(open) ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
                            default: vue.withCtx(() => [
                              vue.createVNode(vue.unref(svg.ArrowUp))
                            ]),
                            _: 1
                            /* STABLE */
                          })) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
                            default: vue.withCtx(() => [
                              vue.createVNode(vue.unref(svg.ArrowDown))
                            ]),
                            _: 1
                            /* STABLE */
                          }))
                        ]),
                        _: 1
                        /* STABLE */
                      })) : vue.createCommentVNode("v-if", true),
                      vue.createVNode(moreChoose_vue_vue_type_script_setup_true_lang.default, {
                        isDropDownSelectMore: __props.isDropDownSelectMore,
                        moreCheckList: __props.moreCheckList,
                        popoverAttrsBind: popoverAttrsBind.value,
                        onGetCheckList: _cache[1] || (_cache[1] = (event) => emits("getCheckList", event))
                      }, null, 8, ["isDropDownSelectMore", "moreCheckList", "popoverAttrsBind"])
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  )) : vue.createCommentVNode("v-if", true)
                ],
                64
                /* STABLE_FRAGMENT */
              )) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 16, ["label-width", "form", "labelPosition", "style"]);
    };
  }
});

exports.default = _sfc_main;
