<template lang="pug">
  .textarea-container
    textarea.textarea(:placeholder="placeholder" :maxlength="maxlength" v-model="value" :autofocus="autofocus && 'autofocus'" @input="updateValue" @blur="updateValue"
      :style="{color: textColor}")
    span.remind(v-if="maxlength") {{value.length + '/' + maxlength}}
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String
    },
    maxlength: {
      type: Number
    },
    initialValue: {
      type: String
    },
    autofocus: {
      type: Boolean
    },
    textColor: {
      type: String
    }
  },
  data() {
    return {
      value: this.initialValue
    };
  },
  methods: {
    updateValue(e) {
      this.$emit("updateValue", this.value);
    }
  }
};
</script>

<style scoped lang="less">
.textarea-container {
  position: relative;
  box-sizing: border-box;

  .textarea {
    width: 100%;
    height: 100%;
    padding: 8px;
    border: 0;
    border-radius: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
  }

  .remind {
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: #999;
    font-size: 12px;
  }
}
</style>
