<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  modal: {
    type: Boolean,
  },
  detail: {
    type: Object,
  },
  colse: {
    type: Function,
  },
});
//
const titlename = ref<string>("");
const timeIn = ref<string>("");
const timeOut = ref<string>("");
const coordinatesIn = ref<string>("");
const coordinatesOut = ref<string>("");
const status = ref<string>("");
watch(props, () => {
  if (props.modal) {
    if (props.detail) {
      console.log(props.detail);
      let data = props.detail;
      titlename.value = data.fullName;
      timeIn.value = data.timeIn;
      timeOut.value = data.timeOut;
      coordinatesIn.value = data.coordinatesIn;
      coordinatesOut.value = data.coordinatesOut;
      status.value = data.status;
    }
  }
});
function colsePopup() {
  props.colse ? props.colse() : false;
}
</script>

<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 950px; max-width: 80vw">
      <q-card-section>
        <q-toolbar>
          <q-toolbar-title>
            รายละเอียดการลงเวลาของ
            <span class="text-primary">{{ titlename }}</span>
          </q-toolbar-title>
          <q-btn
            icon="close"
            unelevated
            round
            dense
            style="color: #ff8080; background-color: #ffdede"
            @click="colsePopup"
          />
        </q-toolbar>
      </q-card-section>
      <q-separator />
      <q-card-section class="q-pt-none">
        <div class="q-pa-md">
          <q-banner
            inline-actions
            rounded
            class="bg-grey-2"
            style="border: 2px solid rgb(215, 212, 212)"
          >
            <div class="q-pa-md">
              <div class="row">
                <div class="col-4">
                  <q-list>
                    <q-item>
                      <q-item-section>
                        <q-item-label overline>ชื่อ-นามสกุล</q-item-label>
                        <q-item-label>{{ titlename }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>
                <div class="col-4">
                  <q-item>
                    <q-item-section>
                      <q-item-label overline>วันที่เข้างาน</q-item-label>
                      <q-item-label>05 ต.ค. 56</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
                <div class="col-3">
                  <q-item>
                    <q-item-section>
                      <q-item-label overline>สถานะ</q-item-label>
                      <q-item-label>{{ status }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
                <div class="col">
                  <q-item>
                    <q-item-section>
                      <q-item-label
                        ><q-btn
                          dense
                          flat
                          round
                          color="primary"
                          icon="mdi-pencil"
                        >
                          <q-tooltip>แก้ไข</q-tooltip>
                        </q-btn></q-item-label
                      >
                    </q-item-section>
                  </q-item>
                </div>
              </div>
            </div>
          </q-banner>
          <div class="row q-gutter-md q-mt-md">
            <div class="col">
              <q-card flat bordered>
                <q-card-section>
                  <q-list>
                    <q-item>
                      <q-item-section class="text-grey-5"
                        >เวลาเข้างาน</q-item-section
                      >
                      <q-item-section> {{ timeIn }} </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section class="text-grey-5">พิกัด</q-item-section>
                      <q-item-section> {{ coordinatesIn }} </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section top class="text-grey-5"
                        >รูปภาพ</q-item-section
                      >
                      <q-item-section>
                        <q-img src="https://picsum.photos/500/300" />
                      </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section class="text-grey-5"
                        >หมายเหตุ</q-item-section
                      >
                      <q-item-section> - </q-item-section>
                    </q-item>
                  </q-list>
                </q-card-section>
              </q-card>
            </div>
            <div class="col">
              <q-card flat bordered>
                <q-card-section>
                  <q-list>
                    <q-item>
                      <q-item-section class="text-grey-5"
                        >เวลาออกงาน</q-item-section
                      >
                      <q-item-section> {{ timeOut }} </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section class="text-grey-5">พิกัด</q-item-section>
                      <q-item-section> {{ coordinatesOut }} </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section top class="text-grey-5"
                        >รูปภาพ</q-item-section
                      >
                      <q-item-section>
                        <q-img src="https://picsum.photos/500/300" />
                      </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section class="text-grey-5"
                        >หมายเหตุ</q-item-section
                      >
                      <q-item-section> - </q-item-section>
                    </q-item>
                  </q-list>
                </q-card-section>
              </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>
</template>

<style scoped></style>
