<script setup lang="ts">
import { ref, onMounted } from "vue";
// import type { RequestItemsObject } from "@/modules/04_registry/interface/request/Main";
import type { QTableProps } from "quasar";
// import type { ResponseObject } from "@/modules/04_registry/interface/response/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

interface RequestItemsObject {
  id: string;
  fullname: string;
  fullnameOld: string;
  avatar: string | null;
  citizenId: string;
  position: string;
  positionPathSide: string | null;
  numberPosition: string;
  positionLine: string;
  positionType: string;
  govAge: number;
  positionLevel: string;
  positionExecutive: string | null;
  positionExecutiveSide: string | null;
  positionEmployeePosition: string | null;
  positionEmployeePositionSide: string | null;
  positionEmployeeLevel: string | null;
  positionEmployeeGroup: string | null;
  oc: string;
  dateAppoint: string | null;
  dateStart: string | null;
  createdAt: string | null;
  salaryDate: string | null;
  leaveReason: string | null;
  age: number;
  amount: string;
  insignia: string | null;
  insigniaLast: string | null;
  isLeave: string;
  leaveDateOrder: string | null;
  refSalary: string | null;
  isVerified: boolean;
}

interface ResponseObject {
  id: string;
  fullname: string;
  fullnameOld: string;
  citizenId: string;
  dateAppoint: string | null;
  dateStart: string | null;
  createdAt: string | null;
  salaryDate: string | null;
  refSalary: string | null;
  amount: number | null;
  insigniaLast: string | null;
  insignia: string | null;
  avatar: string | null;
  position: string;
  positionPathSide: string | null;
  posNo: string;
  positionLine: string;
  positionType: string;
  positionLevel: string;
  positionExecutive: string | null;
  positionExecutiveSide: string | null;
  positionEmployeePosition: string | null;
  positionEmployeePositionSide: string | null;
  positionEmployeeLevel: string | null;
  positionEmployeeGroup: string | null;
  govAge: number;
  age: number;
  oc: string;
  leaveReason: string | null;
  isLeave: boolean;
  leaveDateOrder: string | null;
  isVerified: boolean;
}

const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
const rows = ref<RequestItemsObject[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "isVerified",
    align: "center",
    label: "",
    sortable: true,
    field: "isVerified",
    headerStyle: "min-width: 50px",
  },
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "numberPosition",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "numberPosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionPathSide",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionPathSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionType",
    align: "left",
    label: "ประเภท",
    sortable: true,
    field: "positionType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionExecutive",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "positionExecutive",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionExecutiveSide",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "oc",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "oc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "amount",
    align: "left",
    label: "เงินเดือน",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insignia",
    align: "left",
    label: "เครื่องราชฯ",
    sortable: true,
    field: "insignia",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insigniaLast",
    align: "left",
    label: "เครื่องราชฯ(เดิม)",
    sortable: true,
    field: "insigniaLast",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ(ปี)",
    sortable: true,
    field: "govAge",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่บรรจุ",
    sortable: true,
    field: "dateAppoint",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryDate",
    align: "left",
    label: "วันที่เข้าสู่ตำแหน่ง",
    sortable: true,
    field: "salaryDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "refSalary",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "refSalary",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "age",
    align: "left",
    label: "อายุ",
    sortable: true,
    field: "age",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullnameOld",
    align: "left",
    label: "ชื่อ-นามสกุล(เดิม)",
    sortable: true,
    field: "fullnameOld",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "isLeave",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "isLeave",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "leaveDateOrder",
    align: "left",
    label: "วันที่พ้นราชการ",
    sortable: true,
    field: "leaveDateOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

const next = (id: string) => {
  router.push(`/registry/${id}`);
};

async function fetchData() {
  // showLoader();
  await http
    .get(config.API.listVerified())
    .then((res) => {
      let data = res.data.result;
      rows.value = [];
      data.map((item: ResponseObject) => {
        rows.value.push({
          id: item.id,
          fullname: item.fullname,
          fullnameOld: item.fullnameOld == "" ? "-" : item.fullnameOld,
          avatar: item.avatar,
          citizenId: item.citizenId,
          position: item.position,
          positionPathSide: item.positionPathSide,
          numberPosition: item.posNo,
          positionLine: item.positionLine,
          positionType: item.positionType,
          govAge: item.govAge,
          positionLevel: item.positionLevel,
          positionExecutive:
            item.positionExecutive == null ? "-" : item.positionExecutive,
          positionExecutiveSide:
            item.positionExecutiveSide == null
              ? "-"
              : item.positionExecutiveSide,
          positionEmployeePosition:
            item.positionEmployeePosition == null
              ? "-"
              : item.positionEmployeePosition,
          positionEmployeePositionSide:
            item.positionEmployeePositionSide == null
              ? "-"
              : item.positionEmployeePositionSide,
          positionEmployeeLevel:
            item.positionEmployeeLevel == null
              ? "-"
              : item.positionEmployeeLevel,
          positionEmployeeGroup:
            item.positionEmployeeGroup == null
              ? "-"
              : item.positionEmployeeGroup,
          oc: item.oc,
          dateAppoint:
            item.dateAppoint == null
              ? null
              : date2Thai(new Date(item.dateAppoint)),
          dateStart:
            item.dateStart == null ? null : date2Thai(new Date(item.dateStart)),
          createdAt:
            item.createdAt == null ? null : date2Thai(new Date(item.createdAt)),
          salaryDate:
            item.salaryDate == null
              ? null
              : date2Thai(new Date(item.salaryDate)),
          leaveReason: item.leaveReason,
          age: item.age,
          amount: item.amount == null ? "" : item.amount.toLocaleString(),
          insignia: item.insignia,
          insigniaLast: item.insigniaLast,
          isLeave:
            item.isLeave == false
              ? "ครอง"
              : `${typeRetire(item.leaveReason as string)}`,
          leaveDateOrder:
            item.leaveDateOrder == null
              ? null
              : date2Thai(new Date(item.leaveDateOrder)),
          refSalary: item.refSalary,
          isVerified: item.isVerified,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await fetchData();
  // const data = [
  //   {
  //     id: "08dbc953-61ac-47eb-82d7-0e72df7669b5",
  //     fullname: "นายณัฐพงศ์ ดิษยบุตร",
  //     fullnameOld: "",
  //     citizenId: "3100903812600",
  //     dateAppoint: "1989-02-01T00:00:00",
  //     dateStart: "1989-02-02T00:00:00",
  //     createdAt: "2023-10-10T12:40:15.334501",
  //     salaryDate: "2023-10-11T00:00:00",
  //     refSalary:
  //       "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
  //     amount: 76800.0,
  //     insigniaLast: null,
  //     insignia: null,
  //     avatar: null,
  //     position: "คีตศิลปิน",
  //     positionPathSide: null,
  //     posNo: "กบห.2",
  //     positionLine: "จัดการงานทั่วไป",
  //     positionType: "ทั่วไป",
  //     positionLevel: "ปฏิบัติงาน",
  //     positionExecutive: "หัวหน้าสำนักงาน ",
  //     positionExecutiveSide: null,
  //     positionEmployeePosition: null,
  //     positionEmployeePositionSide: null,
  //     positionEmployeeLevel: null,
  //     positionEmployeeGroup: null,
  //     govAge: 35,
  //     age: 35,
  //     oc: "กลุ่มงานช่วยนักบริหาร",
  //     leaveReason: null,
  //     isLeave: false,
  //     leaveDateOrder: null,
  //     isVerified: false,
  //   },
  //   {
  //     id: "08dbc953-6268-4e2c-80a3-aca65eedc6d0",
  //     fullname: "นางสาวอรัญญา พรไชยะ",
  //     fullnameOld: "",
  //     citizenId: "3101502080439",
  //     dateAppoint: "1990-08-16T00:00:00",
  //     dateStart: "1990-08-16T00:00:00",
  //     createdAt: "2023-10-10T12:40:16.746683",
  //     salaryDate: "2023-10-10T00:00:00",
  //     refSalary: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}",
  //     amount: 76800.0,
  //     insigniaLast: null,
  //     insignia: null,
  //     avatar: null,
  //     position: "นักบริหาร",
  //     positionPathSide: null,
  //     posNo: "สกก.2",
  //     positionLine: "บริหาร",
  //     positionType: "วิชาการ",
  //     positionLevel: "ปฏิบัติการ",
  //     positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน ",
  //     positionExecutiveSide: null,
  //     positionEmployeePosition: null,
  //     positionEmployeePositionSide: null,
  //     positionEmployeeLevel: null,
  //     positionEmployeeGroup: null,
  //     govAge: 34,
  //     age: 34,
  //     oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
  //     leaveReason: null,
  //     isLeave: false,
  //     leaveDateOrder: null,
  //     isVerified: true,
  //   },
  // ];
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">รายการรอตรวจสอบ</div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="col-12">
      <d-table
        :columns="columns"
        :rows="rows"
        row-key="id"
        flat
        bordered
        dense
        class="custom-header-table"
        :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"
              style="color: #000000; font-weight: 500"
            >
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr
            :props="props"
            @click="next(props.row.id)"
            class="cursor-pointer"
          >
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
              <div v-else-if="col.name == 'isVerified'">
                <q-icon
                  v-if="props.row.isVerified"
                  name="verified"
                  color="green"
                  size="1.4rem"
                />
              </div>
              <div v-else-if="col.name == 'fullname'">
                <div class="row col-12 wrap items-center">
                  <q-item>
                    <q-item-section avatar>
                      <img
                        v-if="props.row.avatar == null"
                        src="@/assets/avatar_user.jpg"
                        class="col-4 img-info"
                      />
                      <img
                        v-else
                        :src="props.row.avatar"
                        class="col-4 img-info"
                      />
                    </q-item-section>

                    <q-item-section>
                      <div class="text-weight-medium">
                        {{ props.row.fullname }}
                      </div>
                      <div class="text-weight-light">
                        {{ props.row.citizenId }}
                      </div>
                    </q-item-section>
                  </q-item>
                </div>
              </div>
              <div v-else class="table_ellipsis">
                {{ col.value ?? "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </q-card>
</template>
<style scoped>
.img-info {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
</style>
