<!-- zj-uview-input V1.0.0.10218 -->
<template>
    <u-input class="input"  :type="realType" v-model="inputValue" :placeholder="placeholder" @input="onChange" :disabled="!editable" :input-align="'right'" :border="border || 'none'" :focus="false" disabledColor="" :auto-height="true" :color="editable ? (color ? color : '') : '#AAA'" />
</template>

<script>
    // import UInput from "./u-input.vue";
    export default {
        model: {
            prop: 'value',
            event: 'change',
        },
        components:{
            // UInput,
        },
        props: {
            placeholder: "",
            /** 这里不能用value代替default赋初值，因为爷爷组件有以下两种传递方式，父组件并未告知：
             * 第1种、爷爷通过表头(formHeader[x].value)传递给父；
             * 第2种，爷爷通过表单数据(v-model="formData")传递给父。当前组件不应判断是哪种传递方式
             * 注意：value也不能代替inputValue，因为value是props property是只读的，而v-model要求支持读写
             */
            value: "",
            range: false,
            type: '',
            editable: {
                type: Boolean,
                default: true
            },
            emitName: '',
            tip: '',
            colorType: '',
            color: '',
            border: {
                type: String,
                default: 'none', // surround | bottom | none
            },
        },
        created(){},
        data() {
            return {
                showSelect: false,
                inputValue: this.value,
            }
        },
        computed: {
            realType(){
                switch (this.type){
                    case 'password': return 'password'; break; 
                    case 'textarea': return 'textarea'; break; 
                    case 'number': return 'number'; break; 
                    case 'phone': return 'text'; break; 
                    case 'tel': return 'text'; break; 
                    default: return 'text';
                }
            },
        },
        methods: {
            onChange(e){
                this.$emit("update:value", this.inputValue);
                setTimeout(()=>{
                    this.$emit("change", this.inputValue);
                    if(this.emitName){
                        this.$emit("onEmit",{emitName: this.emitName, emitValue: this.inputValue});
                    }
                }, 40);
            }
        },
        watch:{
            //注意，这里的默认值对应父组件表头的value值，容易混乱
            value (val, old) {
                this.inputValue = val;
            }
        }
    }
</script>
<style>
    .unit{padding: 0 0 0 10rpx;}
</style>
