<script setup lang="ts">
import DatePicker from 'src/components/shared/DatePicker.vue';
import { formatNumberDecimal } from 'stores/utils';

const citizenId = defineModel<string | undefined>('citizenId', {
  required: true,
});
const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {
  required: true,
});
const branchCode = defineModel<string | undefined>('branchCode', {
  required: true,
});

// const customerCode = defineModel<string | undefined>('customerCode', {
//   required: true,
// });

const registerName = defineModel<string | undefined>('registerName', {
  required: true,
});
const registerNameEN = defineModel<string>('registerNameEn');

const registerDate = defineModel<Date | null>('registerDate');
const authorizedCapital = defineModel<string>('authorizedCapital', {
  default: '0',
});

defineProps<{
  index: string;
  customerName?: string;
  code?: string;
  readonly?: boolean;
  prefixId?: string;
  customerType?: 'PERS' | 'CORP';
}>();
</script>

<template>
  <div class="row q-col-gutter-md">
    <template v-if="customerType === 'CORP'">
      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.legalPersonNo')"
        for="input-legal-person-no"
        v-model="legalPersonNo"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        hide-bottom-space
        class="col-12 col-md-3"
        for="input-branch-code"
        :label="$t('customer.form.branchCode')"
        :disable="!readonly"
        :readonly="readonly"
        :model-value="branchCode"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        hide-bottom-space
        class="col-12 col-md-3"
        for="input-customer-code"
        :disable="!readonly"
        :readonly="readonly"
        :label="$t('customer.form.customerCode')"
        :model-value="customerName"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.legalPersonCode')"
        for="input-legal-person-code"
        :model-value="legalPersonNo"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-6"
        :label="$t('customer.form.registerName')"
        for="input-register-name"
        v-model="registerName"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-6"
        :label="$t('customer.form.registerNameEN')"
        for="input-register-name-en"
        v-model="registerNameEN"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        type="text"
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.authorizedCapital')"
        for="input-authorized-capital"
        :model-value="
          !readonly
            ? authorizedCapital
            : formatNumberDecimal(+authorizedCapital, 2)
        "
        @update:model-value="
          (v) => {
            authorizedCapital = `${v}`;
          }
        "
      />

      <DatePicker
        v-model="registerDate"
        :id="`${prefixId}-input-register-date`"
        :label="$t('customer.form.registerDate')"
        :readonly="readonly"
        clearable
      />
    </template>

    <template v-if="customerType === 'PERS'">
      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :disable="index !== '0'"
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.cardNumber')"
        for="input-legal-person-no"
        v-model="citizenId"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :disable="!readonly"
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.branchCode')"
        for="input-branch-code"
        :model-value="`${branchCode}${index}`"
      />

      <q-input
        lazy-rules="ondemand"
        dense
        outlined
        :disable="!readonly"
        :readonly="readonly"
        hide-bottom-space
        class="col-12 col-md-3"
        :label="$t('customer.form.customerCode')"
        for="input-customer-code"
        :model-value="customerName"
      />
    </template>
  </div>
</template>
