<template>
  <div :class="[
    'app-input',
    { search: search },
    addClass,
    size,
  ]">
    <div v-if="search" class="app-input-search">
      <IconBase icon-name="loupe" :width="16" :height="16" :viewBox="'0 0 16 16'">
        <IconLoupe />
      </IconBase>
    </div>
    <input
      :class="[{ select: select }, { validated: validated },]"
      :placeholder="placeholder"
      @change="$emit('input', $event.target.value)"
      :value="value"
      :disabled="disabled"
      :readonly="readonly"
      ref="input"
      type="text"
    />
    <div v-if="validated" class="error-text">{{ error }}</div>
  </div>
</template>

<script>
import { IconBase, IconLoupe } from '../Icons/index'
export default {
  name: 'app-input',
  props: {
    select: {
      type: Boolean,
      default: false
    },
    selectAll: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    addClass: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: '',
      required: true,
    },
    validated: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'normal',
      validator: function (value) {
        return ['small', 'normal'].includes(value);
      }
    },
    error: {
      type: String,
      default: 'Поле не заполнено',
    },
  },
  components: {
    IconBase,
    IconLoupe
  },
  mounted() {
    if (this.focus) this.$refs.input.focus();
  },
  methods: {
    updateInput(value) {
      this.$emit("input", value);
    },
  }
}
</script>

<style lang="sass" scoped>

@import '../assets/_vars'
*
  box-sizing: border-box
.app-input
  position: relative
  &.validated
    border: 1px solid $red1
  &.search
    input
      padding-left: 40px
  &-search
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    left: 8px
    top: 0
    height: 40px
    width: 32px
  &.small
    input
      padding: 8px 16px
      height: 32px
  .app-icon-loupe
    color: $gray2
  input
    padding: 12px 15px
    width: 100%
    height: 40px
    background: white
    border: 1px solid $gray5
    border-radius: 4px
    color: $gray3
    &.validated
      border: 1px solid $red1
    &::placeholder
      color: $gray1
    &:focus, &:active
      outline: none
      border: 1px solid $gray3
    &.select
      border-radius: 0
      border: none
      border-bottom: 1px solid $gray5
    &:disabled
      background-color: $gray4
      color: $gray1
      pointer-events: none
  &.additional_number
    width: 104px
    display: inline-block
  .error-text
    padding: 4px 0 0
    font-size: 12px
    line-height: 16px
    color: $red1
</style>