<template>
  <div :class="['app-textarea', addClass]">
    <textarea
      @change="$emit('input', $event.target.value)"
      :rows="rows"
      :cols="cols"
      :placeholder="placeholder"
      :value="value"
      :disabled="disabled"
      ref="textarea"
    ></textarea>
    <div v-if="validated" class="error-text">{{ error }}</div>
  </div>
</template>

<script>
export default {
  name: 'app-textarea',
  props: {
    focus: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rows: {
      type: String,
      default: '2'
    },
    cols: {
      type: String,
      default: '2'
    },
    placeholder: {
      type: String,
      default: ''
    },
    addClass: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      required: true,
    },
    validated: {
      type: Boolean,
      default: false
    },
    error: {
      type: String,
      default: 'Поле не заполнено',
    },
  },
  mounted() {
    if (this.focus) this.$refs.textarea.focus();
  },
}
</script>

<style lang="sass" scoped>

@import '../../assets/_vars'
*
  box-sizing: border-box
.app-textarea
  position: relative
  textarea
    padding: 12px 15px
    width: 100%
    min-height: 56px
    background: white
    border: 1px solid $gray5
    border-radius: 4px
    color: $gray3
    font-family: "Roboto", sans-serif 
    font-size: 14px
    line-height: 16px
    letter-spacing: 0.1px
    &::placeholder
      color: $gray1
    &:focus, &:active
      outline: none
      border: 1px solid $gray3
    &.select
      border-radius: 0
      border: none
      border-bottom: 1px solid #CFD8DC
    &:disabled
      background-color: $gray4
      color: $gray1
      pointer-events: none
  .error-text
    padding: 4px 0 0
    font-size: 12px
    line-height: 16px
    color: $red1
</style>