<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";

import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type {
  FormAddHistoryEmployee,
  FormAddHistoryProject,
} from "@/modules/15_development/interface/request/Main";
import type { QTableProps } from "quasar";
import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";

import FormHistory from "@/modules/15_development/components/FormHistory.vue";

/** importStore*/

/** use*/
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const id = ref<string>(route.params.id as string);
const dateOrder = ref<Date | null>(null);
const order = ref<string>("");

const dateHisStart = ref<Date | null>(null);
const dateHisEnd = ref<Date | null>(null);
const trainingDays = ref<string>("");

/** ตัวแปรข้อมูลข้าราชการ */
const formMain = reactive<FormAddHistoryEmployee>({
  id: "",
  name: "", //ชื่อ-นามสกุล
  prefix: "", //คำนำหน้าชื่อ
  rank: "", //ยศ
  firstName: "", //ชื่อ
  lastName: "", //นามสกุล
  citizenId: "", //เลขประจําตัวประชาชน
  level: "", //ระดับตําแหน่ง
  type: "", //ประเภทตําแหน่ง
  posLevelId: "", //id ระดับตําแหน่ง
  posTypeId: "", //id ประเภทตําแหน่ง
  position: "", //ตําแหน่ง
  posNo: "", //ตำแหน่งเลขที่
  oc: "", //หน่วยงานที่สังกัด
});

/** ตัวแปรข้อมูลโครงสร้าง */
const formMainProject = reactive<FormAddHistoryProject>({
  id: "",
  project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
  year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
  trainingStart: null, //วันเริ่มต้นการฝึกอบรม
  trainingEnd: null, //วันสิ้นสุดการฝึกอบรม
  totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
  location: "", //สถานที่ไปศึกษาดูงาน
  topic: "", //หัวข้อการไปศึกษาดูงาน
  organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
});

const rows = ref<DataTrainingTopics[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "topicAcademic",
    align: "left",
    label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
    sortable: false,
    field: "topicAcademic",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "addressAcademic",
    align: "left",
    label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
    sortable: true,
    field: "addressAcademic",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "province",
    align: "left",
    label: "จังหวัด",
    sortable: false,
    field: "province",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** ดึงข้อมูล */
function fetchDataDetail() {
  showLoader();
  http
    .get(config.API.developmentHistoryListByid("employee", id.value))
    .then((res) => {
      const data = res.data.result;
      formMain.id = id.value;
      formMain.citizenId = data.citizenId ? data.citizenId : null;
      formMain.name = data.firstName
        ? `${data.prefix ? data.prefix : ""}${
            data.firstName ? data.firstName : ""
          } ${data.lastName ? data.lastName : ""}`
        : null;
      formMain.prefix = data.prefix ? data.prefix : null;
      formMain.firstName = data.firstName ? data.firstName : null;
      formMain.lastName = data.lastName ? data.lastName : null;

      formMain.position = data.position ? data.position : null;
      formMain.posLevelId = data.posLevelId ? data.posLevelId : null;
      formMain.posTypeId = data.posTypeId ? data.posTypeId : null;
      formMain.type = data.posTypeName ? data.posTypeName : null;
      formMain.level = data.posLevelName ? data.posLevelName : null;
      formMain.positionSide = data.positionSide ? data.positionSide : null;
      formMain.oc = data.org ? data.org : null;

      formMainProject.id = data.developmentId ? data.developmentId : null;
      formMainProject.project = data.projectName ? data.projectName : null;
      formMainProject.year = data.year ? data.year : null;
      formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
      formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
      formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
      formMainProject.location = data.addressAcademic
        ? data.addressAcademic
        : null;
      formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
      formMainProject.studyStart = data.dateStudyStart
        ? data.dateStudyStart
        : null;
      formMainProject.studyEnd = data.dateStudyEnd ? data.dateStudyEnd : null;
      formMainProject.organizingTraining = data.org ? data.org : null;

      dateOrder.value = data.dateOrder;
      order.value = data.order;
      rows.value = data.academic;

      dateHisStart.value = data.dateHisStart;
      dateHisEnd.value = data.dateHisEnd;
      trainingDays.value = data.trainingDays;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
onMounted(() => {
  if (id.value) {
    fetchDataDetail();
  }
});
</script>

<template>
  <div class="toptitle text-dark">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    <span> ประวัติการฝึกอบรม/ดูงาน ลูกจ้าง </span>
  </div>
  <q-card flat bordered>
    <q-card-section>
      <!-- Card ข้อมูลลูกจ้าง -->
      <q-card flat bordered style="border: 1px solid #d6dee1">
        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
          ข้อมูลลูกจ้าง
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md q-col-gutter-md">
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  เลขประจําตัวประชาชน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.citizenId ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ชื่อ-นามสกุล
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.name ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ตำแหน่ง
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.position ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  กลุ่มงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.type ?? "-" }}
                </div>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ระดับชั้นงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.level ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หน่วยงานที่สังกัด
                </div>

                <div class="col-12 col-sm-12 col-md-7 text-html">
                  {{ formMain.oc ?? "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>

      <!-- Card ข้อมูลโครงการ -->
      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
          ข้อมูลโครงการ
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md q-col-gutter-md">
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ชื่อโครงการ/หลักสูตรการฝึกอบรม
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.project ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.year
                      ? Number(formMainProject.year) + 543
                      : "-"
                  }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หน่วยงานที่รับผิดชอบ
                </div>

                <div class="col-12 col-sm-12 col-md-7 text-html">
                  {{ formMainProject.organizingTraining ?? "-" }}
                </div>
              </div>
              <!-- <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.topic ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  สถานที่ไปฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.location ?? "-" }}
                </div>
              </div> -->
            </div>
          </div>
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.trainingStart
                      ? date2Thai(formMainProject.trainingStart)
                      : "-"
                  }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.trainingEnd
                      ? date2Thai(formMainProject?.trainingEnd)
                      : "-"
                  }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.totalTraining
                      ? `${formMainProject.totalTraining} วัน`
                      : "-"
                  }}
                </div>
              </div>
              <!-- <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หน่วยงานที่รับผิดชอบ
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.organizingTraining ?? "-" }}
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </q-card>

      <!--card  หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน-->
      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
          หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md q-col-gutter-md">
          <div class="col-12">
            <d-table
              :columns="columns"
              :rows="rows"
              row-key="id"
              flat
              bordered
              :paging="true"
              dense
              :rows-per-page-options="[10, 25, 50, 100]"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <span class="text-weight-medium">{{ col.label }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div class="table_ellipsis2">
                      {{ col.value ?? "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </d-table>
          </div>
        </div>
      </q-card>
      <FormHistory
        :date-his-start="dateHisStart"
        :date-his-end="dateHisEnd"
        :training-days="trainingDays"
        :order="order"
        :date-order="dateOrder"
      />
    </q-card-section>
  </q-card>
</template>
