<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useQuasar } from "quasar";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
const save = ref<boolean>(true);

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 rows = ref<any[]>([]);
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
// const graduationDate = new Date(graduationExample);
// rows.value[0].graduation = date2Thai(graduationDate, false, false);

//--------------------------------------------------------------------//

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" }),
  },
]);
const myForm = ref<any>([]);
const personalForm = ref<any>([]);
const selection = ref<any>([]);

const $q = useQuasar();

function isRequired(val: any): boolean | string {
  return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
}

watch(props, () => {
  if (props.Modal === true) {
    // console.log(props.getdetail);
    fetchData();
  }
});

const validateData = () => {
  const selectedIds = personalForm.value.isProperty;

  const selectedItems = personalForm.value.isProperty.filter(
    (item: any) => item.value === true
    // selectedIds.includes(item.value)
  );
  return (
    selectedItems.length > 0 || selectedItems.length === selectedIds.length
  );
};

// const ClickSave = () => {
//   const isValid = validateData();

//   if (isValid) {
//     // props.close();
//     // props.validate();
//     // putpersonalForm();
//     modalConfirm(
//       $q,
//       "การยืนยัน",
//       "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
//       putpersonalForm
//     );
//   } else {
//     success($q, "กรอกให้ครบ");
//     console.log();
//   }
// };
const fetchData = async () => {
  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) => {
      console.log("e", e);
    })
    .finally(() => {
      hideLoader();
    });
};

const formBmaofficer = (val: string) => {
  switch (val) {
    case "OFFICER":
      return "ขรก.กทม. สามัญ";
    case "EMPLOYEE_PERM":
      return "ลูกจ้างประจำ";
    case "EMPLOYEE_TEMP":
      return "ลูกจ้างชั่วคราว";
    default:
      return "";
  }
};

const close = async () => {
  props.close();
  selection.value = [];
  rows.value = [];
};
const putpersonalForm = async () => {
  props.close();
  // await http
  //   .put(
  //     config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
  //     personalForm.value.isProperty
  //   )
  //   .then((res) => {
  //     success($q, res.data.message);
  //   })
  //   .catch((e) => {
  //     console.log(e);
  //   })
  //   .finally(() => {
  //     props.close();
  //     props.validate();
  //   });
};
</script>
<template>
  <q-dialog v-model="props.Modal">
    <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-card class="card-exam q-pa-sm">
                    <div class="row">
                      <div class="col-4 q-pa-xs header-sub-text-exam">
                        <div>ประเภท</div>
                        <div>ภาค ก</div>
                        <div>ภาค ข</div>
                        <div>ภาค ค</div>
                        <div>รวมทั้งหมด</div>
                      </div>
                      <div class="col-4 q-pa-xs text-right">
                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointTotalA }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointTotalB }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointTotalC }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointTotal }}
                        </div>
                      </div>
                      <div
                        class="col-4 q-pa-xs header-sub-text-exam-2 text-right"
                      >
                        <div class="header-sub-text-exam-2 text-right">
                          ผลการสอบ
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointA }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointB }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.pointC }}
                        </div>
                        <div class="sub-text-exam">
                          {{ personalForm.point }}
                        </div>
                      </div>
                    </div>
                  </q-card>
                </div>
                <div class="col-1"></div>
                <div class="col-5 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 class="contanier-box-mini"> -->
          <!-- <q-card bordered class="card-panding">
              <div class="col-12 row items-center q-pa-sm header-text">
                เอกสารเพิ่มเติม
              </div> -->
          <!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
                <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
                  :rules="[isRequired]" class="checkbox-group" />
                <q-separator />
              </div> -->
          <!-- </q-card>
          </div> -->
        </div>
        <!-- <q-separator />
        <div>
          <DialogFooter
            @click="ClickSave"
            :model="props.Modal"
            :editvisible="save"
            :validate="validateData"
          />
        </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>
