<template>
  <div class="custom-textarea" :class="errTips ? 'err-border' : ''">
    <textarea v-model="inputContent" :placeholder="placeholderTxt" @input="inputHandler" @blur="inputHandlerBlur" :maxlength="maxlength" :rows="rows"></textarea>
    <div class="txt-wrap">{{computedNum}}/{{maxlength}}</div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        inputContent: ''
      }
    },
    props: {
      maxlength: {
        type: Number,
        default: 30
      },
      rows: {
        type: Number,
        default: 3
      },
      placeholderTxt: String,
      inputContentFrom: String,
      errTips: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      computedNum(){
        return this.inputContent.length
      }
    },
    mounted(){
      console.log('外部内容',this.inputContentFrom)
      if(this.inputContentFrom){
        this.inputContent = this.inputContentFrom;
      }
    },
    methods: {
      inputHandler(){
        this.$emit('inputHandler',this.inputContent)
      },
      inputHandlerBlur(){
        this.$emit('inputHandlerBlur',this.inputContent)
      }
    }
  }
</script>
<style scoped lang="scss">
  .custom-textarea{
    width: 60%;
    border: 1px solid #DCDFE6;
    padding: 5px 15px;
    border-radius: 4px;
    &.err-border{
      border-color: #F56C6C;
    }
  textarea{
    outline: none;
    color: #606266;
    resize: none;
    width: 100%;
  }
  ::-webkit-input-placeholder {
    color: #999;
  }
  .txt-wrap{
    line-height: 20px;
    text-align: right;
    color: #606266;
  }
  }
</style>
