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

defineProps<{
  readonly: boolean;
  quotationNo?: string;
  quotationStatus?: boolean;
}>();

const actor = defineModel<string>('actor', { required: false });
const workName = defineModel<string>('workName', { required: true });
const contactor = defineModel<string>('contactor', { required: true });
const telephone = defineModel<string>('telephone', { required: true });
const dueDate = defineModel<Date | string>('dueDate', { required: true });
const createdAt = defineModel<Date | string>('createdAt');
</script>

<template>
  <div class="row q-col-gutter-sm">
    <slot name="issue-info" />
    <DatePicker
      id="select-due-date"
      :label="$t('general.createdAt')"
      :model-value="createdAt || new Date()"
      class="col-6 col-md-2"
      :readonly
      :disabled="!readonly"
    />
    <DatePicker
      id="select-due-date"
      :label="$t('quotation.dueDate')"
      :readonly
      v-model="dueDate"
      :rules="[
        () => {
          const currentDate = new Date(dueDate);
          const toDate = new Date();
          if (
            !readonly &&
            !!quotationStatus &&
            (currentDate.getTime() === toDate.getTime() ||
              currentDate.getTime() < toDate.getTime())
          )
            return $t('quotation.validateDueDate');
          return true;
        },
      ]"
      :disabled-dates="(date: Date) => date.getTime() < Date.now()"
      class="col-6 col-md-2"
    />
    <q-input
      for="input-quotation"
      :label="$t('general.itemNo', { msg: $t('quotation.title') })"
      :readonly
      :model-value="!quotationNo ? $t('general.generated') : quotationNo"
      :disable="!readonly"
      class="col-12 col-md-2"
      dense
      outlined
    />
    <q-input
      for="input-actor"
      :label="$t('quotation.actor')"
      :readonly
      v-model="actor"
      :disable="!readonly"
      class="col-12 col-md-2"
      dense
      outlined
    />
    <q-input
      for="input-work-name"
      :label="$t('quotation.workName')"
      :readonly
      v-model="workName"
      class="col-12 col-md-2"
      dense
      outlined
    />
    <q-input
      for="input-contact-name"
      :label="$t('quotation.contactName')"
      :readonly
      v-model="contactor"
      class="col-12 col-md-2"
      dense
      outlined
    />
    <q-input
      for="input-telephone"
      :label="$t('general.telephone')"
      :readonly="readonly"
      v-model="telephone"
      class="col-12 col-md-2"
      dense
      outlined
    />
  </div>
</template>
