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