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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organization/store/organizational";
import { useRoute } from "vue-router";

/** importType*/
import type { QTableProps } from "quasar";
import type { PropType } from "vue";

import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Education";

/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";

/** use*/
const $q = useQuasar();
const route = useRoute();
const store = useOrganizational();
const {
  dialogConfirm,
  showLoader,
  success,
  hideLoader,
  messageError,
  date2Thai,
} = useCounterMixin();

/** props*/
const modal = defineModel<boolean>("modal", { required: true });

const props = defineProps({
  dataSort: Array as PropType<ResponseObject[]>,
  fetchData: Function,
});
const profileId = ref<string>(route.params.id.toString()); //id profile

/** ข้อมูล Table*/
const rows = ref<ResponseObject[]>([]);
const selected = ref<any[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "educationLevel",
    align: "left",
    label: "ระดับการศึกษา",
    sortable: true,
    field: "educationLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "institute",
    align: "left",
    label: "สถานศึกษา",
    sortable: true,
    field: "institute",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "startDate",
    align: "left",
    label: "ตั้งแต่",
    sortable: true,
    field: "startDate",
    format(val, row) {
      return row.isDate
        ? date2Thai(row.startDate)
        : new Date(row.startDate).getFullYear() + 543;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "endDate",
    align: "left",
    label: "ถึง",
    sortable: true,
    field: "endDate",
    format(val, row) {
      return row.isDate
        ? date2Thai(row.endDate)
        : new Date(row.endDate).getFullYear() + 543;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "finishDate",
    align: "left",
    label: "วันที่สำเร็จการศึกษา",
    sortable: true,
    field: "finishDate",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "degree",
    align: "left",
    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: "field",
    align: "left",
    label: "สาขาวิชา/ทาง",
    sortable: true,
    field: "field",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "isEducation",
    align: "left",
    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
    sortable: true,
    field: "isEducation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  // {
  //   name: "fundName",
  //   align: "left",
  //   label: "ทุน",
  //   sortable: true,
  //   field: "fundName",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "gpa",
  //   align: "left",
  //   label: "เกรดเฉลี่ย",
  //   sortable: true,
  //   field: "gpa",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "country",
  //   align: "left",
  //   label: "ประเทศ",
  //   sortable: true,
  //   field: "country",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "other",
  //   align: "left",
  //   label: "ข้อมูลการติดต่อ",
  //   sortable: true,
  //   field: "other",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "duration",
  //   align: "left",
  //   label: "ระยะเวลา",
  //   sortable: true,
  //   field: "duration",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "durationYear",
  //   align: "left",
  //   label: "ระยะเวลาหลักสูตร (ปี)",
  //   sortable: true,
  //   field: "durationYear",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "note",
  //   align: "left",
  //   label: "หมายเหตุ",
  //   sortable: true,
  //   field: "note",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
]);
/**
 * fiunction จัดลำดับ
 * @param from ตำแหน่งปัจุบัน
 * @param to ตำแหน่งที่จะย้ายไป
 */
function onDrop(from: number, to: number) {
  rows.value.splice(to - 1, 0, rows.value.splice(from - 1, 1)[0]);
  selected.value.push(rows.value[0]);
}

/** function บันทึกการจัดลำดับ*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = rows.value.map((e: any) => ({
      id: e.id,
      isUse: selected.value.some((i: any) => i.id === e.id),
    }));

    await http
      .put(config.API.profileNewEducationSort("") + `/${profileId.value}`, {
        data: body,
      })
      .then(async () => {
        await success($q, "บันทึกข้อมูลสำเร็จ");
        modal.value = false;
        props.fetchData?.(profileId.value);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(modal, async () => {
  if (modal.value && props.dataSort) {
    const dataList = props.dataSort;
    rows.value.push(...dataList);
    selected.value = dataList.filter((item: any) => item.isUse == true);
  } else {
    selected.value = [];
    rows.value = [];
  }
});
</script>
<template>
  <template>
    <q-dialog v-model="modal" persistent>
      <q-card style="min-width: 80vw">
        <DialogHeader
          :tittle="`จัดลำดับการแสดงผล`"
          :close="() => (modal = false)"
        />
        <q-separator />
        <q-card-section style="max-height: 70vh" class="scroll">
          <q-table
            v-if="rows.length > 0"
            v-draggable-table="{
              options: {
                mode: 'row',
                onlyBody: true,
                dragHandler: 'td',
              },
              onDrop,
            }"
            flat
            bordered
            :rows="rows"
            :columns="columns"
            :rows-per-page-options="[0]"
            row-key="id"
            hide-bottom
            hide-pagination
            selection="multiple"
            class="custom-header-table"
            v-model:selected="selected"
          >
            <template v-slot:header-selection="scope"> </template>
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td>
                  <q-checkbox
                    :disable="props.rowIndex === 0 && rows.length > 1"
                    keep-color
                    color="primary"
                    dense
                    v-model="props.selected"
                  />
                </q-td>
                <q-td
                  v-for="col in props.cols"
                  :key="col.id"
                  :class="props.rowIndex === 0 ? 'text-primary' : ''"
                >
                  <div>
                    {{
                      col.value === "" || col.value === null ? "-" : col.value
                    }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn
            :disable="rows.length === 0"
            type="submit"
            :label="`บันทึก`"
            color="public"
            @click="onSubmit"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </template>
</template>

<style lang="scss"></style>
