<template>
  <div class="List">
    <div class="ListHeader">
      <div class="ListHeader__Info">
        <div class="ListHeader__InfoBlock">
          <q-btn
            class="ListHeader__InfoBlock ListHeader__InfoBlock_BackButton"
            icon="pgs-arrow-left"
            dense
            size="sm"
            @click="returnToParentViews('call-lists')"
          />
        </div>
        <div class="ListHeader__InfoBlock ListHeader__InfoBlock_Number">
          №{{ get(data, 'listInfo.number', '...') }}
        </div>
        <div class="ListHeader__InfoBlock ListHeader__InfoBlock_StatusBlock">
          <status-box
            :loading="loading"
            type="callLists"
            :status="get(data, 'listInfo.status', '')"
          />
          <div class="ListHeader__InfoBlock ListHeader__InfoBlock_Date">
            <span class="ListHeader__InfoBlock ListHeader__InfoBlock_DateTitle"
              >Дата формирования списка</span
            >
            <span
              class="ListHeader__InfoBlock ListHeader__InfoBlock_DateValue"
              v-if="loading || get(data, 'listInfo.createDate')"
            >
              <q-icon name="pgs-calendar" size="16px" />
              <q-skeleton v-if="loading" type="text" />
              <template v-else>
                {{ formatDate(get(data, 'listInfo.createDate', '')) }}
              </template>
            </span>
            <span v-else>-</span>
          </div>
          <div class="ListHeader__TextMessage" v-if="showCompareSingMessage">
            <div class="ListHeader__TextMessageBlock">
              <q-icon name="pgs-warning" size="30px" />
              <div>
                Подписание списка недоступно. Имеются граждане, не ожидающие
                подписания
              </div>
            </div>
          </div>
          <div
            class="ListHeader__TextMessage"
            v-if="showCompareSendRegistrationMessage"
          >
            <div class="ListHeader__TextMessageBlock">
              <q-icon name="pgs-warning" size="30px" />
              <div>
                Направление повесток недоступно. Имеются граждане, не ожидающие
                направления
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ListHeader__ListTitle">
        <template v-if="get(data, 'listInfo.summonObjective')">
          {{ options[data.listInfo.summonObjective] || '-' }}
        </template>
        <template v-else>-</template>
      </div>
    </div>
    <div class="ListButtons">
      <list-buttons
        :selected="selected"
        :data="data"
        :loading="loading"
        @on-reload="onReload"
      />
    </div>
  </div>
</template>

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

import ReturnToParentView from '@mixins/ReturnToParentView';
import { formatDate, extractNameFromS3Url } from '@/recruits/utils';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';
import get from 'lodash/get';
import { ListSearchResponseV2 } from '@/recruits/openapi/summon-list-service';
import ListButtons from '@/recruits/components/call-list/listButtons.vue';

@Component({
  components: {
    StatusBox,
    ListButtons,
  },
  methods: {
    formatDate,
    fetchDocumentAttachment,
    get,
  },
})
export default class Header extends Mixins(ReturnToParentView) {
  @Prop({}) private loading: boolean;
  @Prop({}) private data: ListSearchResponseV2;
  @Prop({ default: () => [] }) selected: string[];

  get options(): string {
    return (
      this.$store.getters[
        'ervuDictionaries/militaryRegistrationUpdatingGoalsDictionary'
      ] || []
    );
  }

  get showCompareSingMessage() {
    if (this.data?.data?.length && this.data?.listInfo?.status === '2') {
      return (
        (this.data?.data?.filter((recruit) => recruit.status === '3.7'))
          .length !== this.data?.data?.length
      );
    } else {
      return false;
    }
  }

  get showCompareSendRegistrationMessage() {
    if (this.data?.data?.length && this.data?.listInfo?.status === '3') {
      return (
        (this.data?.data?.filter((recruit) => recruit.status === '3.14'))
          .length !== this.data?.data?.length
      );
    } else {
      return false;
    }
  }

  onReload() {
    this.$emit('on-reload');
  }

  // public onDownload(): void {
  //   if (this.data.file && this.data.file.s3url) {
  //     const { s3url, s3Name } = this.data.file;
  //     if (!s3Name) {
  //       this.data.file.s3Name = extractNameFromS3Url(s3url);
  //     }
  //     fetchDocumentAttachment(this.data.file, 'download', 's3Name', 's3Url');
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.List {
  width: 100%;
  gap: 1em;
  display: flex;
  flex-wrap: nowrap;
}
.ListHeader {
  display: flex;
  justify-content: flex-start;
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  min-height: 100px;
  flex-direction: column;
  padding: 8px 0;
  width: 75%;
  gap: 1em;
  margin-left: 4px;
  &__Info {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
  }
  &__InfoBlock {
    display: flex;
    padding: 0 8px 0 8px;
    align-items: center;
    &_BackButton {
      padding: 0 4px;
      border: 1px solid rgba(1, 72, 116, 0.18) !important;
      border-radius: 24px !important;
      color: #1491cf !important;
    }
    &_Number {
      flex: 0 1 auto;
      color: rgba(2, 12, 18, 0.58);
      font-size: 28px;
      font-style: normal;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -0.56px;
    }
    &_StatusBlock {
      display: grid;
      grid-template-columns: 0.4fr 0.4fr 0.4fr;
      padding: 0;
      gap: 1em;
      min-width: 650px;
      min-height: 30px;
      height: 50px;
    }
    &_Date {
      flex-direction: column;
      align-items: flex-start;
    }

    &_DateTitle {
      color: rgba(2, 12, 18, 0.58);
      font-weight: 400;
      line-height: 14px;
    }
    &_DateValue {
      font-weight: 500;
      line-height: 16px;
    }
  }
  &__TextMessage {
    color: rgba(2, 12, 18, 0.58);
    font-weight: 400;
    line-height: 14px;
    font-size: 12px;
  }
  &__TextMessageBlock {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.5em;
    align-items: center;
  }
  &__ListTitle {
    flex: 0 1 auto;
    color: rgba(2, 12, 18, 0.9);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.56px;
    max-width: 100%;
    padding: 0 8px;
  }
}
.ListButtons {
  display: flex;
  width: 25%;
  align-items: center;
  justify-content: flex-end;
}
</style>
