import ListItem from '../list-item';
import Textarea from '../textarea';
import InputItemMixin from '../mixins/input-item';
import './index.less';

var TextareaItem = {
    name: 'SnTextareaItem',
    mixins: [InputItemMixin],

    props: {
        rows: {
            type: [Number, String],
            'default': 1
        },
        autosize: {
            type: Boolean,
            'default': true
        }
    },

    render: function render() {
        var h = arguments[0];
        var value = this.value,
            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,
            rows = this.rows,
            autosize = this.autosize,
            maxlength = this.maxlength,
            $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-textarea-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(Textarea, {
                attrs: {
                    value: value,
                    maxlength: maxlength,
                    placeholder: placeholder,
                    disabled: disabled,
                    editable: editable,
                    rows: rows,
                    autosize: autosize
                },
                on: {
                    'focus': this.onFocus,
                    'input': this.onInput,
                    'change': this.onChange,
                    'blur': this.onBlur
                }
            }), renderTitle, renderRightIcon]
        );
    }
};

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

export default TextareaItem;