<script setup lang="ts">
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.restDayOldTotal }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
        <div class="col">{{ props.data.restDayCurrentTotal }}</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">{{ props.data.leaveTotal }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8"></div>
        <div class="col">{{ props.data.leaveTypeDay }}</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>
