<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>
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
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() {
      $emit(this, 'inputHandler', this.inputContent)
    },
    inputHandlerBlur() {
      $emit(this, 'inputHandlerBlur', this.inputContent)
    },
  },
  emits: ['inputHandler', 'inputHandlerBlur'],
}
</script>

<style lang="scss" scoped>
.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>
