<template>
  <div class="ChangeVk">
    <r-btn
      dense
      action
      :label="label"
      icon="pgs-refresh"
      @click="open"
      no-wrap
    />
    <operation-dialog v-model="opened" ref="dialog" :title="title">
      <!-- TODO создать компонент-обертку для Q-select способный при слишком широком popup 
      подстраиваться под максимальную ширину самого селекта
      сейчас он всегда будет шириной как сам селект, возможно это и норм, но надо сделать компонент-обертку -->
      <q-select
        v-model="selectedVk"
        :options="dataForSelect"
        option-label="name"
        option-value="id"
        emit-value
        map-options
        use-input
        @filter="filterFn"
        input-debounce="0"
        ref="select"
        @popup-show="selectWidth = $refs.select.$el.offsetWidth"
        :popup-content-style="`width: ${selectWidth}px; word-break: break-word;`"
      />
      <template #process>
        <upload-status
          status="pending"
          label="Производим процедуру смены военного комиссариата"
          :label-size="16"
        />
      </template>
      <template #result>
        <upload-status
          :status="!statusOperation ? 'error' : 'success'"
          :label="statusOperation ? 'Процесс завершен' : 'Процесс не завершен'"
          :label-size="16"
          success-label-color="black"
          success-icon="pgs-reply"
        />
      </template>
      <template #right-actions>
        <r-btn action label="Сохранить" @click="action" />
      </template>
      <template #right-actions-result>
        <r-btn
          action
          label="Закрыть"
          icon-right="pgs-shevron-right-off"
          @click="finish"
        />
      </template>
    </operation-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Ref } from 'vue-property-decorator';
import TaskButton from '@mixins/TaskButton';
import {
  MilitaryCommissariats,
  PersonRegistryApi,
  RecruitV4,
} from '@/recruits/openapi/person-registry';
import OperationDialog from '@components/common/operation-dialog/index.vue';

@Component({})
export default class ChangeVk extends Mixins(TaskButton) {
  RegistryApi = new PersonRegistryApi();

  @Prop({ default: () => '' })
  readonly title: string;

  @Prop()
  declare readonly model: RecruitV4;

  @Ref('dialog') operationDialog: OperationDialog;

  // переменная для хранения ширины окна q-select, чтобы ограничивать
  // открытое окно по такой же ширине
  selectWidth = 0;

  dataForSelect: MilitaryCommissariats[] = [];
  baseOptions: MilitaryCommissariats[] = [];
  opened = false;
  async open(): Promise<void> {
    this.opened = true;
    try {
      const { data } = await this.RegistryApi.getMilitaryCommissariats();
      this.dataForSelect = data;
      this.baseOptions = data;
    } catch (e) {
      console.log(e);
    }
  }

  selectedVk = '';
  filterFn(val: string, update: any): void {
    update(() => {
      const needle = val.toLowerCase();
      // eslint-disable-next-line array-callback-return
      this.dataForSelect = this.baseOptions.filter((v) => {
        if (v.name) {
          return v?.name.toLowerCase().indexOf(needle) > -1;
        }
      });
    });
  }

  statusOperation = false;

  async action(): Promise<void> {
    if (!this.selectedVk) return;
    try {
      this.operationDialog.toProcess();
      await this.RegistryApi.changeTargetVK({
        targetId: this.selectedVk,
        recruitId: this.model.id,
      });
      this.statusOperation = true;
    } catch (e) {
      this.statusOperation = false;
      console.log(e);
    } finally {
      this.operationDialog.toResult();
    }
  }

  finish(): void {
    this.$emit('done');
  }
}
</script>

<style lang="scss">
.ChangeVk {
  &-Error {
    display: flex;
    flex-direction: column;
    align-items: center;
    &__Icon {
      border-radius: 50%;
      background-color: rgba(254, 227, 231, 1);
      color: rgba(193, 5, 37, 1);
      font-size: 60px;
    }
    &__Text {
      font-family: 'Golos UI', sans-serif;
      font-size: 16px;
      color: rgba(157, 157, 161, 1);
    }
  }
  &-Success {
    display: flex;
    flex-direction: column;
    align-items: center;
    &__Icon {
      border-radius: 50%;
      background-color: rgba(227, 254, 250, 1);
      color: rgba(4, 150, 125, 1);
      font-size: 60px;
    }
    &__Text {
      font-family: 'Golos UI', sans-serif;
      font-size: 16px;
      color: rgba(157, 157, 161, 1);
    }
  }
}
</style>
