<script setup lang="ts">
import DatePicker from '../shared/DatePicker.vue';

const registrationNumber = defineModel<string>('registrationNumber', {
  default: '',
});
const name = defineModel<string>('name', {
  default: '',
});

const businessRegistrationDate = defineModel<string>(
  'businessRegistrationDate',
  { default: '' },
);
const visaPlace = defineModel<string>('visaPlace', { default: '' });
defineProps<{
  prefixId?: string;
  outlined?: boolean;
  readonly?: boolean;
  customerType?: 'CORP' | 'PERS';
}>();
</script>

<template>
  <div class="row q-mb-sm" style="gap: 10px">
    <div class="col-12 text-subtitle1 text-weight-bold">
      <p>Document Properties</p>
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.businessRegistration.registrationNumber')"
        for="input-citizen-id"
        v-model="registrationNumber"
      />

      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.businessRegistration.registrationNumber')"
        for="input-citizen-id"
        v-model="name"
      />
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <DatePicker
        :label="$t('form.businessRegistration.businessRegistration')"
        v-model="businessRegistrationDate"
        class="col-4"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />

      <DatePicker
        :label="$t('customerEmployee.form.visaPlace')"
        v-model="visaPlace"
        class="col-4"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
