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