<template>
  <el-input
    class           = "mt-input"
    :class          = "border ? 'mt-input-border' : ''"
    @input          = "$emit('input', $event)"
    @change         = "$emit('change', $event)"
    @blur           = "handleBlur"
    @focus          = "handleFocus"
    :value          = 'value'
    :placeholder    = 'placeholder'
    :size           = 'size'
    :resize         = 'resize'
    :name           = 'name'
    :form           = 'form'
    :id             = 'id'
    :maxlength      = 'maxlength'
    :minlength      = 'minlength'
    :readonly       = 'readonly'
    :autofocus      = 'autofocus'
    :disabled       = 'disabled'
    :type           = 'localeShowType'
    :autosize       = 'autosize'
    :rows           = 'rows'
    :auto-complete  = 'autoComplete'
    :max            = 'max'
    :min            = 'min'
    :step           = 'step'
    :validate-event = 'validateEvent'
    :suffix-icon    = 'suffixIcon'
    :clearable      = 'clearable'
    :tabindex       = 'tabindex'>
  <template slot ="append">
    <mt-icon 
      v-if            = "showClear && value"
      @click.native   = "$emit('input', null)"
      icon            = "close" 
      size            = "15" 
      color           = "#fff"
      class           = "mt-input-clear-icon"></mt-icon>
    <mt-icon
      @click.native   = "showPwd = !showPwd"
      v-if            = 'componentType === "password"'
      :color          = "showPwd ? '#3094fa': '#cbcbcb'"
      :icon           = "showPwd ? 'eye' : 'eye-off'">
    </mt-icon>
    <slot name ="append"></slot>
  </template>
  <template slot ="prepend">
    <mt-icon
      v-if            = 'prefixIcon'
      :color          = "active? '#3094fa': '#cbcbcb'"
      :icon           = "prefixIcon">
    </mt-icon>
    <slot name ="prepend"></slot>
  </template>
  </el-input>
</template>
<script>
  export default {
    data () {
      return {
        showPwd: false,
        active: false
      }
    },
    computed: {
      localeShowType () {
        if (!this.componentType) {
          return this.type
        }
        if (this.componentType === 'password') {
          if (this.showPwd === false) {
            return 'password'
          }
          return 'text'
  
        }
      }
    },
    methods: {
      handleFocus (event) {
        this.active = true
        this.$el.setAttribute('active', 'true')
        this.$emit('focus', event)
      },
      handleBlur (event) {
        this.active = false
        this.$el.removeAttribute('active')
        this.$emit('blur', event)
      }
    },
    props: {
      border: Boolean,
      // 输入框类型
      componentType: String,
      value: [String, Number],
      placeholder: String,
      size: String,
      resize: String,
      name: String,
      form: String,
      id: String,
      maxlength: Number,
      minlength: Number,
      readonly: Boolean,
      autofocus: Boolean,
      disabled: Boolean,
      type: {
        type: String,
        default: 'text'
      },
      autosize: {
        type: [Boolean, Object],
        default: false
      },
      rows: {
        type: Number,
        default: 2
      },
      autoComplete: {
        type: String,
        default: 'off'
      },
      max: {},
      min: {},
      step: {},
      validateEvent: {
        type: Boolean,
        default: true
      },
      suffixIcon: String,
      prefixIcon: String,
      label: String,
      showClear: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      tabindex: String
    }
  }
</script>

<style lang="less">
.mt-input {
  &[active=true]:after{
    left: 0;
    width:100%
  }
  &.mt-input-border {
    transition: all .2s;
    padding:0 10px;
    box-sizing: border-box;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    .el-input-group__prepend .g_icons{
      display: block;
      width: 20px;
      text-align: center;
    }
    &[active=true]{
      border: 1px solid #3094fa;
      box-shadow: 0px 2px 10px #c6e3ff;
    }
    &:after, &:before{
      border: none;
    }
  }
  i.mt-input-clear-icon{
    margin-right: 10px;
    background:rgba(0,0,0,0.3);
    cursor: pointer;
    border-radius: 50%;
    &:hover{
      background:rgba(0,0,0,0.4);
      color:#3094fa;
    }
  }
  position: relative;
  
  &:before{
    content: '';
    left: 0;
    display: block;
    position: absolute;
    bottom: 0;
    width:100%;
    border-bottom: 1px solid #cbcbcb;
  }
  &:after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width:0;
    left: 50%;
    transition: .5s all;
    border-bottom: 1px solid #3094fa;
  }
  
  div{
    border: none
  }
  input{
    border: none;
  }
  /* clear element-ui style */
  .el-input-group__append,
  .el-input-group__prepend{
    padding:0px;
    button.el-button {
      margin: 0;
      background-color: #3094fa;
      color: #fff;
      font-size: 13px;
      border-color: 1px solid #cbcbcb;
    }
  }
  .el-input-group__prepend{
    background:none;
    color:#999;
  }
  .el-input-group__append{
    background:none;
    color:#999;
  }
}

.el-form-item.is-error{
  .mt-input { 
    &:before{
      border-bottom: 1px solid #ff4949;
    }
    &.mt-input-border {
      border:1px solid #ff4949;
      box-shadow: 0px 2px 10px #ffbfbf;
      .el-input-group__prepend .g_icons{
        color:#ff4949!important;
      }
      &:before{
        border:none;
      }
    }
  }
}
</style>
