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

import type {
  EducationForm,
  CertificatesForm,
} from "@/modules/06_evaluate/interface/evalute";

import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";

const mixin = useCounterMixin();
const store = useEvaluateDetailStore();
const $q = useQuasar();

const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const {
  columnsCertificates,
  columnSalaries,
  columnTraining,
  columnProjectsProposed,
} = store;

const emit = defineEmits(["update:formDeital"]);

const formDetail = reactive({
  userId: "",
  citizenId: "",
  prefix: "",
  fullName: "",
  position: "",
  oc: "",
  salary: "",
  positionLevel: "",
  posNo: "",
  birthDate: "",
  govAge: "",
  educations: [] as EducationForm[],
  certificates: [],
  salaries: [],
  trainings: [],
  assessments: [],
  // Type: "",
  // Step: "",
});

async function fetchDetail() {
  showLoader();
  await http
    .get(config.API.evaluationDetail())
    .then((res) => {
      const data = res.data.result;
      formDetail.userId = data.id;
      formDetail.citizenId = data.citizenId;
      formDetail.prefix = data.prefix;
      formDetail.fullName = `${data.firstName}  ${data.lastName}`;
      formDetail.position = data.position;
      formDetail.oc = data.oc;
      formDetail.salary = data.salary;
      formDetail.positionLevel = data.positionLevel;
      formDetail.posNo = data.posNo;
      formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
      formDetail.govAge = data.govAge;
      formDetail.educations = data.educations;

      formDetail.certificates = data.certificates.map(
        (e: CertificatesForm) => ({
          certificateNo: e.certificateNo,
          certificateType: e.certificateType,
          expireDate: date2Thai(e.expireDate),
          issueDate: date2Thai(e.issueDate),
          issuer: e.issuer,
        })
      );
      formDetail.salaries = data.salaries.map((e: any) => ({
        amount: e.amount,
        date: date2Thai(e.date),
        mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
        posNo: e.posNo,
        position: e.position,
        positionSalaryAmount: e.positionSalaryAmount
          ? e.positionSalaryAmount
          : 0,
        refCommandDate: e.refCommandDate ? e.refCommandDate : "",

        refCommandNo: e.refCommandNo ? e.refCommandNo : "",
        salaryClass: e.salaryClass ? e.salaryClass : "",
        salaryRef: e.salaryRef ? e.salaryRef : "",
        salaryStatus: e.salaryStatus ? e.salariesStatus : "",
        //
        oc: "-",
        lineWork: "-",
        side: "-",
        positionType: "-",
        level: "-",
        positionsAdministrative: "-",
        aspectAdministrative: "-",
      }));
      formDetail.trainings = data.trainings.map((e: any) => ({
        dateOrder: date2Thai(e.dateOrder),
        department: e.department,
        duration: e.duration,
        endDate: date2Thai(e.endDate),
        name: e.name,
        numberOrder: e.numberOrder,
        place: e.place,
        startDate: date2Thai(e.startDate),
        topic: e.topic,
        yearly: e.yearly,
      }));
      formDetail.assessments = data.assessments;
      // fromDetail.Type = data.
      // fromDetail.Step = data.

      console.log(formDetail);

      emit("update:formDeital", data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  fetchDetail();
});
</script>

<template>
  <q-scroll-area style="height: 450px; max=width: 100%">
    <div class="q-pa-xs">
      <q-card class="q-gutter-md" style="max-width: 100%">
        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
          </div>
          <q-separator />

          <div class="row q-pa-sm">
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.prefix"
                label="คำนำหน้าชื่อ"
              ></q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.fullName"
                label="ชื่อ - นามสกุล"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="formDetail.birthDate"
                readonly
                label="วันเดือนปีเกิด"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.position"
                label="ตำแหน่ง"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.posNo"
                label="ตำแหน่งเลขที่"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.oc"
                label="สังกัด"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.salary"
                label="เงินเดือน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.positionLevel"
                label="ระดับปัจจุบัน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.positionLevel"
                label="ระดับที่ประเมิน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.govAge"
                label="อายุราชการ"
              />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm"
            v-for="(education, index) in formDetail.educations"
            :key="index"
          >
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.educationLevel"
                label="ระดับศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.institute"
                label="สถานศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.startDate)"
                readonly
                label="ตั้งแต่"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.endDate)"
                readonly
                label="ถึง"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.finishDate)"
                readonly
                label="วันทราสำเร็จการศึกษา"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.degree"
                label="วุฒิการศึกษาในตําแหน่ง"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.degree"
                label="วุฒิการศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.field"
                label="สาขาวิชา/ทาง"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.fundName"
                label="ทุน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.gpa"
                label="เกรดเฉลี่ย"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-6">
              <q-input
                borderless
                readonly
                :model-value="education.country"
                label="ประเทศ"
              />
            </div>
          </div>
          <q-separator />
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData
                :columns="columnsCertificates"
                :row="formDetail.certificates"
              />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnSalaries" :row="formDetail.salaries" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData
                :columns="columnTraining"
                :row="formDetail.trainings"
              />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <!-- <TableData
                :columns="columnTraining"
                :row="formDetail.Trainings"
              /> -->
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnProjectsProposed" />
            </div>
          </div>
        </q-card>
      </q-card>
    </div>
  </q-scroll-area>
</template>

<style scoped></style>
