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

var InputNumberItem = {
    name: 'SnInputNumberItem',

    mixins: [InputItemMixins],

    props: {
        // 是否有小数
        decimal: Boolean,
        integerFigures: {
            type: Number,
            'default': 12
        },
        // 数值精度
        precision: {
            type: Number,
            'default': 2
        },
        percent: Boolean,
        thousandSeparator: {
            type: Boolean,
            'default': true
        },
        unit: String,
        allowMinus: Boolean
    },

    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,
            clear = this.clear,
            decimal = this.decimal,
            integerFigures = this.integerFigures,
            precision = this.precision,
            percent = this.percent,
            thousandSeparator = this.thousandSeparator,
            unit = this.unit,
            allowMinus = this.allowMinus,
            $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-number-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(InputNumber, {
                ref: 'inputRef',
                attrs: { type: type,
                    value: value,
                    placeholder: placeholder,
                    disabled: disabled,
                    editable: editable,
                    clear: clear,
                    decimal: decimal,
                    integerFigures: integerFigures,
                    precision: precision,
                    percent: percent,
                    thousandSeparator: thousandSeparator,
                    unit: unit,
                    allowMinus: allowMinus
                },
                on: {
                    'focus': this.onFocus,
                    'input': this.onInput,
                    'change': this.onChange,
                    'blur': this.onBlur
                }
            }), renderTitle, renderRightIcon]
        );
    }
};

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

export default InputNumberItem;