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 { getItemClass, renderTitle, getItemContentClass, renderItemContent, renderItemErrorIcon } 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 formItemProps = {
  title: String,
  field: String,
  span: {
    type: [String, Number],
    default: null
  },
  align: {
    type: String,
    default: null
  },
  verticalAlign: {
    type: String,
    default: null
  },
  titleBackground: {
    type: Boolean,
    default: null
  },
  titleBold: {
    type: Boolean,
    default: null
  },
  titleAlign: {
    type: String,
    default: null
  },
  titleWidth: {
    type: [String, Number],
    default: null
  },
  titleColon: {
    type: Boolean,
    default: null
  },
  titleAsterisk: {
    type: Boolean,
    default: null
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  vertical: {
    type: Boolean,
    default: null
  },
  padding: {
    type: Boolean,
    default: null
  },
  formatter: [String, Function],
  className: [String, Function],
  contentClassName: [String, Function],
  contentStyle: [Object, Function],
  titleClassName: [String, Function],
  titleStyle: [Object, Function],
  titleOverflow: {
    type: [Boolean, String],
    default: null
  },
  titlePrefix: Object,
  titleSuffix: Object,
  resetValue: { default: null },
  visibleMethod: Function,
  visible: {
    type: Boolean,
    default: null
  },
  showContent: {
    type: Boolean,
    default: null
  },
  folding: Boolean,
  collapseNode: Boolean,
  itemRender: Object,
  rules: Array,
  params: Object
};
const VxeFormItemComponent = defineVxeComponent({
  name: "VxeFormItem",
  props: formItemProps,
  setup(props, { slots }) {
    const xID = XEUtils.uniqueId();
    const refElem = ref();
    const $xeForm = inject("$xeForm", {});
    const $xeFormGroup = inject("$xeFormGroup", null);
    const formItem = reactive(createItem($xeForm, props));
    formItem.slots = slots;
    const formItemInfo = { itemConfig: formItem };
    provide("xeFormItemInfo", formItemInfo);
    const renderItem = ($xeForm2, item) => {
      const formProps = $xeForm2.props;
      const $xeGrid = $xeForm2.xeGrid;
      const { data, readonly, disabled } = formProps;
      const { visible, field, itemRender, contentStyle, showContent } = 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 params = { data, disabled, readonly, field, property: field, item, $form: $xeForm2, $grid: $xeGrid };
      if (visible === false) {
        return renderEmptyElement();
      }
      return h("div", {
        ref: refElem,
        key: item.id,
        itemid: item.id,
        class: getItemClass($xeForm2, item),
        style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
      }, [
        renderTitle($xeForm2, item),
        showContent === false ? renderEmptyElement() : h("div", {
          class: getItemContentClass($xeForm2, item),
          style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
        }, [
          renderItemContent($xeForm2, item),
          renderItemErrorIcon($xeForm2, item)
        ])
      ]);
    };
    const renderVN = () => {
      const customLayout = $xeForm ? $xeForm.props.customLayout : false;
      const item = formItem;
      return customLayout ? renderItem($xeForm, item) : h("div", {
        ref: refElem
      });
    };
    const $xeFormItem = {
      xID,
      formItem,
      renderVN
    };
    watchItem(props, formItem);
    onMounted(() => {
      const elem = refElem.value;
      assembleItem($xeForm, elem, formItem, $xeFormGroup);
    });
    onUnmounted(() => {
      destroyItem($xeForm, formItem);
    });
    provide("$xeFormItem", $xeFormItem);
    provide("$xeFormGroup", null);
    return $xeFormItem;
  },
  render() {
    return this.renderVN();
  }
});
export {
  VxeFormItemComponent as default,
  formItemProps
};
