<template>
  <div class="e-input" :class="[{ 'e-input--disabled': disabled }]">
    <input
    ref="input"
    v-if="type==='text'"
    v-model="currentValue"
    type="text"
    :disabled="disabled"
    :placeholder="placeholder"
    :size="size"
    :maxlength="maxlength"
    @focus="onFocus"
    @blur="onBlur"
    />
    <input
    ref="input"
    v-if="type==='search'"
    v-model="currentValue"
    type="search"
    :disabled="disabled"
    :placeholder="placeholder"
    :size="size"
    :maxlength="maxlength"
    @focus="onFocus"
    @blur="onBlur"
    />
    <input
    ref="input"
    v-if="type==='password'"
    v-model="currentValue"
    type="password"
    :disabled="disabled"
    :placeholder="placeholder"
    :size="size"
    :maxlength="maxlength"
    @focus="onFocus"
    @blur="onBlur"
    />
  </div>
</template>
<script>
  export default {
    name:'emmm-input',
    data () {
      return {
        currentValue: this.value
      }
    },
    props:{
      type:{
        type: String,
        default:'text'
      },
      disabled:{
        type: Boolean,
        default: false
      },
      placeholder:{
        type: String,
        default: null
      },
      value: {
        type: [String, Number],
        default: null
      },
      maxlength:{
        type: Number,
        default: null
      },
      size:{
        type: String,
        default: null
      }
    },
    watch: {
      value (val) {
        this.currentValue = val
      },
      currentValue (val) {
        this.$emit('input', val)
      }
    },
    methods:{
      //获取焦点
      onFocus(){
        this.$emit('focus')
      },
      //失去焦点，将value重置
      onBlur(event){
        this.$emit('blur', event.target.value)
      }
    }
  }
</script>
<style>
 @import './input.css';
</style>
