<i18n>
{
  "en": {
    "EmployeesCreateCredentialForm": {
      "formName": "User data:",
      "login": "Login",
      "password": "Password"
    }
  },
  "ru": {
    "EmployeesCreateCredentialForm": {
      "formName": "Пользовательские данные:",
      "login": "Логин",
      "password": "Пароль",
      "create": "Создать",
      "send": "Далее"
    }
  }
}
</i18n>
<template>
  <q-form class="q-gutter-y-md" autocomplete="off" @submit="submit">
    <div v-if="readonly" class="q-gutter-y-sm">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('EmployeesCreateCredentialForm.login') }}*
        </div>
        <div class="col text-grey-7">{{ username }}</div>
      </div>
    </div>
    <div v-else class="q-gutter-y-md">
      <div class="row q-gutter-x-md">
        <div class="row col-12">
          <div class="col q-pr-md">
            <q-input
              v-model="username"
              filled
              :label="$t('EmployeesCreateCredentialForm.login') + '*'"
            />
          </div>
        </div>
      </div>
      <q-btn
        color="primary"
        :label="$t(`base.${isEdit ? 'send' : 'create'}`)"
        type="submit"
      />
    </div>
  </q-form>
</template>

<script lang="ts">
import { v4 } from 'uuid';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import InputData from '@/types/wf/InputData';

declare interface FormInputData extends InputData {
  selectedCredential: {
    userName: string;
    id: string;
  };
  userName: string;
}

@Component({})
export default class EmployeesCreateCredentialForm extends Vue {
  @Prop() inputData: FormInputData;
  @Prop() readonly: boolean;

  @Watch('inputData', { immediate: true })
  private inputDataHandler(val: FormInputData) {
    if (val) {
      if (val.selectedCredential) {
        this.username = val.selectedCredential.userName;
        this.isEdit = true;
      }
    }
    if (this.readonly) {
      this.username = val.userName || '';
    }
  }

  private username = '';
  private isEdit = false;

  private get outputData() {
    return {
      userName: this.username,
      id: this.isEdit ? this.inputData?.selectedCredential?.id : v4(),
    };
  }

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