<template>
    <div :class="sizeClass" :style="{width:width+'px'}">
        <!--输入框-->
        <input type="text" 
            class="v-input" 
            v-model="internalValue" 
            :placeholder="placeholder" 
            :style="{width:width+'px'}" 
            :id="id" 
            :disabled="disabled"
            @input="inputCallFun($event)" 
            :readonly="readonly" />
        <!--清空展示内容-->
        <i class='v-clear v-icon-cancel' v-if="clear" v-show="isShowClear" @click='clearContent'></i>
    </div>
</template>
<script>

/*----------组件的参数使用说明---------*/
/*
*@id(type:String):输入框的id
*@width(type:Number):输入框的宽度
*@placeholder(type:String):输入框文本占位
*@size(type:String):输入框的尺寸 small(输入框高度为30px),middle(输入框高度为40px),large(输入框高度为50px)
*@value(type:String):外部配置输入框展示的值(一般用于设置初始默认值)
*/
export default {
    name: 'v-input',
    data() {
        return {
            // 实际 input 的值
            internalValue: ""
        };
    },
    props: {
        id: {
            type: String,
            default: "v-input-example"
        },
        width: {
            type: Number,
            default: 400
        },
        placeholder: {
            type: String
        },
        size: {
            type: String,
            default: "small"
        },
        clear: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        },
        value: ""
    },
    computed: {
        sizeClass() {
            return `v-input-${this.size}`;
        },
        isShowClear() {
            return this.internalValue !== '';
        }
    },
    methods: {
        clearContent() {
            this.internalValue = '';
        },
        inputCallFun(e){
            let value = e.currentTarget.value.trim();
            this.$emit('input-call-fun',value);
        }
    },
    created(){
        this.internalValue = this.value;
    },

    watch: {

        'internalValue'(newVal) {

            this.$emit('input', newVal);
        },
        'value'(newVal){
            this.internalValue = this.value;
        }

    }
}
</script>