<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore'; 

const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</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 }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ลาถึงวันที่</div>
        <div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">จำนวนวันที่ลา</div>
        <div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
        <div class="col">{{ props.data.absentDaySummon }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ที่</div>
        <div class="col">{{ props.data.absentDayLocation }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ลงวันที่</div>
        <div class="col">
          {{
            props.data.absentDayRegistorDate
              ? props.data.absentDayRegistorDate
              : "-"
          }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ให้เข้ารับการ</div>
        <div class="col">{{ props.data.absentDayGetIn }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">ณ ที่</div>
        <div class="col">{{ props.data.absentDayAt }}</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.path"
              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>
