<i18n>
{
  "en": {
    "EmployeesAccountForm": {
      "login": "Login",
      "organization": "Organization",
      "department": "Department",
      "send": "Send"
    }
  },
  "ru": {
    "EmployeesAccountForm": {
      "login": "Логин",
      "organization": "Организация",
      "department": "Подразделение",
      "send": "Далее"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="username"
          filled
          :label="$t('EmployeesAccountForm.login') + '*'"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="organization"
          filled
          :label="$t('EmployeesAccountForm.organization')"
          :disable="true"
        />
      </div>
      <div class="col">
        <q-select
          v-model="department"
          :options="departments"
          filled
          :label="$t('EmployeesAccountForm.department') + '*'"
        />
      </div>
    </div>
    <q-btn
      color="primary"
      :label="$t('EmployeesAccountForm.send')"
      type="submit"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data'],
  data() {
    return {
      username: '',
      password: '',
      organization: 'Inpromconsult',
      departments: ['Инпром Фронт', 'Инпром Бэк', 'PaaS Общий', 'Разработчики'],
      department: '',
    };
  },
  computed: {
    outputData() {
      return {
        username: this.username,
        organization: this.organization,
        department: this.department,
      };
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
