<template>
  <div>
    <div class="flex items-center q-mb-sm" v-for="kbk, index in customKBK" :key="kbk.id">
      <q-select
        v-if="!kbk.isEdit"
        v-model="customKBK[index].value"
        :options="options"
        class="width60"
        dense
        filled
        :label="'Выберите КБК'"
        option-value="KBK"
        option-label="KBK"
        hide-bottom-space
      />
      <q-input
        v-else
        v-model="customKBK[index].value"
        class="width60"
        dense
        mask="####################"
        :rules="[exactNumberOfCharsRule(20)]"
        lazy-rules
        @blur="setValue"
        :label="'Введите КБК'"
        hide-bottom-space
      >
        <template v-slot:append>
          <q-icon v-if="kbk.value.trim().length === 20" name="check" color="positive" />
        </template>
      </q-input>
      <q-btn
        dense
        outline 
        padding="sm"
        size="sm"
        icon="edit"
        class="q-ml-sm"
        color="primary"
        @click="kbk.isEdit = !kbk.isEdit"
      >
        <q-tooltip :delay="500">
          {{ kbk.isEdit ? 'Выбрать КБК' : 'Изменить КБК'}}
        </q-tooltip>
      </q-btn>
      <q-btn
        v-if="customKBK.length > 1"
        dense
        outline 
        padding="sm"
        icon="delete"
        size="sm"
        class="q-ml-sm"
        color="red"
        @click="deleteKbkField(kbk.id)"
      >
        <q-tooltip :delay="500">Добавить КБК</q-tooltip>
      </q-btn>
      <q-btn
        v-if="index === customKBK.length - 1 && customKBK.length < 10"
        dense
        outline 
        padding="sm"
        icon="add"
        size="sm"
        class="q-ml-sm"
        color="primary"
        @click="createKbkField()"
      >
        <q-tooltip :delay="500">Добавить КБК</q-tooltip>
      </q-btn>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { v4 } from 'uuid';

type kbkItem = {
  id: string;
  value: string;
  isEdit: boolean;
};

@Component({})
export default class KbkInput extends Vue {
  @Prop() options: [];
  private customKBK: kbkItem[] = [{ id: v4(), value: '', isEdit: false }];

  createKbkField(): void {
    this.customKBK.push({ id: v4(), value: '', isEdit: false });
  }

  deleteKbkField(id: string): void {
    this.customKBK = this.customKBK.filter(el => el.id !== id);
  }

  setValue(): void {
    const reducedValue = this.customKBK.filter(el => el.value);
    reducedValue.length &&
      this.$emit(
        'kbkValue',
        reducedValue.map((el) => el.value)
      );
  }

  exactNumberOfCharsRule(numberOfChars: number) {
    return (val: string) => {
      return (
        !val ||
        val.trim().length === numberOfChars ||
        this.$i18n.t('validation.basic.exactNumOfChars', {
          num: numberOfChars,
        })
      );
    }
  }

  @Watch('customKBK', { deep: true, immediate: true })
  setKbk(val: kbkItem[]): void {
    if (val?.length) {
      this.setValue();
    }
  }
}
</script>