<i18n>
{
  "en": {
    "dataCard": {
      "fullName": "Full region name",
      "shortName": "Short region name",
      "regionCode": "Region code",
      "OKATO": "ОКАТО",
      "timezone": "Timezone",
      "DNS": "DNS",
      "noData": "No data",
      "edit": "Edit"
    }
  },
  "ru": {
    "dataCard": {
      "fullName": "Полное наименование субъекта",
      "shortName": "Сокращенное наименование субъекта",
      "regionCode": "Код региона",
      "OKATO": "ОКАТО",
      "timezone": "Часовой пояс",
      "DNS": "DNS",
      "noData": "Нет данных",
      "edit": "Редактировать"
    }
  }
}
</i18n>

<template>
  <div class="q-pb-md" v-if="common.active === 'data'">
    <q-card class="no-shadow q-gutter-y-md q-mx-md no-border-radius">
      <q-card-section
        class="q-gutter-y-md bg-white q-pb-md q-pt-sm q-mt-md q-mx-md"
      >
        <base-label-value padded-label>
          <template v-slot:label>
            {{ $t('dataCard.fullName') }}
          </template>
          <template v-slot:value>
            {{ cardData.fullname }}
          </template>
        </base-label-value>
        <base-label-value padded-label>
          <template v-slot:label>
            {{ $t('dataCard.shortName') }}
          </template>
          <template v-slot:value>
            {{ cardData.shortname }}
          </template>
        </base-label-value>
        <base-label-value padded-label>
          <template v-slot:label>
            {{ $t('dataCard.regionCode') }}
          </template>
          <template v-slot:value>
            {{ cardData.code }}
          </template>
        </base-label-value>
        <base-label-value padded-label>
          <template v-slot:label>
            {{ $t('dataCard.OKATO') }}
          </template>
          <template v-slot:value>
            {{ cardData.oktmo }}
          </template>
        </base-label-value>
        <base-label-value padded-label v-if="isRegion">
          <template v-slot:label>
            {{ $t('dataCard.timezone') }}
          </template>
          <template v-slot:value>
            {{ cardData.timezone }}
          </template>
        </base-label-value>
        <base-label-value padded-label>
          <template v-slot:label>
            {{ $t('dataCard.DNS') }}
          </template>
          <template v-slot:value>
            {{ cardData.dns }}
          </template>
        </base-label-value>
      </q-card-section>
      <q-card-section>
        <q-btn
          class="q-mx-md q-mt-md"
          @click="editRegion"
          :disable="loading"
          unelevated
          color="primary"
          :label="$t('dataCard.edit')"
          type="button"
        />
      </q-card-section>
    </q-card>
    <q-inner-loading :showing="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import get from 'lodash/get';

export default {
  name: 'RegionDataCard',

  props: ['common', 'model', 'userTask'],

  data() {
    return {
      loading: false,
    };
  },

  computed: {
    cardData() {
      return {
        fullname: get(this.model, 'fullname', this.$t('dataCard.noData')),
        shortname: get(this.model, 'shortname', this.$t('dataCard.noData')),
        code: get(this.model, 'code', this.$t('dataCard.noData')),
        oktmo: get(this.model, 'oktmo', this.$t('dataCard.noData')),
        timezone: get(this.model, 'timezone', this.$t('dataCard.noData')),
        dns: get(this.model, 'dns', this.$t('dataCard.noData')),
      };
    },
    country() {
      return this.$store.getters['idm/regions/country'];
    },
    isRegion() {
      return this.model?.code !== this.country.code;
    },
  },

  methods: {
    editRegion() {
      this.loading = true;

      const regionSocketListenner = (e) => {
        const data = JSON.parse(e.data);
        if (get(data, 'body.type') === 'task' && get(data, 'traceId')) {
          this.common.$websockets.removeListener(regionSocketListenner);

          this.$router.push({
            name: 'stepper',
            params: {
              traceId: get(data, 'traceId'),
            },
            query: {
              taskId: get(data, 'body.userTask.taskId', null),
            },
          });
        }
      };

      this.common.$websockets.addListener(regionSocketListenner);

      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'EditRegionIDMProcess',
        data: {
          domainId: get(this.model, 'id') || null,
          redirectUrl: '/regions',
        },
      });
    },
  },
};
</script>
