<script setup lang="ts">
import { useLeaveStore } from '@/modules/05_leave/store'

const store = useLeaveStore()
const { converstType } = store
/**
 * รับ prop จาก component
 */
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <div class="q-pa-md q-gutter-md">
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
      <div class="col-xs-12 col-md-6">ลาอุปสมบท</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
<div class="col-xs-12 col-md-6">{{ 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-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
      <div class="col-xs-12 col-md-6">
        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">วันเดือนปีเกิด</div>
      <div class="col-xs-12 col-md-6">{{ props.data.leavebirthDate }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">เคย/ไม่เคยบวช</div>
      <div class="col-xs-12 col-md-6">
        {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">สถานที่บวช</div>
      <div class="col-xs-12 col-md-6">
        {{ props.data.ordainDayLocationName }}
        {{ props.data.ordainDayLocationAddress }}
        {{ props.data.ordainDayLocationNumber }}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">วันอุปสมบท</div>
      <div class="col-xs-12 col-md-6">{{ props.data.ordainDayOrdination }}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">สถานที่จำพรรษา</div>
      <div class="col-xs-12 col-md-6">
        {{ props.data.ordainDayBuddhistLentName }}
        {{ props.data.ordainDayBuddhistLentAddress }}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">สาเหตุการลา</div>
      <div class="col-xs-12 col-md-6">
        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
      <div class="col-xs-12 col-md-6">
        <div
          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
        >
          <div
            v-for="(document, index) in props.data.leaveDocument"
            :key="index"
            :style="{ marginBottom: '10px' }"
          >
            <div>
              <q-btn
                :href="document.path"
                target="_blank"
                outline
                color="blue"
                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
                size="12px"
              >
                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
              </q-btn>
            </div>
          </div>
        </div>
        <div v-else>-</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
