<template>
    <div class="input-length">
        <Input
            type="textarea"
            :rows="rows"
            :placeholder="placeholder"
            :maxlength="maxlength"
            :class="{'input-ele': true}"
            :value="currentValue"
            @input="inputEvent"></Input>
        <p class="input-txt">
            <span>{{txtMsg}}</span>
        </p>
    </div>
</template>

<script>
export default {
    name: 'input-length',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        rows: {
            type: Number,
            default: 5
        },
        placeholder: {
            type: String,
            default: '请输入文字内容'
        },
        maxlength: {
            type: Number,
            default: 250
        }
    },
    computed: {
        txtMsg() {
            let num = this.maxlength - this.currentValue.length;

            return `还能输${num >= 0 ? num : 0}个字`;
        }
    },
    data() {
        return {
            currentValue: this.value
        };
    },
    methods: {
        inputEvent(val) {
            this.currentValue = val;
            this.$emit('input', val);
        }
    },
    wacth: {
        value(val) {
            this.currentValue = val;
        }
    }
};
</script>

<style lang="scss" scoped>
.input-length {
    width: 100%;

    .input-ele {
        width: 100%;
    }

    .input-txt {
        text-align: right;
        font-size: 12px;
        margin-top: 2px;

        span {
            color: #999;
        }
    }
}
</style>