<script setup lang="ts">
const businessAddress = defineModel<string>('email');
const typeBusiness = defineModel<string>('typeBusiness');
const JobPosition = defineModel<string>('JobPosition');

const typeBusinessEN = defineModel<string>('typeBusinessEN');
const JobPositionEN = defineModel<string>('JobPositionEN');

const jobDescription = defineModel<string>('jobDescription');

const payDay = defineModel<string>('payDay');
const payRate = defineModel<string>('payRate');

const salesPerson = defineModel<string>('salesPerson');

const typeBusinessOptions = [
  {
    value: '1',
    label: 'ประเภทบริษัท 1',
  },
  {
    value: '2',
    label: 'ประเภทบริษัท 2',
  },
  {
    value: '3',
    label: 'ประเภทบริษัท 3',
  },
];

const JobPositionOptions = [
  {
    value: '1',
    label: 'ตําแหน่งงาน 1',
  },
  {
    value: '2',
    label: 'ตําแหน่งงาน 2',
  },
  {
    value: '3',
    label: 'ตําแหน่งงาน 3',
  },
];

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="col-12 app-text-muted"></div>
  <div class="col-12 row q-col-gutter-y-md">
    <div class="col-3 q-pl-xl app-text-muted">
      {{ $t('businessInformation') }}
    </div>
    <div class="col-9 row q-col-gutter-md">
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-12"
        :label="$t('inputCustomerAddress')"
        v-model="businessAddress"
      />

      <q-select
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        v-model="typeBusiness"
        :options="typeBusinessOptions"
        :label="$t('businessType')"
        class="col-6"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('businessTypeEN')"
        v-model="typeBusinessEN"
      />

      <q-select
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        v-model="JobPosition"
        :options="JobPositionOptions"
        :label="$t('jobPosition')"
        class="col-6"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('jobPositionEN')"
        v-model="JobPositionEN"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('jobDescription')"
        v-model="jobDescription"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payDay')"
        v-model="payDay"
      >
        <template v-slot:prepend>
          <q-icon
            name="mdi-calendar-blank-outline"
            color="primary"
            class="cursor-pointer"
            size="16px"
          >
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date v-model="payDay" mask="YYYY-MM-DD HH:mm">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>

      <!-- <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payDay')"
        v-model="payDay"
      /> -->
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payRate')"
        v-model="payRate"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('salesPerson')"
        v-model="salesPerson"
      />
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>
