<i18n>
{
  "en": {
    "CreateDepartmentEditForm": {
      "fullName": "Name",
      "shortName": "Department shortname",
      "address": "Department address",
      "postal": "Postal address",
      "email": "Email",
      "phone": "Phone",
      "dns": "DNS",
      "submit": "Submit",
      "id": "Department ID EPGU",
      "needToAdd": "The field needs to be filled"
    }
  },
  "ru": {
    "CreateDepartmentEditForm": {
      "fullName": "Полное название подразделения",
      "shortName": "Сокращенное название подразделения",
      "address": "Адрес подразделения",
      "postal": "Почтовый адрес подразделения",
      "email": "Адрес электронной почты",
      "phone": "Телефон",
      "dns": "DNS",
      "submit": "Отправить",
      "id": "ID ведомства ЕПГУ",
      "needToAdd": "Поле нужно заполнить"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit" class="q-gutter-y-md">
    <div v-if="!readonly" class="q-gutter-y-md">
      <!-- <div class="col">
        <q-input
          filled
          :label="$t('CreateDepartmentEditForm.id') + '*'"
          v-model="tnsDepartmentId"
          :rules="[() => !!tnsDepartmentId]"
          :error-message="$t('CreateDepartmentEditForm.needToAdd')"
        />
      </div> -->
      <div class="col">
        <q-input
          filled
          :label="$t('CreateDepartmentEditForm.fullName') + '*'"
          v-model="fullName"
          :rules="[() => !!fullName]"
          :error-message="$t('CreateDepartmentEditForm.needToAdd')"
        />
      </div>
      <div class="col">
        <q-input
          filled
          :label="$t('CreateDepartmentEditForm.shortName') + '*'"
          v-model="shortName"
          :rules="[() => !!shortName]"
          :error-message="$t('CreateDepartmentEditForm.needToAdd')"
        />
      </div>
      <div class="col">
        <q-input
          filled
          label="Код военного комиссариата"
          v-model="militaryCode"
          :rules="[
            () =>
              !militaryCode ||
              militaryCode.length === 8 ||
              'Должен состоять из 8 цифр',
          ]"
          mask="########"
        />
      </div>
      <div class="col">
        <q-input
          filled
          label="Часовой пояс"
          v-model="timezone"
          :rules="[() => rulesTimezone(timezone)]"
        />
      </div>
      <div class="col">
        <BasicMAddressComponent
          :id.sync="addressId"
          :value.sync="address"
          :label="$t('CreateDepartmentEditForm.address')"
          filled
        />
      </div>
      <div class="col">
        <BasicMAddressComponent
          :id.sync="postalAddressId"
          :value.sync="postalAddress"
          :label="$t('CreateDepartmentEditForm.postal')"
          filled
        />
      </div>

      <div class="row">
        <div class="col-xs-12 col-sm q-mr-sm-md">
          <q-input
            filled
            :label="$t('CreateDepartmentEditForm.email')"
            type="email"
            v-model="email"
          >
            <template v-slot:prepend>
              <q-icon name="email" />
            </template>
          </q-input>
        </div>
        <div class="col-xs-12 col-sm q-mt-xs-md q-mt-sm-none">
          <q-input
            fill-mask
            filled
            :label="$t('CreateDepartmentEditForm.phone')"
            mask="+7 (###) ###-##-##"
            unmasked-value
            v-model="phone"
          >
            <template v-slot:prepend>
              <q-icon name="phone" />
            </template>
          </q-input>
        </div>
        <div class="col-xs-12 col-sm q-mt-xs-md q-mt-sm-none">
          <q-toggle
            v-model="reportsEnabled"
            :label="
              reportsEnabled ? 'Включать в отчеты' : 'Исключать из отчетов'
            "
          />
        </div>
      </div>
      <!-- <div class="row">
        <div class="col-xs-12 col-sm q-mr-sm-md">
          <q-input
            filled
            :label="$t('CreateDepartmentEditForm.dns') + '*'"
            lazy-rules
            v-model="dns"
            :rules="[() => !!dns]"
            :error-message="$t('CreateDepartmentEditForm.needToAdd')"
          />
        </div>
      </div> -->
      <q-btn
        color="primary"
        :label="$t('CreateDepartmentEditForm.submit')"
        type="submit"
      />
    </div>
    <div v-if="readonly" class="q-gutter-y-sm">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.fullName') }}
        </div>
        <div class="col text-grey-7">{{ fullName }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.shortName') }}
        </div>
        <div class="col text-grey-7">{{ shortName }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.address') }}
        </div>
        <div class="col text-grey-7">{{ address }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.postalAddress') }}
        </div>
        <div class="col text-grey-7">{{ postalAddress }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.email') }}
        </div>
        <div class="col text-grey-7">{{ email }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.phone') }}
        </div>
        <div class="col text-grey-7">+7{{ phone }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">Включать в отчеты</div>
        <div class="col text-grey-7">
          {{ reportsEnabled ? 'Да' : 'Нет' }}
        </div>
      </div>
      <!-- <div class="row">
        <div class="col text-grey-5">
          {{ $t('CreateDepartmentEditForm.dns') }}
        </div>
        <div class="col text-grey-7">{{ dns }}</div>
      </div> -->
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import BasicMAddressComponent from '@components/m-address/index.vue';
import { v4 } from 'uuid';

export default {
  props: ['input-data', 'readonly'],
  components: {
    BasicMAddressComponent,
  },
  data() {
    return {
      id: '',
      fullName: '',
      shortName: '',
      militaryCode: '',
      timezone: '',
      addressId: '',
      address: '',
      postalAddress: '',
      postalAddressId: '',
      email: '',
      phone: '',
      dns: '',
      name: '',
      modified: '',
      tnsDepartmentId: '',
      reportsEnabled: true,
    };
  },
  computed: {
    outputData() {
      return {
        department: {
          id: this.id,
          fullname: this.fullName,
          shortname: this.shortName,
          militaryCode: this.militaryCode?.length
            ? this.militaryCode
            : 'emptyValue',
          addressId: this.addressId,
          address: this.address,
          postalAddress: this.postalAddress,
          postalAddressId: this.postalAddressId,
          email: this.email,
          phone: this.phone,
          dns: this.dns,
          name: this.fullName,
          modified: this.modified,
          tnsDepartmentId: this.tnsDepartmentId,
          timezone: this.timezone,
          reportsEnabled: this.reportsEnabled,
        },
      };
    },
  },
  methods: {
    submit(e) {
      if (this.id === '') {
        this.outputData.department.id = v4();
      }
      this.$emit('submit', e, this.outputData);
    },
    rulesTimezone(timezone) {
      const regex = /^[+|-]((0[0-9]|1[0-1]):([0-5][0-9])|12:00)$/;
      const regexMinusZero = /^-00:00$/;
      return (
        !timezone ||
        (regex.test(timezone) && !regexMinusZero.test(timezone)) ||
        'Должен быть в формате +01:30'
      );
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (this.readonly && val.department) {
          this.address = val.department.address || '';
          this.postalAddress = val.department.postalAddress || '';
          this.dns = val.department.dns || '';
          this.name = val.department.fullname || '';
          this.email = val.department.email || '';
          this.fullName = val.department.fullname || '';
          this.shortName = val.department.shortname || '';
          this.militaryCode = val.department.militaryCode || '';
          this.phone = val.department.phone || '';
          this.timezone = val.department.timezone || '';
          this.reportsEnabled = val.department.reportsEnabled;
        }
        if (val && val.parentDomain && typeof val.parentDomain === 'object') {
          this.id = val.parentDomain.id;
          this.address = val.parentDomain.address;
          this.addressId = val.parentDomain.addressId;
          this.postalAddress = val.parentDomain.postalAddress;
          this.postalAddressId = val.parentDomain.postalAddressId;
          this.dns = val.parentDomain.dns;
          this.name = val.parentDomain.fullname;
          this.email = val.parentDomain.email;
          this.fullName = val.parentDomain.fullname;
          this.shortName = val.parentDomain.shortname;
          this.militaryCode = val.parentDomain.militaryCode;
          this.phone = val.parentDomain.phone;
          this.modified = val.parentDomain.modified;
          this.tnsDepartmentId = val.parentDomain.tnsDepartmentId;
          this.timezone = val.parentDomain.timezone;
          this.reportsEnabled = val.parentDomain.reportsEnabled;
        }
      },
      immediate: true,
    },
  },
};
</script>
