<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dateHisStart = defineModel<Date | null>("dateHisStart", {
  required: true,
});
const dateHisEnd = defineModel<Date | null>("dateHisEnd", { required: true });
const trainingDays = defineModel<string>("trainingDays", { required: true });
const order = defineModel<string>("order", { required: true });
const dateOrder = defineModel<Date | null>("dateOrder", { required: true });
</script>
<template>
  <q-card flat bordered class="q-mt-md bg-grey-1">
    <q-card-section class="q-pa-sm row q-col-gutter-sm">
      <div class="col-4">
        <q-input
          :model-value="dateHisStart ? date2Thai(dateHisStart) : '-'"
          dense
          outlined
          readonly
          bg-color="white"
          label="วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน"
        >
          <template v-slot:prepend>
            <q-icon
              name="event"
              class="cursor-pointer"
              style="color: var(--q-primary)"
            >
            </q-icon> </template
        ></q-input>
      </div>
      <div class="col-4">
        <q-input
          :model-value="dateHisEnd ? date2Thai(dateHisEnd) : '-'"
          dense
          outlined
          readonly
          bg-color="white"
          label="วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน"
        >
          <template v-slot:prepend>
            <q-icon
              name="event"
              class="cursor-pointer"
              style="color: var(--q-primary)"
            >
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="col-4">
        <q-input
          :model-value="trainingDays ? trainingDays : '-'"
          dense
          outlined
          readonly
          bg-color="white"
          label="จำนวนวันที่อบรม"
        ></q-input>
      </div>
      <div class="col-4">
        <q-input
          readonly
          label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
          v-model="order"
          dense
          outlined
          bg-color="white"
        />
      </div>
      <div class="col-4">
        <datepicker
          readonly
          v-model="dateOrder"
          :locale="'th'"
          autoApply
          borderless
          :enableTimePicker="false"
          week-start="0"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              readonly
              bg-color="white"
              outlined
              dense
              :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
              label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>
        </datepicker>
      </div>
    </q-card-section>
  </q-card>
</template>
