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

const mixin = useCounterMixin();
const { calculateDurationYmd } = mixin;

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

function convertDateToEng(dataThia: string) {
  const thaiDateParts: string[] = dataThia.split(" ");
  const thaiMonthAbbreviation: string = thaiDateParts[1];

  const thaiMonths: { [key: string]: string } = {
    "ม.ค.": "Jan",
    "ก.พ.": "Feb",
    "มี.ค.": "Mar",
    "เม.ย.": "Apr",
    "พ.ค.": "May",
    "มิ.ย.": "Jun",
    "ก.ค.": "Jul",
    "ส.ค.": "Aug",
    "ก.ย.": "Sep",
    "ต.ค.": "Oct",
    "พ.ย.": "Nov",
    "ธ.ค.": "Dec",
  };
  const englishMonth: string = thaiMonths[thaiMonthAbbreviation];

  if (englishMonth) {
    const englishDateString: string = `${englishMonth} ${thaiDateParts[0]} ${thaiDateParts[2]}`;
    const dateObject: Date = new Date(englishDateString);
    return dateObject.toString();
  }
}
</script>

<template>
  <q-card-section>
    <div class="q-pa-md q-gutter-md">
      <div class="row">
        <div class="col text-grey-8">เขียนที่</div>
        <div class="col">{{ props.data.leaveWrote }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
        <div class="col">{{ props.data.leaveDateStart }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ลาถึงวันที่</div>
        <div class="col">{{ props.data.leaveDateEnd }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">จำนวนวันที่ลา</div>
        <div class="col">
          {{
            calculateDurationYmd(
              convertDateToEng(props.data.leaveDateStart),
              convertDateToEng(props.data.leaveDateEnd)
            )
          }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">วันเดือนปีเกิด</div>
        <div class="col">{{ props.data.leavebirthDate }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
        <div class="col">{{ props.data.leavegovernmentDate }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
        <div class="col">
          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ศึกษาวิชา</div>
        <div class="col">{{ props.data.studyDaySubject }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ขั้นปริญญา</div>
        <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ชื่อสถานศึกษา</div>
        <div class="col">{{ props.data.studyDayUniversityName }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ประเทศ</div>
        <div class="col">{{ props.data.studyDayCountry }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ด้วยทุน</div>
        <div class="col">{{ props.data.studyDayScholarship }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
        <div class="col">{{ props.data.leaveNumber }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
        <div class="col">{{ props.data.leaveAddress }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">รายละเอียด</div>
        <div class="col">{{ props.data.leaveDetail }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">เอกสารแนบ</div>
        <div class="col" v-if="props.data.leaveDocument.length !== 0">
          <div
            v-for="(document, index) in props.data.leaveDocument"
            :key="index"
            :style="{ marginBottom: '10px' }"
          >
            <q-btn
              :href="document"
              target="_blank"
              outline
              color="blue"
              :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
              size="12px"
            >
              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
            >
          </div>
        </div>
        <div class="col" v-else>-</div>
      </div>
    </div>
  </q-card-section>
</template>

<style scoped></style>
