<i18n>
{
  "en": {
    "BasicCard": {
      "receiveChannel": "Receive channel",
      "serviceDeliveryRegion": "Service delivery region",
      "organizationName": "Department name",
      "departmentName": "Department name",
      "registrationNumber": "Registration number",
      "applicationNumberInTheEPGU": "Application number in ES-Portal",
      "statusEPGU": "ES-Portal status",
      "innerStatus": "Status",
      "dateOfSubmissionOfDocuments": "Date of submission of documents",
      "registrationDate": "Registration date",
      "dueDate": "Maximum processing time",
      "okato": "Region code according to OKATO",
      "endOfProcessing": "End of processing",
      "applicantCategory": "Applicant category",
      "codeOKTMO": "Code OKTMO",
      "header": "Application information"
    }
  },
  "ru": {
    "BasicCard": {
      "receiveChannel": "Канал поступления",
      "serviceDeliveryRegion": "Регион оказания услуги",
      "organizationName": "Наименование ведомства",
      "departmentName": "Наименование подразделения",
      "registrationNumber": "Регистрационный номер",
      "applicationNumberInTheEPGU": "Номер заявления в ЛК ЕПГУ",
      "statusEPGU": "Статус заявления на ЕПГУ",
      "innerStatus": "Статус заявления",
      "dateOfSubmissionOfDocuments": "Дата подачи документов",
      "registrationDate": "Дата регистрации",
      "dueDate": "Максимальный срок предоставления",
      "okato": "Код региона по ОКАТО",
      "endOfProcessing": "Дата окончания обработки",
      "applicantCategory": "Категория заявителя",
      "codeOKTMO": "Код ОКТМО",
      "header": "Информация о заявлении"
    }
  }
}
</i18n>

<template>
  <div class="row q-pa-md justify-center" v-if="common.active === 'basic'">
    <div class="col-12 max-1280-width flex">
      <div class="header q-pr-xs">
        <span>{{ $t('BasicCard.header') }}</span>
      </div>
      <div class="values q-col-gutter-y-sm">
        <div class="row q-col-gutter-x-xs">
          <div class="col-4">
            <data-block :form-data="{ label: $t('BasicCard.receiveChannel') }">
              {{ get(model, 'common.chanel') || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>

          <div class="col-4">
            <data-block
              :form-data="{ label: $t('BasicCard.registrationNumber') }"
            >
              {{ get(model, 'common.regNumber') || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>

          <div class="col-4">
            <data-block
              :form-data="{ label: $t('BasicCard.applicationNumberInTheEPGU') }"
            >
              {{ get(model, 'common.orderId') || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>
        </div>
        <div class="row q-col-gutter-xs no-wrap">
          <div class="col-6">
            <data-block
              :form-data="{ label: $t('BasicCard.innerStatus') }"
              class="col-6"
            >
              <reference-book-item
                :dictionary="get(model, 'dictionaries.internal.dictionary')"
                name="description"
                :value="
                  get(model, 'system.status.internal') || '\xa0' /* &nbsp; */
                "
              />
              <template #badge>
                <div :key="createUUID()" v-for="button in buttons">
                  <component
                    :key="createUUID()"
                    :common="common"
                    :button-settings="button"
                    :model="model"
                    :user-task="userTask"
                    :is="components[button.componentPath]"
                    v-bind="button.componentProps"
                  />
                </div>
              </template>
            </data-block>
          </div>
          <div class="col-6">
            <data-block
              :form-data="{ label: $t('BasicCard.statusEPGU') }"
              class="col-6"
            >
              <reference-book-item
                :dictionary="get(model, 'dictionaries.external.dictionary')"
                name="name"
                :value="
                  get(model, 'system.status.external') || '\xa0' /* &nbsp; */
                "
              />
            </data-block>
          </div>
        </div>
        <div class="row">
          <data-block
            :form-data="{ label: $t('BasicCard.organizationName') }"
            class="col-12"
          >
            {{
              get(model, 'system.department.fullName') || '\xa0' /* &nbsp; */
            }}
          </data-block>
        </div>
        <div class="row">
          <data-block
            v-if="departmentVisible"
            :form-data="{ label: $t('BasicCard.departmentName') }"
            class="col-12"
          >
            {{
              get(model, 'system.currentDivision.fullName') ||
              '\xa0' /* &nbsp; */
            }}
          </data-block>
        </div>
        <div class="row q-col-gutter-x-xs">
          <div class="col-4">
            <data-block :form-data="{ label: $t('BasicCard.dateOfSubmissionOfDocuments') }">
              {{ get(model, 'system.startDate') || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>
          <div class="col-4">
            <data-block :form-data="{ label: $t('BasicCard.registrationDate') }">
              {{ convertDateFormatWithoutLocale(get(model, 'common.registrationDate')) || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>
          <div class="col-4">
            <data-block :form-data="{ label: $t('BasicCard.dueDate') }">
              {{ convertDateFormatWithoutLocale(get(model, 'common.dueDate')) || '\xa0' /* &nbsp; */ }}
            </data-block>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { convertDateFormatWithoutLocale } from '@utils/format-date';
import get from 'lodash/get';
import has from 'lodash/has';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { BaseCardCommon } from '@/interfaces';
import dataBlock from '@components/cards/statements/components/dataBlock.vue';
import { USER_SCOPES } from '@constants/entities/Scope';
import { v4 as getUUID } from 'uuid';

@Component({
  components: {
    dataBlock,
  },
  methods: {
    get,
    has,
    convertDateFormatWithoutLocale,
  },
})
export default class Basic extends Vue {
  @Prop() model: any;
  @Prop() common: BaseCardCommon;
  @Prop({}) private userTask?: any;

  get loading() {
    return !this.model;
  }

  get departmentVisible() {
    return (
      get(this.model, 'system.department.id') !==
      get(this.model, 'system.currentDivision.id')
    );
  }

  createUUID() {
    return getUUID();
  }

  components: Record<string, string> | null = null;

  get buttons() {
    return [
      {
        id: 'returnForRevision_info',
        props: {
          color: 'grey-8',
          icon: 'o_info',
          disable: false,
          loading: false,
          visible: get(this.model, 'system.status.comment', false),
        },
        scopes: [USER_SCOPES.SIGNED_SPECIALIST],
        tooltip: this.$t('statements.CommonCard.returnForRevisionComment'),
        componentPath: 'revision_comment',
        withoutActions: true,
        statusButton: true,
      },
    ];
  }

  fetchCards() {
    const componentsObj: Record<string, string> = {};
    this.buttons.forEach((button) => {
      const pathComponent = get(button, 'componentPath');
      if (!pathComponent || get(this.components, `${pathComponent}`)) {
        return;
      } // не выполняем загрузку, если нет pathComponent или уже загружено
      componentsObj[
        pathComponent
      ] = this.$GlobalComponentImporter.registerComponent(
        pathComponent,
        `cards/statements/`
      );
    });
    this.components = componentsObj;
  }

  created() {
    this.fetchCards();
  }
}
</script>

<style lang="scss" scoped>
.header {
  flex-basis: 30%;
  > span {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
  }
}

.values {
  flex-basis: 70%;
}
</style>
