<template>
  <div class="e-textarea" :class="[{ 'e-textarea--disabled': disabled }]">
    <div class="e-textarea__box">
      <textarea
        v-model="textData"
        @focus="onFocus"
        @blur="onBlur"
        :disabled="disabled"
        :placeholder="placeholder"
        :maxlength="maxlength"
      ></textarea>
    </div>
    <div class="e-textarea__text" v-if="isNum&&maxlength" >
      <span><font class="e-textarea__text--num" :class="[{ 'e-textarea__text--red':textData.length==maxlength }]">{{textData.length}}</font>/{{ maxlength }}</span>
    </div>
  </div>
</template>
<script>
  export default{
    name:'emmm-textarea',
    props:{
      disabled:{
        type: Boolean,
        default: false
      },
      placeholder:{
        type: String,
        default:null
      },
      maxlength:{
        type: Number,
        default:null
      },
      isNum:{
        type: Boolean,
        default:true
      },
      value:{
        type: String,
        default: null
      }
    },
    data(){
      return {
          textData:''
      }
    },
    watch: {
      value (val) {
        this.currentValue = val
      },
      textData(val) {
        this.$emit('input',val);
        this.$emit('length',val.length);
      }
    },
    methods:{
      onFocus(){
        this.$emit('focus')
      },
      //失去焦点，将value重置
      onBlur(event){
        this.$emit('blur', event.target.value)
      }
    }
  }
</script>
<style>
@import './textarea.css';
</style>
