import { ref, inject, reactive, provide, onMounted, onUnmounted, h } from "vue";
import { defineVxeComponent } from "../../ui/src/comp.mjs";
import { createItem, watchItem, assembleItem, destroyItem } from "./util.mjs";
import "../../ui/index.mjs";
import { isEnableConf } from "../../ui/src/utils.mjs";
import { formItemProps } from "./form-item.mjs";
import { getItemClass, renderTitle, getItemContentClass } from "./render.mjs";
import XEUtils from "xe-utils";
import { renderer } from "../../../../@vxe-ui/core/es/src/renderer.mjs";
import { renderEmptyElement } from "../../../../@vxe-ui/core/es/index.esm.mjs";
const VxeFormGroupComponent = defineVxeComponent({
  name: "VxeFormGroup",
  props: formItemProps,
  setup(props, context) {
    const { slots } = context;
    const xID = XEUtils.uniqueId();
    const refElem = ref();
    const $xeForm = inject("$xeForm", {});
    const $xeParentFormGroup = inject("$xeFormGroup", null);
    const formItem = reactive(createItem($xeForm, props));
    formItem.slots = slots;
    formItem.children = [];
    const formItemInfo = { itemConfig: formItem };
    provide("xeFormItemInfo", formItemInfo);
    const renderVN = () => {
      const formProps = $xeForm.props;
      const $xeGrid = $xeForm.xeGrid;
      const item = formItem;
      const { data, readonly, disabled } = formProps;
      const { visible, field, itemRender, contentStyle } = item;
      const compConf = isEnableConf(itemRender) ? 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 renderEmptyElement();
      }
      return h("div", {
        ref: refElem,
        key: item.id,
        itemid: item.id,
        class: getItemClass($xeForm, item, true),
        style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
      }, [
        renderTitle($xeForm, item, true),
        h("div", {
          class: 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,
      renderVN
    };
    watchItem(props, formItem);
    onMounted(() => {
      const elem = refElem.value;
      assembleItem($xeForm, elem, formItem, $xeParentFormGroup);
    });
    onUnmounted(() => {
      destroyItem($xeForm, formItem);
    });
    provide("$xeFormGroup", $xeFormGroup);
    provide("$xeFormItem", null);
    return $xeFormGroup;
  },
  render() {
    return this.renderVN();
  }
});
export {
  VxeFormGroupComponent as default
};
