<i18n>
{
  "en": {
    "RegionBlockForm": {
      "settingMessage": "Setting up blocking of the {name} region",
      "block": "Block",
      "blockReadonly": "Block region",
      "save": "Save",
      "yes": "Yes",
      "no": "No",
      "cancel": "Cancel"
    }
  },
  "ru": {
    "RegionBlockForm": {
      "settingMessage": "Настройка блокировки региона {name}",
      "block": "Заблокировать",
      "blockReadonly": "Заблокировать регион",
      "save": "Сохранить",
      "yes": "Да",
      "no": "Нет",
      "cancel": "Отмена"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="!readonly" class="q-gutter-y-md">
      <div class="text-h6">
        {{ $t('RegionBlockForm.settingMessage', { name }) }}
      </div>
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-toggle v-model="blocked" :label="$t('RegionBlockForm.block')" />
        </div>
      </div>
      <div class="row q-gutter-y-md">
        <q-btn
          class="col-xs-12 col-sm-auto"
          color="primary"
          :label="$t('RegionBlockForm.cancel')"
          type="button"
          outline
          @click="cancelProcess"
        />
        <q-btn
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          color="primary"
          :label="$t('RegionBlockForm.save')"
          type="submit"
        />
      </div>
    </div>
    <div v-else class="q-gutter-y-xs">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('RegionBlockForm.blockReadonly') }}
        </div>
        <div class="col text-grey-7">
          {{ blocked ? $t('RegionBlockForm.yes') : $t('RegionBlockForm.no') }}
        </div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import get from 'lodash/get';
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      name: '',
      blocked: false,
    };
  },
  computed: {
    outputData() {
      return {
        region: {
          enabled: !this.blocked,
        },
        transExit: false,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.blocked = !get(val, 'region.enabled');
          this.name =
            get(val, 'region.fullname') || get(val, 'region.name', '');
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    cancelProcess(e) {
      this.$emit('submit', e, {
        transExit: true,
      });
    },
  },
};
</script>
