<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.leavebirthDate ? props.data.leavebirthDate : "-" }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
        <div class="col">
          {{
            props.data.leavegovernmentDate
              ? props.data.leavegovernmentDate
              : "-"
          }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">เคย/ไม่เคยบวช</div>
        <div class="col">
          {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">สถานที่บวช</div>
        <div class="col">
          {{ props.data.ordainDayLocationName }}
          {{ props.data.ordainDayLocationAddress }}
          {{ props.data.ordainDayLocationNumber }}
        </div>
      </div>
      <div class="row">
        <div class="col text-grey-8">วันอุปสมบท</div>
        <div class="col">{{ props.data.ordainDayOrdination }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-8">สถานที่จำพรรษา</div>
        <div class="col">
          {{ props.data.ordainDayBuddhistLentName }}
          {{ props.data.ordainDayBuddhistLentAddress }}
        </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>
