<template>
  <div class="b-textarea-container">
    <textarea :rows="rows" :cols="cols" :disabled="disabled" :value="value" :required="required" :maxlength="max"
              :minlength="min"
              :placeholder="placeholder"
              class="b-textarea" name="bTextarea"
              id="value1" @input="changeVal"></textarea>
    <span v-if="wordStatus" class="b-textarea-textlen">{{ value.length }}/{{ max }}</span>
  </div>
</template>

<script>
export default {
  name: 'bTextarea',
  props: {
    /**
     * 绑定的值(双向绑定)
     * @param v-model
     */
    value: {
      type: String,
      default: () => ''
    },
    /**
     * 文本域行行数
     * @param rows
     */
    rows: {
      type: Number,
      default: () => '3'
    },
    /**
     * 文本域列列数
     * @param rows
     */
    cols: {
      type: Number,
      default: () => '3'
    },
    /**
     * input的提示信息
     * @param placeholder
     */
    placeholder: {
      type: [String, Number],
      default: () => ''
    },
    /**
     * 最大输入长度
     * @param max
     */
    max: {
      type: Number,
      default: () => 9999
    },
    /**
     * 最小输入长度
     * @param min
     */
    min: {
      type: Number,
      default: () => 1
    },
    /**
     * 内容是否必填
     * @param required
     */
    required: {
      type: Boolean,
      default: () => false
    },
    /**
     * 是否可编辑
     * @param disabled
     */
    disabled: {
      type: Boolean,
      default: () => false
    },
    /**
     * 是否开启内容统计
     * @param wordStatus
     */
    wordStatus: {
      type: Boolean,
      default: () => false
    }
  },
  methods: {
    changeVal (event) {
      this.$emit('change', event.target.value)
      this.$emit('input', event.target.value)
    }
  }
}
</script>
