<template>
  <div class="page">
    <div class="title">{{title}}</div>
    <div class="content">
        <el-input 
        v-model="cvalue" 
        :placeholder="placeholder"
        :clearable="clearable"
        :prefix-icon="prefixIcon"
        :suffix-icon="suffixIcon"
        :disable="disable"
        @blur="onblur"
        @focus="onfocus"
        @change="onChange"
        @input="oninput"
        @clear="onclear"
        @select="onselect"
        ></el-input>
    </div>
  </div>
</template>

<script>
export default {
    name: "HmElementInput",
    props: {
        /**
         * 标题
         */
        title:{
            type:String,
            default:'输入框：'
        },
        /**
         * 变量名
         * @v-model
         */
        cvalue: {
            type:String
        },
        /**
         * 提示信息
         */
        placeholder:{
            type:String,
            default:"提示文字"
        },
        /**
         * 是否可清空
         */
        clearable:{
            type:Boolean,
            default: false,
        },
        /**
         * 前缀图标
         */
        prefixIcon:{
            type:String,
        },
        /**
         * 后缀图标
         */
        suffixIcon:{
            type:String,
        },
        /**
         * 是否禁用
         */
        disable:{
            type:String,
            default:false
        }
    },
    watch:{
        cvalue(value) {
            this.cdvalue = value
            console.log("this.cvalue",value)
            this.$emit("getStr",value)
        }
    },
    data() {
        return {
            cdvalue:''
        }
    },
    created(){
        console.log(this.cvalue,"created")
    },
    updated(){
        console.log(this.cvalue)
    },
    methods: {
        onblur: function(e){
            this.$emit("blur",e)
        },
        onChange:function(e){
            this.$emit("change",e)
        },
        oninput:function(e){
            this.$emit("input",e)
        },
        onclear:function(e){
            this.$emit("clear",e)
        },
        onfocus:function(e){
            this.$emit("focus",e)
        },
        onselect:function(e){
            this.$emit("select",e)
        }
    }
}
</script>

<style scoped>
    .page{
        width: 100%;
        display:flex;
        align-items: center;
        padding-left:5vw;
    }
    .content{
        width:50%;
    }
</style>