<template>
  <div v-if="common.active === 'basic'" class="q-pb-md">
    <q-card class="no-shadow q-gutter-y-md q-mx-md no-border-radius">
      <div
        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>
          <q-btn
            v-if="
              basicModel.state === 'IN_PROCESS' &&
              $AC.haveOneOfScope([
                USER_SCOPES.SOCIAL_SETTINGS_GENERAL_ADMIN,
                USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_ADMIN,
                USER_SCOPES.SOCIAL_SETTINGS_PRO_ACTIVE_ADMIN,
              ])
            "
            :color="editMode ? 'white' : 'primary'"
            :text-color="editMode ? 'primary' : 'white'"
            :outline="editMode"
            class="q-mr-md"
            :label="
              editMode
                ? $t('services.BasicCard.btnPreview')
                : $t('services.BasicCard.btnEdit')
            "
            type="button"
            icon="create"
            @click="editMode = !editMode"
          />
        </div>
        <div v-if="editMode">
          <BasicEditCard :common="common" :model="basicModel" />
        </div>
        <div v-else>
          <div 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.BasicCard.shortName') }}
                </template>
                <template #value>
                  {{ basicModel.shortName }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.fullName') }}
                </template>
                <template #value>
                  {{ basicModel.fullName }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.targetId') }}
                </template>
                <template #value>
                  {{ basicModel.targetId }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('services.ServiceCart.petitionType') }}
                </template>
                <template #value>
                  {{ basicModel.petitionType || '-' }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('additionalSettings.serviceId') }}
                </template>
                <template #value>
                  {{ serviceIdName }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('additionalSettings.socialSupportMeasure') }}
                </template>
                <template #value>
                  {{ socialSupportMeasure }}
                </template>
              </base-label-value>
              <base-label-value :loading="loading">
                <template #label>
                  {{ $t('additionalSettings.registrySolutions') }}
                </template>
                <template #value>
                  {{ registryIdName }}
                </template>
              </base-label-value>
              <base-label-value
                v-if="
                  $AC.haveOneOfScope([
                    USER_SCOPES.SOCIAL_SETTINGS_PRO_ACTIVE_VIEWER,
                    USER_SCOPES.SOCIAL_SETTINGS_PRO_ACTIVE_ADMIN,
                  ])
                "
                :loading="loading"
              >
                <template #label>
                  {{ $t('additionalSettings.proactiveSettings') }}
                </template>
                <template #value>
                  {{ basicModel.proActive ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value
                v-if="
                  $AC.haveOneOfScope([
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_VIEWER,
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_ADMIN,
                  ])
                "
                :loading="loading"
              >
                <template #label>
                  {{ $t('additionalSettings.payoutSettings') }}
                </template>
                <template #value>
                  {{ basicModel.paymentSettings ? 'Да' : 'Нет' }}
                </template>
              </base-label-value>
              <base-label-value
                v-if="
                  $AC.haveOneOfScope([
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_VIEWER,
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_ADMIN,
                  ])
                "
                :loading="loading"
              >
                <template #label>
                  {{ $t('additionalSettings.goalsPayments') }}
                </template>
                <template #value>
                  <q-markup-table bordered>
                    <thead>
                      <tr>
                        <th class="text-left">
                          {{
                            $t('services.ServicesBasicGoalsList.column.value')
                          }}
                        </th>
                        <th class="text-left">
                          {{
                            $t('services.ServicesBasicGoalsList.column.label')
                          }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item of basicModel.goals" :key="item.value">
                        <td class="text-left">{{ item.value }}</td>
                        <td class="text-left">{{ item.label }}</td>
                      </tr>
                    </tbody>
                  </q-markup-table>
                </template>
              </base-label-value>

              <div
                v-if="
                  $AC.haveOneOfScope([
                    USER_SCOPES.SOCIAL_SETTINGS_PRO_ACTIVE_VIEWER,
                    USER_SCOPES.SOCIAL_SETTINGS_PRO_ACTIVE_ADMIN,
                  ])
                "
              >
                <span class="text-h6">Данные для уведомлений ЕПГУ</span>
                <base-label-value
                  v-if="basicModel.guidEPGUtemplate"
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label>GUID шаблона ЕПГУ</template>
                  <template #value>
                    {{ basicModel.guidEPGUtemplate }}
                  </template>
                </base-label-value>
                <base-label-value
                  v-if="basicModel.guidEPGUheader"
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label>Заголовок уведомления ЕПГУ</template>
                  <template #value>
                    {{ basicModel.guidEPGUheader }}
                  </template>
                </base-label-value>
                <base-label-value
                  v-if="
                    basicModel.resendingPeriod ||
                    Number.isInteger(basicModel.resendingPeriod)
                  "
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label>
                    Период автоматической переотправки заявления(дни)
                  </template>
                  <template #value>
                    {{ basicModel.resendingPeriod }}
                  </template>
                </base-label-value>
                <base-label-value
                  v-if="
                    basicModel.allowedResendingPeriod ||
                    Number.isInteger(basicModel.allowedResendingPeriod)
                  "
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label>
                    Период разрешенной переотправки заявления(дни)
                  </template>
                  <template #value>
                    {{ basicModel.allowedResendingPeriod }}
                  </template>
                </base-label-value>
              </div>

              <div
                v-if="
                  $AC.haveOneOfScope([
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_VIEWER,
                    USER_SCOPES.SOCIAL_SETTINGS_PAYMENT_ADMIN,
                  ])
                "
              >
                <span class="text-h6">Настройки выплат</span>
                <base-label-value :loading="loading" class="q-mt-md">
                  <template #label> Требует отправки в ЕГИССО </template>
                  <template #value>
                    {{ basicModel.requiresEGISSO ? 'Да' : 'Нет' }}
                  </template>
                </base-label-value>
                <base-label-value
                  v-if="basicModel.paymentType"
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label> Тип выплаты </template>
                  <template #value>
                    {{ basicModel.paymentType }}
                  </template>
                </base-label-value>
                <base-label-value
                  v-if="basicModel.paymentPeriod"
                  :loading="loading"
                  class="q-mt-md"
                >
                  <template #label> Период выплаты </template>
                  <template #value>
                    {{ basicModel.paymentPeriod }}
                  </template>
                </base-label-value>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script lang="js">
import BasicEditCard from './BasicEditCard.vue';
import { USER_SCOPES } from '@constants/entities/Scope';
import cloneDeep from 'lodash/cloneDeep';

export default {
  components: {
    BasicEditCard,
  },
  props: ['common'],
  data() {
    return {
      USER_SCOPES: USER_SCOPES,
      loading: false,
      editMode: false,
      paymentType: '-',
      paymentPeriod: '-'
    }
  },
  computed: {
    basicModel() {
      return cloneDeep(
        this.$store.getters['registryService/additionalSettings/settingsForServiceCard']
      );
    },
    serviceIdName() {
      return this.$store.getters['registryService/additionalSettings/setServiceIdName'].fullName || '-'
    },
    socialSupportMeasure() {
      return this.$store.getters['registryService/additionalSettings/setsocialSupportMeasure'].name || '-'
    },
    registryIdName() {
      return this.$store.getters['registryService/additionalSettings/setRegistryIdName'].name || '-'
    },
  },
  async mounted() {
    await this.$store.dispatch('registryService/additionalSettings/getSettingsDictionary', 'DictPaymentTypeForSettingForService')
      .then(() => {
        const paymentTypes = this.$store.getters['registryService/additionalSettings/setSettingsDictionary'].DictPaymentTypeForSettingForService || []
        this.paymentType = paymentTypes.find(type => type.code === this.basicModel.paymentType)?.value || this.basicModel.paymentType
      })
    await this.$store.dispatch('registryService/additionalSettings/getSettingsDictionary', 'DictPaymentPeriodForSettingForService')
      .then(() => {
        const paymentPeriods = this.$store.getters['registryService/additionalSettings/setSettingsDictionary'].DictPaymentPeriodForSettingForService || []
        this.paymentPeriod = paymentPeriods.find(period => period.code === this.basicModel.paymentPeriod)?.value || this.basicModel.paymentPeriod
      })
  }
}
</script>
