<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  modal: {
    type: Boolean,
  },
  detail: {
    type: Object,
  },
  colse: {
    type: Function,
  },
});
const statusEdit = ref<boolean>(false);
// รายละเอียดข้อมูล
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;
    }
  }
});
// ปิด popup
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 style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
            <span class="text-primary">{{ titlename }}</span>
          </q-toolbar-title>
          <q-btn
            icon="close"
            unelevated
            round
            dense
            style="color: #eb0505; 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(239, 236, 236)"
          >
            <div class="row">
              <div class="col-4">
                <q-list>
                  <q-item>
                    <q-item-section>
                      <q-item-label class="text-grey-5"
                        >ชื่อ-นามสกุล</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 class="text-grey-5">
                      วันที่เข้างาน</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 class="text-grey-5">สถานะ</q-item-label>
                    <q-item-label>{{ status }}</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
              <div class="col">
                <q-btn
                  v-if="!statusEdit"
                  dense
                  flat
                  round
                  color="primary"
                  icon="mdi-pencil"
                  size="sm"
                  class="q-mt-lg"
                  @click="statusEdit = true"
                >
                  <q-tooltip>แก้ไข</q-tooltip>
                </q-btn>
                <div v-if="statusEdit">
                  <q-btn
                    dense
                    flat
                    round
                    color="red"
                    icon="mdi-undo"
                    size="sm"
                    class="q-mt-lg"
                    @click="statusEdit = false"
                  >
                    <q-tooltip>ยกเลิก</q-tooltip>
                  </q-btn>
                  <q-btn
                    dense
                    flat
                    round
                    color="secondary"
                    icon="save"
                    size="sm"
                    class="q-mt-lg"
                  >
                    <q-tooltip>บันทึกข้อมูล</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </div>
          </q-banner>
          <div class="row q-gutter-md q-mt-md">
            <div class="col">
              <q-card flat bordered>
                <q-card-section>
                  <div class="q-pa-md q-gutter-md">
                    <div class="row">
                      <div class="col text-grey-6">เวลาเข้างาน</div>
                      <div class="col">{{ timeIn }}</div>
                    </div>
                    <div class="row">
                      <div class="col text-grey-6">พิกัด</div>
                      <div class="col">{{ coordinatesIn }}</div>
                    </div>
                    <div class="row">
                      <div class="col-6 text-grey-6">รูปภาพ</div>
                      <div class="col-5">
                        <q-img
                          style="
                            height: 120px;
                            max-width: 150px;
                            border-radius: 10px;
                          "
                          src="https://picsum.photos/500/500"
                        />
                      </div>
                    </div>
                    <div class="row">
                      <div class="col text-grey-6">หมายเหตุ</div>
                      <div class="col">-</div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
            <div class="col">
              <q-card flat bordered>
                <q-card-section>
                  <div class="q-pa-md q-gutter-md">
                    <div class="row">
                      <div class="col text-grey-6">เวลาออกงาน</div>
                      <div class="col">{{ timeOut }}</div>
                    </div>
                    <div class="row">
                      <div class="col text-grey-6">พิกัด</div>
                      <div class="col">{{ coordinatesOut }}</div>
                    </div>
                    <div class="row">
                      <div class="col-6 text-grey-6">รูปภาพ</div>
                      <div class="col-5">
                        <q-img
                          style="
                            height: 120px;
                            max-width: 150px;
                            border-radius: 10px;
                          "
                          src="https://picsum.photos/500/500"
                        />
                      </div>
                    </div>
                    <div class="row">
                      <div class="col text-grey-6">หมายเหตุ</div>
                      <div class="col">-</div>
                    </div>
                  </div>
                </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>
