<i18n>
{
  "en": {
    "RegionFormsBasic": {
      "fullname": "Full name",
      "shortname": "Short name",
      "code": "Region code",
      "okato": "ОКАТО",
      "timezone": "Time zone. Example: (+01:00)",
      "dns": "DNS",
      "send": "Send",
      "required": "Field is required",
      "requiredOkato": "The number must be 8 or 11 characters"
    }
  },
  "ru": {
    "RegionFormsBasic": {
      "fullname": "Полное наименование региона",
      "shortname": "Сокращенное наименование региона",
      "code": "Код региона",
      "okato": "ОКАТО",
      "timezone": "Часовой пояс. Пример: (+01:00)",
      "dns": "DNS",
      "send": "Отправить",
      "required": "Поле обязательно к заполнению",
      "requiredOkato": "Номер должен быть 8 или 11 значный"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="!readonly">
      <div class="row q-qutter-x-md">
        <div class="col">
          <q-input
            v-model="fullname"
            filled
            :label="$t('RegionFormsBasic.fullname') + '*'"
            :rules="[noEmptyValueRule]"
          />
        </div>
      </div>
      <div class="row q-qutter-x-md">
        <div class="col">
          <q-input
            v-model="shortname"
            filled
            :label="$t('RegionFormsBasic.shortname') + '*'"
            :rules="[noEmptyValueRule]"
          />
        </div>
      </div>
      <div class="row col q-gutter-y-md">
        <div class="col-xs-12 col-sm q-mr-sm-md">
          <q-input
            v-model="code"
            filled
            :label="$t('RegionFormsBasic.code') + '*'"
            :rules="[noEmptyValueRule]"
          />
        </div>
        <div class="col-xs-12 col-sm">
          <q-input
            v-model="okato"
            filled
            :label="$t('RegionFormsBasic.okato') + '*'"
            :rules="[noEmptyValueRule]"
          />
        </div>
      </div>
      <div class="row col q-gutter-y-md">
        <div class="col-xs-12 col-sm q-mr-sm-md">
          <q-input
            v-model="timezone"
            filled
            :label="$t('RegionFormsBasic.timezone')"
          />
        </div>
        <div class="col-xs-12 col-sm">
          <q-input
            v-model="dns"
            filled
            :label="$t('RegionFormsBasic.dns') + '*'"
            :rules="[noEmptyValueRule]"
          />
        </div>
      </div>
      <q-btn
        color="primary"
        :label="$t('RegionFormsBasic.send')"
        type="submit"
      />
    </div>
    <div v-else class="q-gutter-y-xs">
      <div v-if="fullname" class="row">
        <div class="col text-grey-5">
          {{ $t('RegionFormsBasic.fullname') }}*
        </div>
        <div class="col text-grey-7">{{ fullname }}</div>
      </div>
      <div v-if="shortname" class="row">
        <div class="col text-grey-5">
          {{ $t('RegionFormsBasic.shortname') }}*
        </div>
        <div class="col text-grey-7">{{ shortname }}</div>
      </div>
      <div v-if="code" class="row">
        <div class="col text-grey-5">{{ $t('RegionFormsBasic.code') }}*</div>
        <div class="col text-grey-7">{{ code }}</div>
      </div>
      <div v-if="okato" class="row">
        <div class="col text-grey-5">{{ $t('RegionFormsBasic.okato') }}*</div>
        <div class="col text-grey-7">{{ okato }}</div>
      </div>
      <div v-if="timezone" class="row">
        <div class="col text-grey-5">
          {{ $t('RegionFormsBasic.timezone') }}*
        </div>
        <div class="col text-grey-7">{{ timezone }}</div>
      </div>
      <div v-if="dns" class="row">
        <div class="col text-grey-5">{{ $t('RegionFormsBasic.dns') }}*</div>
        <div class="col text-grey-7">{{ dns }}</div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
import { noEmptyValueRule } from '@utils/field-validation/basic';
import { okatoFormatRule } from '@utils/field-validation/regions';
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
import get from 'lodash/get';

@Component({
  methods: {
    noEmptyValueRule,
    okatoFormatRule,
  },
})
export default class RegionFormBasic extends Vue {
  @Prop() readonly inputData: any;
  @Prop() readonly readonly: boolean;

  private fullname = '';
  private shortname = '';
  private code = '';
  private okato = '';
  private timezone = '';
  private dns = '';

  private get outputData(): any {
    return {
      domain: {
        schema: 'Region',
        name: this.shortname,
        enabled: true,
        fullname: this.fullname,
        shortname: this.shortname,
        code: this.code,
        oktmo: this.okato,
        timezone: this.timezone,
        dns: this.dns,
      },
      transExit: false,
    };
  }

  @Watch('inputData', { immediate: true })
  private async inputDataUpdate(val: any) {
    if (!val?.domain) return;

    const domain = val.domain;
    this.fullname = get(domain, 'fullname', '');
    this.shortname = get(domain, 'shortname', '');
    this.code = get(domain, 'code', '');
    this.okato = get(domain, 'oktmo', '');
    this.timezone = get(domain, 'timezone', '');
    this.dns = get(domain, 'dns', '');
  }

  private submit(e: any): void {
    this.$emit('submit', e, this.outputData);
  }
}
</script>
