<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-sm 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.leaveWrote ? 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.leaveSubTypeName
            ? props.data.leaveSubTypeName
            : props.data.leaveTypeName
            ? props.data.leaveTypeName
            : "-"
        }}
      </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.fullname ? props.data.fullname : "-" }}
      </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.leaveAddress ? props.data.leaveAddress : "-" }}
      </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.leaveNumber ? props.data.leaveNumber : "-" }}
      </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">
        {{ props.data.leaveResonDelete ? props.data.leaveResonDelete : "-" }}
      </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.status != "ใหม่" ? props.data.status : "-" }}
      </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.leaveDirectorComment && props.data.status != "ใหม่"
            ? props.data.leaveDirectorComment
            : "-"
        }}
      </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" v-if="props.data.leaveDocDelete">
        <q-btn
          :href="props.data.leaveDocDelete"
          target="_blank"
          outline
          color="blue"
          label="ดาวน์โหลด"
          size="12px"
        >
          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
        >
      </div>
      <div class="col-xs-12 col-md-6" v-else>-</div>
    </div>
  </div>
</template>

<style scoped></style>
