<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

/** import Type*/
import type { FormDetail } from "@/modules/09_leave/interface/response/work";

/** importComponents*/
import Map from "@/modules/09_leave/components/1_Work/DialogMap.vue";

/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

/** useStore */
const mixin = useCounterMixin();
const stores = useWorklistDataStore();
const { date2Thai, showLoader, hideLoader, messageError } = mixin;
const { convertSatatus } = stores;

const $q = useQuasar(); //ใช้ noti quasar

/** props จาก TableList */
const props = defineProps({
  modal: {
    type: Boolean,
    require: true,
  },
  typeTab: {
    type: String,
    require: true,
  },
  detail: {
    type: Object,
    require: true,
  },
  close: {
    type: Function,
    require: true,
  },
});

/** รายละเอียดข้อมูล */
const formData = reactive<FormDetail>({
  checkInDate: null,
  checkInImg: "",
  checkInLat: null,
  checkInLon: null,
  checkInLocation: "",
  checkInTime: "",
  checkInStatus: "",
  checkInDescription: "",
  checkOutDate: null,
  checkOutImg: "",
  checkOutLat: null,
  checkOutLon: null,
  checkOutLocation: "",
  checkOutTime: "",
  checkOutStatus: "",
  fullName: "",
  checkOutDescription: "",
  isLocationCheckIn: false,
  checkInLocationName: "",
  isLocationCheckOut: false,
  checkOutLocationName: "",
});

/**
 * function เรียกรายการลงเวลาตาม
 * @param id รายการลงเวลาปฏิบัติงาน
 */
async function fetchDetailByid(id: string, type: string) {
  showLoader();
  await http
    .get(config.API.recordById(id, type))
    .then((res) => {
      const data = res.data.result;
      formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
      formData.checkInImg = data.checkInImg;
      formData.checkInLat = data.checkInLat ? data.checkInLat : "";
      formData.checkInLon = data.checkInLon ? data.checkInLon : "";
      formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-";
      formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
      formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
      formData.checkOutImg = data.checkOutImg;
      formData.checkOutLat = data.checkOutLat ? data.checkOutLat : "";
      formData.checkOutLon = data.checkOutLon ? data.checkOutLon : "";
      formData.checkOutLocation = data.checkOutLocation
        ? data.checkOutLocation
        : "-";
      formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
      formData.fullName = data.fullName;
      formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-";
      formData.checkInDescription = data.checkInDescription
        ? data.checkInDescription
        : "-";
      formData.checkOutDescription = data.checkOutDescription
        ? data.checkOutDescription
        : "-";
      formData.checkInStatus = data.checkInStatus
        ? convertSatatus(data.checkInStatus)
        : "-";
      formData.checkOutStatus = data.checkOutStatus
        ? convertSatatus(data.checkOutStatus)
        : "-";

      formData.isLocationCheckIn = data.isLocationCheckIn;
      formData.checkInLocationName = data.checkInLocationName;
      formData.isLocationCheckOut = data.isLocationCheckOut;
      formData.checkOutLocationName = data.checkOutLocationName;
    })
    .catch((err) => {
      messageError($q, err);
      closePopup();
    })
    .finally(() => {
      hideLoader();
    });
}

/** Function ปิด popup */
function closePopup() {
  props.close ? props.close() : false;
}

const modalMap = ref<boolean>(false);
const titleMap = ref<string>("");
function onClickMap(title: string) {
  titleMap.value = title;
  modalMap.value = !modalMap.value;
}

watch(
  () => props.modal,
  () => {
    props.modal === true &&
      props.detail &&
      fetchDetailByid(props.detail.id, props.typeTab as string);
  }
);
</script>

<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 950px; max-width: 80vw">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle1 text-weight-bold">
          <span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
          <span class="text-primary">{{ formData.fullName }}</span>
        </q-toolbar-title>
        <q-btn
          for="closeDialog"
          icon="close"
          unelevated
          round
          dense
          style="color: #eb0505; background-color: #ffdede"
          @click="closePopup"
        />
      </q-toolbar>
      <q-separator />
      <q-card-section class="q-pa-none">
        <div class="q-pa-md">
          <q-card bordered class="q-pa-sm bg-grey-1">
            <div class="row">
              <div class="col-4">
                <q-list>
                  <q-item>
                    <q-item-section>
                      <q-item-label class="text-grey-8"
                        >ชื่อ-นามสกุล</q-item-label
                      >
                      <q-item-label>{{ formData.fullName }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>
              <div class="col-4">
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-8">
                      วันที่เข้างาน</q-item-label
                    >
                    <q-item-label>{{ formData.checkInDate }}</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
              <div class="col-2" v-if="props.typeTab === 'time-record'">
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-8"
                      >สถานะช่วงเช้า
                    </q-item-label>
                    <q-item-label>{{ formData.checkInStatus }}</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
              <div class="col-2" v-if="props.typeTab === 'time-record'">
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-8"
                      >สถานะช่วงบ่าย</q-item-label
                    >
                    <q-item-label>{{ formData.checkOutStatus }}</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
            </div>
          </q-card>
          <div class="row q-gutter-md q-pt-md">
            <div class="col">
              <q-card flat bordered>
                <div class="q-pa-md q-gutter-md">
                  <div class="row">
                    <div class="col text-grey-8">เวลาเข้างาน</div>
                    <div class="col">{{ formData.checkInTime }}</div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">สถานที่ทำงาน</div>
                    <div class="col" v-if="formData.isLocationCheckIn">
                      ในสถานที่
                    </div>
                    <div class="col" v-else>
                      นอกสถานที่ ({{ formData.checkInLocationName }})
                    </div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">พิกัด</div>
                    <div class="col">
                      {{ formData.checkInLocation }}
                      <div class="text-grey-6" v-if="formData.checkInLat">
                        ({{ formData.checkInLat }}, {{ formData.checkInLon }})
                        <q-btn
                          flat
                          round
                          dense
                          color="primary"
                          icon="map"
                          @click="onClickMap('พิกัดสถานที่เข้างาน')"
                          ><q-tooltip>พิกัดสถานที่เข้างาน</q-tooltip>
                        </q-btn>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 text-grey-8">รูปภาพ</div>
                    <div class="col-5">
                      <q-img
                        v-if="formData.checkInImg"
                        style="
                          height: 120px;
                          max-width: 150px;
                          border-radius: 10px;
                        "
                        :src="formData.checkInImg"
                      />
                      <q-img
                        v-else
                        src="@/assets/avatar_user.jpg"
                        style="
                          height: 120px;
                          max-width: 150px;
                          border-radius: 10px;
                        "
                      />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">หมายเหตุ</div>
                    <div class="col">{{ formData.checkInDescription }}</div>
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col">
              <q-card flat bordered>
                <div class="q-pa-md q-gutter-md">
                  <div class="row">
                    <div class="col text-grey-8">เวลาออกงาน</div>
                    <div class="col">{{ formData.checkOutTime }}</div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">สถานที่ทำงาน</div>
                    <div class="col" v-if="formData.isLocationCheckOut">
                      ในสถานที่
                    </div>
                    <div class="col" v-else>
                      นอกสถานที่ ({{ formData.checkOutLocationName }})
                    </div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">พิกัด</div>
                    <div class="col">
                      {{ formData.checkOutLocation }}
                      <div class="text-grey-6" v-if="formData.checkOutLat">
                        ({{ formData.checkOutLat }},
                        {{ formData.checkOutLon }})<q-btn
                          flat
                          round
                          dense
                          color="primary"
                          icon="map"
                          @click="onClickMap('พิกัดสถานที่ออกงาน')"
                          ><q-tooltip>พิกัดสถานที่ออกงาน</q-tooltip>
                        </q-btn>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 text-grey-8">รูปภาพ</div>
                    <div class="col-5">
                      <q-img
                        v-if="formData.checkOutImg"
                        style="
                          height: 120px;
                          max-width: 150px;
                          border-radius: 10px;
                        "
                        :src="formData.checkOutImg"
                      />
                      <q-img
                        v-else
                        src="@/assets/avatar_user.jpg"
                        style="
                          height: 120px;
                          max-width: 150px;
                          border-radius: 10px;
                        "
                      />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col text-grey-8">หมายเหตุ</div>
                    <div class="col">{{ formData.checkOutDescription }}</div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
        <!-- <q-btn flat label="OK" v-close-popup /> -->
      </q-card-actions>
    </q-card>
  </q-dialog>

  <Map
    :modal="modalMap"
    :title="titleMap"
    :close="onClickMap"
    :data="props.detail"
  />
</template>

<style scoped></style>
