<script lang="ts" setup>
defineProps<{
  readonly?: boolean;
  prefixId?: string;
}>();
const contactName = defineModel<string>('contactName');
const email = defineModel<string>('email');
const contactTel = defineModel<string>('contactTel');
const officeTel = defineModel<string>('officeTel');
const agent = defineModel<string>('agent');
</script>

<template>
  <div class="col-md-9 col-12 row q-col-gutter-sm">
    <q-input
      :for="`${prefixId}-input-contact-name`"
      :id="`${prefixId}-input-contact-name`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('customer.table.contactName')"
      :model-value="readonly ? contactName || '-' : contactName"
      @update:model-value="
        (v) => (typeof v === 'string' ? (contactName = v) : '')
      "
    />

    <q-input
      :for="`${prefixId}-input-mail`"
      :id="`${prefixId}-input-mail`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('form.email')"
      :rules="
        readonly
          ? undefined
          : [
              (v: string) =>
                !v ||
                /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
                $t('form.error.invalid'),
            ]
      "
      :model-value="readonly ? email || '-' : email"
      @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
    >
      <template #prepend>
        <q-icon
          size="xs"
          name="mdi-email-outline"
          class="cursor-pointer"
          color="primary"
        />
      </template>
    </q-input>
    <q-input
      :for="`${prefixId}-input-telephone`"
      :id="`${prefixId}-input-telephone`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('form.telephone')"
      :model-value="readonly ? contactTel || '-' : contactTel"
      @update:model-value="
        (v) => (typeof v === 'string' ? (contactTel = v) : '')
      "
    >
      <template #prepend>
        <q-icon
          size="xs"
          name="mdi-phone-outline"
          class="cursor-pointer"
          color="primary"
        />
      </template>
    </q-input>

    <q-input
      :for="`${prefixId}-input-telephone`"
      :id="`${prefixId}-input-telephone`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('customer.form.headQuarters.telephoneNo')"
      :model-value="readonly ? officeTel || '-' : officeTel"
      @update:model-value="
        (v) => (typeof v === 'string' ? (officeTel = v) : '')
      "
    >
      <template #prepend>
        <q-icon
          size="xs"
          name="mdi-phone-outline"
          class="cursor-pointer"
          color="primary"
        />
      </template>
    </q-input>

    <q-input
      :for="`${prefixId}-input-telephone`"
      :id="`${prefixId}-input-telephone`"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('customer.form.agent')"
      :model-value="readonly ? agent || '-' : agent"
      @update:model-value="(v) => (typeof v === 'string' ? (agent = v) : '')"
    />
  </div>
</template>
