import ListItem from '../list-item';
import Input from '../input';
import InputItemMixins from '../mixins/input-item';
import './index.less';

var InputItem = {
    name: 'SnInputItem',

    mixins: [InputItemMixins],

    render: function render() {
        var h = arguments[0];
        var value = this.value,
            type = this.type,
            icon = this.icon,
            rightIcon = this.rightIcon,
            title = this.title,
            titleStyle = this.titleStyle,
            titleClass = this.titleClass,
            valueStyle = this.valueStyle,
            valueClass = this.valueClass,
            valuePosition = this.valuePosition,
            labelNumber = this.labelNumber,
            required = this.required,
            border = this.border,
            borderIndent = this.borderIndent,
            placeholder = this.placeholder,
            editable = this.editable,
            disabled = this.disabled,
            maxlength = this.maxlength,
            clear = this.clear,
            chunkSize = this.chunkSize,
            $slots = this.$slots;


        var renderTitle = $slots['title'] ? h(
            'div',
            { slot: 'title' },
            [$slots['title']]
        ) : null;
        var renderRightIcon = $slots['right-icon'] ? h(
            'div',
            { slot: 'right-icon' },
            [$slots['right-icon']]
        ) : null;

        return h(
            ListItem,
            {
                'class': 'sn-input-item',
                attrs: { icon: icon,
                    rightIcon: rightIcon,
                    title: title,
                    titleStyle: titleStyle,
                    titleClass: titleClass,
                    valueStyle: valueStyle,
                    valueClass: valueClass,
                    valuePosition: valuePosition,
                    labelNumber: labelNumber,
                    required: required,
                    border: border,
                    borderIndent: borderIndent
                },
                on: {
                    'click': this.onClick,
                    'right-icon-click': this.onRightIconClick
                }
            },
            [h(Input, {
                ref: 'inputRef',
                attrs: { type: type,
                    value: value,
                    maxlength: maxlength,
                    placeholder: placeholder,
                    disabled: disabled,
                    editable: editable,
                    clear: clear,
                    chunkSize: chunkSize
                },
                on: {
                    'focus': this.onFocus,
                    'input': this.onInput,
                    'change': this.onChange,
                    'blur': this.onBlur
                }
            }), renderTitle, renderRightIcon]
        );
    }
};

InputItem.install = function (Vue) {
    Vue.component(InputItem.name, InputItem);
};

export default InputItem;