"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const util = require("./util.js");
require("../../ui/index.js");
const utils = require("../../ui/src/utils.js");
const formItem = require("./form-item.js");
const render = require("./render.js");
const XEUtils = require("xe-utils");
const renderer = require("../../../../@vxe-ui/core/es/src/renderer.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const VxeFormGroupComponent = comp.defineVxeComponent({
  name: "VxeFormGroup",
  props: formItem.formItemProps,
  setup(props, context) {
    const { slots } = context;
    const xID = XEUtils.uniqueId();
    const refElem = vue.ref();
    const $xeForm = vue.inject("$xeForm", {});
    const $xeParentFormGroup = vue.inject("$xeFormGroup", null);
    const formItem2 = vue.reactive(util.createItem($xeForm, props));
    formItem2.slots = slots;
    formItem2.children = [];
    const formItemInfo = { itemConfig: formItem2 };
    vue.provide("xeFormItemInfo", formItemInfo);
    const renderVN = () => {
      const formProps = $xeForm.props;
      const $xeGrid = $xeForm.xeGrid;
      const item = formItem2;
      const { data, readonly, disabled } = formProps;
      const { visible, field, itemRender, contentStyle } = item;
      const compConf = utils.isEnableConf(itemRender) ? renderer.renderer.get(itemRender.name) : null;
      const itemStyle = compConf ? compConf.formItemStyle || compConf.itemStyle : null;
      const itemContentStyle = compConf ? compConf.formItemContentStyle || compConf.itemContentStyle : null;
      const defaultSlot = slots ? slots.default : null;
      const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
      if (visible === false) {
        return index_esm.renderEmptyElement();
      }
      return vue.h("div", {
        ref: refElem,
        key: item.id,
        itemid: item.id,
        class: render.getItemClass($xeForm, item, true),
        style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
      }, [
        render.renderTitle($xeForm, item, true),
        vue.h("div", {
          class: render.getItemContentClass($xeForm, item, true),
          style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
        }, defaultSlot ? defaultSlot({}) : [])
      ]);
    };
    const $xeFormGroup = {
      xID,
      formItem: formItem2,
      renderVN
    };
    util.watchItem(props, formItem2);
    vue.onMounted(() => {
      const elem = refElem.value;
      util.assembleItem($xeForm, elem, formItem2, $xeParentFormGroup);
    });
    vue.onUnmounted(() => {
      util.destroyItem($xeForm, formItem2);
    });
    vue.provide("$xeFormGroup", $xeFormGroup);
    vue.provide("$xeFormItem", null);
    return $xeFormGroup;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeFormGroupComponent;
