<template>
    <div :class="{ 'el-input': 'el-input', 'is-disabled': disabled ? 'is-disabled' : '' }">
        <div :class="'el-input--' + size" v-if="type == 'text'">
            <input class="el-input__inner" type="text" v-model.lazy="values" :placeholder="placeholder" :disabled="disabled"
                :maxlength="maxlength" @change="change" @blur="blur" @focus="focus" @input="handleInput"
                :oninput="oninput" />
        </div>
        <el-input v-else-if="type == 'textarea'" type="textarea" v-model.lazy="values" :rows="rows" :size="size"
            :placeholder="placeholder" :maxlength="maxlength" :disabled="disabled"
            :show-word-limit="showWordLimit"></el-input>
        <slot name="suffix" v-if="type == 'text'"></slot>
    </div>
</template>

<script>

export default {
    props: {
        value: {
            type: [Number, String],
            default: null
        },
        type: {
            type: String,
            default: 'text'
        },
        placeholder: {
            type: String,
            default: ''
        },
        rows: {
            type: Number,
            default: 2
        },
        size: {
            type: String,
            default: 'small'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        oninput: {
            type: String,
            default: ''
        },
        prop: {
            type: String,
            default: ''
        },
        maxlength: {
            type: String,
            default: null
        },
        node: {
            type: Object,
            default: null
        },
        showWordLimit: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
        }
    },
    methods: {
        change(val) {
            this.$emit('change', val)
        },
        blur(val) {
            if (this.node != null) {
                this.node.validateField(this.prop)
            }
            this.$emit('blur', { val: val.srcElement.value, prop: this.prop })
        },
        handleInput(val) {
            this.$emit('input', val.target._value)
        },
        focus(val) {
            this.$emit('focus', val)
        },
    },
    computed: {
        values: {
            get: function () {
                return this.value;
            },
            set: function (val) {
                this.$emit('input', val)
            },
        },
    }
}
</script>

<style lang="scss" scoped>
.el-input__inner {
    padding-right: 25px;
}

.suffixIcon {
    color: #C0C4CC;
    font-size: 14px;
    height: 100%;
    position: absolute;
    right: 6px;
    top: 25%;
    text-align: center;
    pointer-events: none;
}
</style>