<template>
  <div class="x-textarea">
    <textarea class="x-textarea-main"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :rows="rows"
      :cols="cols"
      :maxlength="max"
      :placeholder="placeholder"
      @blur="$emit('on-blur')"
      @focus="$emit('on-focus')"
      v-model="currentValue"
    ></textarea>
    <div class="x-textarea-counter">
      <span>{{ count }}</span>/{{max}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rows: {
      type: Number,
      default: 3
    },
    cols: {
      type: Number,
      default: 30
    },
    max: Number,
    placeholder: String,
    autocomplete: {
      type: String,
      default: 'off'
    },
    autocapitalize: {
      type: String,
      default: 'off'
    },
    autocorrect: {
      type: String,
      default: 'off'
    },
    spellcheck: {
      type: String,
      default: 'false'
    }
  },
  data() {
    return {
      currentValue: ''
    }
  },
  computed: {
    count() {
      let len = 0
      if(this.currentValue) {
        len = this.currentValue.length
      }
      return len > this.max ? this.max : len
    }
  },
  watch: {
    currentValue (newVal) {
      if (this.max && newVal && newVal.length > this.max) {
        this.currentValue = newVal.slice(0, this.max)
      }
      this.$emit('input', this.currentValue)
    }
  }
}
</script>

<style lang="less">
.x-textarea {
  padding: 15px;

  &-main {
    display: block;
    border: 0;
    resize: none;
    width: 100%;
    height: 175px;
    line-height: inherit;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    outline: 0;
    color: #333333;
  }

  &-counter {
    text-align: right;
    font-size: 13px;
    color: #B2B2B2;
  }
}
</style>
