<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.leaveDetail }}</div>
      </div>

      <div class="row">
        <div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
        <div class="col" v-if="props.data.leaveDraftDocument">
          <q-btn
            :href="props.data.leaveDraftDocument"
            target="_blank"
            outline
            color="blue"
            label="ดาวน์โหลด"
            size="12px"
          >
            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
          >
        </div>
        <div class="col" v-else>-</div>
      </div>

      <div class="row">
        <div class="col text-grey-8">เอกสารประกอบ</div>
        <div class="col" v-if="props.data.leaveDocument">
          <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 class="col" v-else>-</div>
      </div>
    </div>
  </q-card-section>
</template>
