import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { renderer, globalMixins, renderEmptyElement } from '../../ui';
import { isEnableConf } from '../../ui/src/utils';
import { createItem, watchItem, destroyItem, assembleItem } from './util';
import { formItemProps } from './form-item';
import { renderTitle, getItemClass, getItemContentClass } from './render';
const formItemPropKeys = Object.keys(formItemProps);
export default {
    name: 'VxeFormGroup',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: formItemProps,
    inject: {
        $xeForm: {
            default: null
        },
        $xeParentFormGroup: {
            from: '$xeFormGroup',
            default: null
        }
    },
    data() {
        const xID = XEUtils.uniqueId();
        const formItem = {};
        const reactData = {};
        return {
            xID,
            formItem,
            reactData
        };
    },
    computed: Object.assign({}, {}),
    methods: {
        renderVN(h) {
            const $xeFormGroup = this;
            const slots = $xeFormGroup.$scopedSlots;
            const formItem = $xeFormGroup.formItem;
            const $xeForm = $xeFormGroup.$xeForm;
            const formProps = $xeForm;
            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($xeFormGroup);
            }
            return h('div', {
                ref: 'refElem',
                key: item.id,
                class: getItemClass($xeForm, item, true),
                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : (itemStyle || {}),
                attrs: {
                    itemid: item.id
                }
            }, [
                renderTitle(h, $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({}) : [])
            ]);
        }
    },
    provide() {
        const $xeFormGroup = this;
        const formItem = $xeFormGroup.formItem;
        return {
            $xeFormGroup,
            $xeFormItem: null,
            xeFormItemInfo: {
                itemConfig: formItem
            }
        };
    },
    created() {
        const $xeFormGroup = this;
        const props = $xeFormGroup;
        const $xeForm = $xeFormGroup.$xeForm;
        const formItem = createItem($xeForm, props);
        formItem.children = [];
        $xeFormGroup.formItem = formItem;
        watchItem($xeFormGroup, formItemPropKeys, formItem);
    },
    mounted() {
        const $xeFormGroup = this;
        const formItem = $xeFormGroup.formItem;
        const $xeForm = $xeFormGroup.$xeForm;
        const $xeParentFormGroup = $xeFormGroup.$xeParentFormGroup;
        const elem = $xeFormGroup.$refs.refElem;
        assembleItem($xeForm, elem, formItem, $xeParentFormGroup);
    },
    beforeDestroy() {
        const $xeFormGroup = this;
        const formItem = $xeFormGroup.formItem;
        const $xeForm = $xeFormGroup.$xeForm;
        destroyItem($xeForm, formItem);
    },
    render(h) {
        return this.renderVN(h);
    }
};
