<template>
  <el-input
    v-model="textAreaVal"
    type="textarea"
    rows="3"
    :placeholder="placeholder"
    :disabled="disabled"
    :maxlength="maxLength"
    show-word-limit
    @input="handleInput"
    @change="handleChange"
    @blur="handleBlur"
    @focus="handleFocus"
  />
</template>
<script>
export default {
  name: 'RcInput',
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: String,
    disabled: Boolean,
    maxLength: {
      type: Number,
      default() {
        return 300
      }
    }
  },
  data() {
    return {
      textAreaVal: this.value
    }
  },
  computed: {},
  watch: {
    value(newVal) {
      this.textAreaVal = newVal
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e)
    },
    handleInput(e) {
      this.$emit('input', e)
    },
    handleBlur(e) {
      this.$emit('blur', e)
    },
    handleFocus(e) {
      this.$emit('focus', e)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .el-textarea
    width 400px
</style>