<template>
  <q-card class="UpdateTrackNumber no-right-border-radius">
    <q-card-section class="UpdateTrackNumber-Content">
      <p class="text-h5 UpdateTrackNumber-Header">Изменение трек номера</p>
      <div class="loader" v-if="loader">
        <q-spinner-oval size="10em" color="primary" />
      </div>
      <div class="UpdateTrackNumber-Success" v-if="success">
        <q-icon class="UpdateTrackNumber-Success__Icon" name="pgs-ok" />
        <span class="UpdateTrackNumber-Success__Text">
          Успешное изменение трек номера
        </span>
      </div>
      <q-card-section v-if="!loader && !success">
        <div class="q-mt-md">
          <r-input
            class="SearchBar-Line__Element"
            label="Трек номер"
            v-model="trackNumber"
          />
        </div>
      </q-card-section>
    </q-card-section>
    <q-card-actions class="UpdateTrackNumber-Actions">
      <r-btn
        v-if="success"
        outline
        label="Закрыть"
        icon="pgs-close"
        color="primary"
        v-close-popup
      />
      <r-btn
        v-if="!success"
        outline
        label="Отмена"
        icon="pgs-close"
        color="primary"
        v-close-popup
      />
      <q-btn
        v-if="!success"
        :disable="!currentTrackNumber"
        label="Отправить"
        icon="pgs-sign-2"
        class="redesigned-action-btn button-text"
        @click="updateTrackNumber"
      />
    </q-card-actions>
  </q-card>
</template>

<style lang="scss" scoped>
.loader {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.UpdateTrackNumber {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &-Content {
    padding: 5px;
  }
  &-Header {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
    margin-bottom: 28px;
  }
  &-Actions {
    background: rgba(15, 32, 160, 0.08);
    display: flex;
    justify-content: space-between;
    padding: 5px;
  }
  &-Success {
    margin-top: 100px;
    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>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { SubpoenaRegistryApi } from '@/recruits/openapi/subpoena-service';
import { notifyError } from '@utils/notify';

import RInput from '@/recruits/components/common/r-input.vue';

@Component({
  components: {
    RInput,
  },
})
export default class UpdateTrackNumber extends Vue {
  @Prop({ default: '' }) trackNumberPostalItem: string;
  SubpoenaRegistryApi = new SubpoenaRegistryApi();

  loader = false;
  success = false;

  public readonly subpoenaId: string = this.$route.params.id;

  trackNumber = ''; // трек номер

  // Подтягиваем если есть текущий трек номер
  mounted(): void {
    this.trackNumber = this.trackNumberPostalItem;
  }

  // функция проверки трек номера
  get currentTrackNumber(): boolean {
    return !!this.trackNumber.length;
  }

  // функция обновления трек номера
  async updateTrackNumber(): Promise<void> {
    this.loader = true;
    try {
      await this.SubpoenaRegistryApi.addSubpoenaInfo(this.subpoenaId, {
        trackNumberPostalItem: this.trackNumber,
      });
      this.loader = false;
      this.$emit('onReload');
    } catch (err) {
      this.loader = false;
      if (err instanceof Error) notifyError(err.message);
    }
  }
}
</script>
