<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";

import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, date2Thai, messageError } = mixin;

const rows = ref<any[]>([]);
const myForm = ref<any>([]);
const selection = ref<any>([]);
const personalForm = ref<any>([]);

/** รับค่ามาจากหน้าหลัก */
const props = defineProps({
  Modal: Boolean,
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  personalId: {
    type: String,
    default: "",
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
});

/**หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "university",
    align: "center",
    label: "สถานศึกษา",
    sortable: true,
    field: "university",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "degree",
    align: "center",
    label: "วุฒิการศึกษา",
    sortable: true,
    field: "degree",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "major",
    align: "center",
    label: "สาขาวิชาเอก",
    sortable: true,
    field: "major",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "graduation",
    align: "center",
    label: "วันที่สำเร็จการศึกษา",
    sortable: true,
    field: "graduation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/** get ข้อมูลการศึกษา */
async function fetchData(){
  showLoader();
  await http
    .get(config.API.getDatapersonal(props.personalId))
    .then((res) => {
      personalForm.value = res.data.result;
      personalForm.value.education.map((e: any) => {
        rows.value.push({
          university: e.name,
          degree: e.degree,
          major: e.field,
          graduation: date2Thai(e.finishDate),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * convert text
 * @param val type
 */
function formBmaofficer(val: string){
  switch (val) {
    case "OFFICER":
      return "ขรก.กทม. สามัญ";
    case "EMPLOYEE_PERM":
      return "ลูกจ้างประจำ";
    case "EMPLOYEE_TEMP":
      return "ลูกจ้างชั่วคราว";
    default:
      return "";
  }
};

/** ปิด POPUP ข้อมูล */
async function close(){
  props.close();
  selection.value = [];
  rows.value = [];
};

/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */ 
watch(props, () => {
  if (props.Modal === true) {
    fetchData();
  }
});
</script>
<template>
  <q-dialog v-model="props.Modal" persistent>
    <q-card style="max-width: 100%; width: 80%">
      <q-form ref="myForm">
        <div class="row">
          <DialogHeader
            :title="`รายละเอียดของ ${personalForm.fullName}`"
            @click="close"
          />
        </div>

        <q-separator />

        <div class="contanier-box-main">
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">
                ข้อมูลทั่วไป
                <span
                  v-if="personalForm.bmaOfficer != null"
                  class="check-officer"
                >
                  <q-icon name="mdi-check" />
                  {{ formBmaofficer(personalForm.bmaOfficer) }}
                </span>
              </div>

              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">
                  <div class="q-pb-md">เลขประจำตัวประชาชน</div>
                  <div>วัน/เดือน/ปีเกิด</div>
                </div>

                <div class="col-4 sub-text">
                  <div class="q-pb-md">
                    {{ personalForm.idCard }}
                  </div>
                  <div>
                    {{ date2Thai(personalForm.dateOfBirth) }}
                  </div>
                </div>

                <div class="col-2 header-sub-text">
                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
                  <div>เพศ</div>
                </div>
                <div class="col-3 sub-text">
                  <div class="q-pb-md">
                    {{ personalForm.fullName }}
                  </div>
                  <div>
                    {{ personalForm.gender }}
                  </div>
                </div>
                
              </div>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">ที่อยู่</div>
                <div class="col-9 sub-text">
                  {{ personalForm.address }}
                </div>
              </div>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
              <q-table
                ref="table"
                :rows="rows"
                :columns="columns"
                flat
                bordered
                class="custom-header-table"
                virtual-scroll
                :virtual-scroll-sticky-size-start="48"
                dense
                hide-bottom
              >
              </q-table>
            </q-card>
          </div>
          
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การสอบ</div>
              <div class="row q-pa-xs">
                <div class="col-6 q-pt-sm q-pl-lg">
                  <div class="row">
                    <div class="col-7 header-sub-text">
                      <div class="q-pb-sm">ผลการสอบ</div>
                      <div class="q-pb-sm">ลำดับที่สอบได้</div>
                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
                    </div>
                    <div class="col-5 sub-text-exam">
                      <div class="q-pb-sm">
                        {{ personalForm.pass }}
                      </div>
                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<style lang="scss" scoped>
.icon-officer {
  color: #00aa86;
  padding-left: 20px;
}

.check-officer {
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  color: #00aa86;
  padding-left: 20px;
}

.contanier-box-main {
  padding: 10px 21px 10px 21px;
}

.contanier-box-mini {
  padding: 10px 0px 10px 0px;
}

.card-panding {
  padding: 15px 21px 15px 21px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #4f4f4f;
}

.header-sub-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #818181;
}

.sub-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.0025em;
  color: #35373c;
}

.card-exam {
  border-radius: 5px;
  background: #fafafa;
}

.header-sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #818181;
}

.header-sub-text-exam-2 {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #00aa86;
}

.sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.checkbox-group {
  font-size: 16px;
  font-weight: 400;
  color: #35373c;
}
</style>
