<template>
  <div v-if="common.active === 'basic' && !loadingCard" class="q-pb-md">
    <q-card class="no-shadow q-gutter-y-md q-mx-md no-border-radius">
      <div
        v-if="basicModel"
        class="q-gutter-y-md bg-white q-px-lg q-pb-md q-pt-sm q-mt-md q-mx-md rounded-borders"
      >
        <div
          class="items-center justify-between q-mb-md row"
          style="border-radius: 0"
        >
          <div class="text-h6">
            {{ $t('services.BasicCard.title') }}
          </div>
          <div class="gt-xs" v-if="canEdit">
            <q-btn
              v-if="basicModel.state === 'inProgress'"
              :color="editMode ? 'white' : 'primary'"
              :text-color="editMode ? 'primary' : 'white'"
              :outline="editMode"
              icon="edit"
              class="q-ml-auto"
              :label="
                editMode
                  ? $t('services.BasicCard.btnPreview')
                  : $t('services.BasicCard.btnEdit')
              "
              @click="toggleEditMode"
            >
            </q-btn>
          </div>
        </div>
        <div>
          <div v-if="editMode">
            <ServicesBasicEditCard :common="common" :model="basicModel" />
          </div>
          <div v-else class="col text-primary q-pt-md q-mb-lg">
            <div class="q-gutter-y-md">
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.id') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'id') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.notificationEmail') }}
                </template>
                <template #value>
                  {{ notificationEmails }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.fullName') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'fullName') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.shortName') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'shortName') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.code') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'name') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.petitionType') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'petitionType') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.targetId') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'targetId') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.epguFromTag') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'epguFromTag') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.epguToTag') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'epguToTag') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.numberPrefix') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'numberPrefix') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.state') }}
                </template>
                <template #value>
                  {{
                    basicModel.state
                      ? $t(`services.ServiceCart.${basicModel.state}`)
                      : 'В работе'
                  }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.fullName') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'authority.fullName') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.ogrn') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'authority.ogrn') }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.servicePresentation') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'servicePresentation') }}
                </template>
              </base-label-value>
              <base-label-value v-if="basicModel.legalActs" :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.legalActs') }}
                </template>
                <template #value>
                  <span
                    v-for="(item, i) in basicModel.legalActs"
                    :key="`legalActs-${i}`"
                  >
                    <p>- {{ item.value }}</p>
                  </span>
                </template>
              </base-label-value>
              <base-label-value
                v-if="basicModel.healthStatus"
                :loading="loading"
              >
                <template #label>
                  {{ $t('services.BasicCard.healthStatus') }}
                </template>
                <template #value>
                  <span
                    v-for="(item, i) in basicModel.healthStatus"
                    :key="`healthStatus-${i}`"
                  >
                    <p>- {{ item.value }}</p>
                  </span>
                </template>
              </base-label-value>
              <base-label-value
                v-if="basicModel.healthStatus"
                :loading="loading"
              >
                <template #label>
                  {{ $t('services.BasicCard.scope') }}
                </template>
                <template #value>
                  <span
                    v-for="(item, i) in basicModel.scope"
                    :key="`scope-${i}`"
                  >
                    <p>- {{ item.value }}</p>
                  </span>
                </template>
              </base-label-value>

              <base-label-value
                v-if="basicModel.checkListIsMandatory !== undefined"
                :loading="loading"
              >
                <template #label>
                  {{ $t('services.BasicCard.checkListIsMandatory') }}
                </template>
                <template #value>
                  {{ get(basicModel, 'checkListIsMandatory') ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ 'Ключ sdd' }}
                </template>
                <template #value>
                  {{ get(basicModel, 'hasSDD') ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <div v-if="get(basicModel, 'hasSDD')" class="text-grey-9">
                {{ `${$t('services.BasicCard.incomeConfigurationLocation')} ${$t('services.Income.tab')} `}}
              </div>
              <base-label-value :loading="loading">
                <template #label>
                  {{ 'Статус 7 обязателен' }}
                </template>
                <template #value>
                  {{ get(basicModel, 'status7Obligatory') ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ 'Статус 14 обязателен' }}
                </template>
                <template #value>
                  {{ get(basicModel, 'status14Obligatory') ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ 'Включение в очный прием' }}
                </template>
                <template #value>
                  {{ get(basicModel, 'includeReception') ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value v-if="showGoalsList" :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.goalsList') }}
                </template>
                <template #value>
                  <ServicesBasicItemsList
                    :header-label="$t('services.ServicesBasicGoalsList.header')"
                    :column-value-label="
                      $t('services.ServicesBasicGoalsList.column.value')
                    "
                    :column-label-label="
                      $t('services.ServicesBasicGoalsList.column.label')
                    "
                    :button-add-label="
                      $t('services.ServicesBasicGoalsList.btn.add')
                    "
                    :validation-label="
                      $t('services.ServicesBasicGoalsList.validation.label')
                    "
                    :validation-value-label="
                      $t('services.ServicesBasicGoalsList.validation.value')
                    "
                    :edit-mode="editMode"
                    :items.sync="basicModel.goalsList"
                  />
                </template>
              </base-label-value>
              <base-label-value v-if="showSubjectsList" :loading="loading">
                <template #label>
                  {{ $t('services.BasicCard.subjectsList') }}
                </template>
                <template #value>
                  <ServicesBasicItemsList
                    :header-label="
                      $t('services.ServicesBasicSubjectsList.header')
                    "
                    :column-value-label="
                      $t('services.ServicesBasicSubjectsList.column.value')
                    "
                    :column-label-label="
                      $t('services.ServicesBasicSubjectsList.column.label')
                    "
                    :button-add-label="
                      $t('services.ServicesBasicSubjectsList.btn.add')
                    "
                    :validation-label="
                      $t('services.ServicesBasicSubjectsList.validation.label')
                    "
                    :validation-value-label="
                      $t('services.ServicesBasicSubjectsList.validation.value')
                    "
                    :edit-mode="editMode"
                    :items.sync="basicModel.subjectsList"
                  />
                </template>
              </base-label-value>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import ServicesBasicItemsList from '@components/cards/services/components/ServicesBasicItemsList.vue';
import type { ExtendedService } from './types/services-types';
import { BaseCardCommon } from '@/interfaces';
import ServicesBasicEditCard from '@components/cards/services/BasicEdit.vue';

@Component({
  components: {
    ServicesBasicItemsList,
    ServicesBasicEditCard,
  },
  methods: {
    get,
  },
})
export default class ServicesBasicCard extends Vue {
  @Prop() common: BaseCardCommon;

  loading = false;
  editMode = false;

  toggleEditMode(): void {
    this.editMode = !this.editMode;
  }

  get loadingCard(): boolean {
    return (
      this.$store.getters['registryService/services/servicesLoading'] || false
    );
  }

  get basicModel(): ExtendedService {
    return cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
  }

  private get showGoalsList(): boolean {
    return Boolean(
      this.editMode || (this.basicModel && this.basicModel.goalsList)
    );
  }

  private get showSubjectsList(): boolean {
    return Boolean(
      this.editMode || (this.basicModel && this.basicModel.subjectsList)
    );
  }

  get canEdit(): boolean {
    return this.$store.getters['registryService/services/canEdit'];
  }

  get notificationEmails(): string {
    const emails = get(this.basicModel, 'notificationEmails');
    return !emails?.length ? '' : emails.join(', ')
  }
}
</script>
