<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="clickBack"
    />
    <label
      >ประวัติบัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าตำแหน่งประเภท สายงาน
      และระดับตำแหน่ง</label
    >
    <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
      <q-btn
        flat
        round
        icon="mdi-menu-left"
        @click="clickPreviousNext('next')"
        :disable="previous == false"
        :color="!previous ? 'grey-7' : 'public'"
      />
      <q-btn
        flat
        round
        icon="mdi-menu-right"
        @click="clickPreviousNext('previous')"
        :disable="next == false"
        :color="!next ? 'grey-7' : 'public'"
      />
      <label>
        {{
          `${
            historyHead.length > 0 && historyHead[indexRow].date != null
              ? date2Thai(historyHead[indexRow].date, false, true)
              : ""
          }`
        }}
      </label>
      <div
        class="q-pa-md row col-12 q-col-gutter-sm"
        v-for="items in historyData"
        :key="items.fullName"
      >
        <q-input
          v-model="items.fullName"
          label="ชื่อ-สกุล"
          class="col-xs-12 col-sm-6"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="items.education"
          label="คุณวุฒิ"
          class="col-xs-12 col-sm-6"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="items.salary"
          label="เงินเดือน"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="items.salaryPosition"
          label="เงินประจำตำแหน่ง"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="items.salaryMonth"
          label="เงินตอบแทนรายเดือน"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />

        <div class="row col-12 q-col-gutter-x-sm">
          <div class="col-xs-12 col-sm-6">
            <q-card bordered flat>
              <div
                class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
              >
                กำหนดเดิม
              </div>
              <q-separator />

              <div class="col-12 row q-pa-sm q-col-gutter-xs">
                <q-input
                  v-model="items.oldOrganizationShortName"
                  label="รหัสส่วนราชการ"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldOrganizationOrganization"
                  label="ชื่อหน่วยงาน"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionNum"
                  label="ตำแหน่งเลขที่"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionType"
                  label="ตำแหน่งประเภท"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionExecutive"
                  label="ตำแหน่งทางการบริหาร"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionExecutiveSide"
                  label="ด้านทางบริหาร"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionPath"
                  label="ตำแหน่งในสายงาน"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionPathSide"
                  label="ด้าน/สาขา"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.oldPositionLevel"
                  label="ระดับตำแหน่ง"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
              </div>
            </q-card>
          </div>
          <div class="col-xs-12 col-sm-6">
            <q-card bordered flat>
              <div
                class="q-pa-xs bg-grey-2 row flex items-center justify-center text-bold q-py-sm q-px-md"
              >
                กำหนดใหม่
              </div>
              <q-separator />

              <div class="col-12 row q-pa-sm q-col-gutter-xs">
                <q-input
                  v-model="items.newOrganizationShortName"
                  label="รหัสส่วนราชการ"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newOrganizationOrganization"
                  label="ชื่อหน่วยงาน"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionNum"
                  label="ตำแหน่งเลขที่"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionType"
                  label="ตำแหน่งประเภท"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionExecutive"
                  label="ตำแหน่งทางการบริหาร"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionExecutiveSide"
                  label="ด้านทางบริหาร"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionPath"
                  label="ตำแหน่งในสายงาน"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionPathSide"
                  label="ด้าน/สาขา"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
                <q-input
                  v-model="items.newPositionLevel"
                  label="ระดับตำแหน่ง"
                  class="col-xs-12 col-sm-6"
                  hide-bottom-space
                  :outlined="false"
                  dense
                  lazy-rules
                  :readonly="true"
                  :borderless="true"
                />
              </div>
            </q-card>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import type {
  ResponseHistory,
  ResponseHistoryHead,
} from "@/modules/02_organizational/interface/response/Mapping";

const $q = useQuasar(); // show dia
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();

const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
const id = ref<string>("");
const previous = ref<boolean>(false);
const next = ref<boolean>(false);
const indexRow = ref<number>(0);
const historyHead = ref<ResponseHistoryHead[]>([]);
const historyData = ref<ResponseHistory[]>([]);

onMounted(async () => {
  hideLoader();
  if (route.params.id != undefined) {
    id.value = route.params.id.toString();

    await fetchHistory();
    if (historyHead.value.length > 0) {
      await fetchData();
    }
  }
});

const clickBack = () => {
  router.push({ name: "manageReport2" });
};

const clickPreviousNext = async (page: string) => {
  const index: number =
    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
  let length: number = historyHead.value.length;
  previous.value = index == 0 ? false : true;
  next.value = index == length - 1 ? false : true;
  indexRow.value = index;
  await fetchData();
};

const fetchHistory = async () => {
  showLoader();
  await http
    .get(config.API.report2HistoryId(id.value))
    .then((res) => {
      const data = res.data.result;
      let header: ResponseHistoryHead[] = [];
      data.map((r: any) => {
        header.push({
          historyId: r.historyId,
          date: new Date(r.date),
        });
      });
      historyHead.value = header;
    })
    .catch((e) => {})
    .finally(async () => {
      hideLoader();
      if (historyHead.value.length > 1) {
        next.value = true;
        previous.value = false;
      } else {
        next.value = false;
        previous.value = false;
      }
    });
};

const fetchData = async () => {
  showLoader();
  await http
    .get(
      config.API.report2HistoryDetailId(
        historyHead.value[indexRow.value].historyId
      )
    )
    .then((res) => {
      const data = res.data.result;
      let responeseData: ResponseHistory[] = [];
      data.map((r: any) => {
        responeseData.push({
          fullName: r.fullName ?? "-",
          education: r.fullName ?? "-",
          salary: r.salary,
          salaryPosition: r.salaryPosition,
          salaryMonth: r.salaryMonth,
          oldOrganizationShortName: r.oldOrganizationShortName ?? "-",
          oldOrganizationOrganization: r.oldOrganizationOrganization ?? "-",
          oldPositionNum: r.oldPositionNum ?? "-",
          oldPositionType: r.oldPositionType ?? "-",
          oldPositionExecutive: r.oldPositionExecutive ?? "-",
          oldPositionExecutiveSide: r.oldPositionExecutiveSide ?? "-",
          oldPositionPath: r.oldPositionPath ?? "-",
          oldPositionPathSide: r.oldPositionPathSide ?? "-",
          oldPositionLevel: r.oldPositionLevel ?? "-",
          newOrganizationShortName: r.newOrganizationShortName ?? "-",
          newOrganizationOrganization: r.newOrganizationOrganization ?? "-",
          newPositionNum: r.newPositionNum ?? "-",
          newPositionType: r.newPositionType ?? "-",
          newPositionExecutive: r.newPositionExecutive ?? "-",
          newPositionExecutiveSide: r.newPositionExecutiveSide ?? "-",
          newPositionPath: r.newPositionPath ?? "-",
          newPositionPathSide: r.newPositionPathSide ?? "-",
          newPositionLevel: r.newPositionLevel ?? "-",
        });
      });
      historyData.value = responeseData;
    })
    .catch((e) => {})
    .finally(async () => {
      hideLoader();
    });
};
</script>
<style>
.expan .q-expansion-item--expanded {
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin: 5px 0px !important;
  background: #eaeaea4a !important;
}
.expan .q-expansion-item {
  border: 1px solid #eaeaea;
  margin-top: -1px;
  border-radius: 2px;
  background: white;
}
.my-custom-toggle {
  border: 1px solid #02a998;
}
</style>
