<script setup lang="ts">
import { ref, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const route = useRoute();

const type_params = route.params.type;
const retireld_params = route.params.id;
const props = defineProps({
  retireld: String,
  profileId: String,
  dataProfile: Object,
  UpdateListId: {
    type: Function,
    default: () => console.log("UpdateListId"),
  },
});

const modal = ref<boolean>(false);
const retireld = ref<any>();
const type = ref<any>();
const filter = ref<string>("");

const columns = ref<any["columns"]>([
  {
    name: "index",
    required: true,
    label: "ลำดับ",
    field: "index",
    align: "left",
  },
  {
    name: "fullname",
    required: true,
    label: "ชื่อ-สกุล",
    field: "fullname",
    align: "left",
  },
  {
    name: "position",
    required: true,
    label: "ตำแหน่งในสายงาน",
    field: "position",
    align: "left",
  },
  {
    name: "level",
    required: true,
    label: "ระดับ",
    field: "level",
    align: "left",
  },
  {
    name: "organizationOrganization",
    required: true,
    label: "สังกัด",
    field: "organizationOrganization",
    align: "left",
  },
]);
const rows = ref<any>([
  // {
  //   fullname: "นายใจดี  ยอดใจ",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
  // {
  //   fullname: "นายจักกริน  บัณฑิต",
  //   position: "นักวิชาการพัสดุ",
  //   level: "ปฎิบัติการ",
  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  // },
]);

watch(modal, () => {
  if (modal.value === true) {
    retireld.value = props.retireld;
    if (props.dataProfile.type === "OFFICER") {
      type.value = "officer";
    } else type.value = "all";

    fecthlistRetire();
  }
});
// fecth profile
const fecthlistRetire = async () => {
  showLoader();
  await http
    .get(config.API.profileOrganizRoot)
    .then((res) => {
      console.log(res);
      const id = res.data.result[0].id;
      if (id !== "") {
        findlist(id);
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
};
const findlist = async (id: string) => {
  let data = [{}];
  if (type.value === "officer") {
    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
  } else if (type.value === "all") {
    data = [
      { criteriaType: "is_retire", criteriaValue: "false" },
      { criteriaType: "employee_class", criteriaValue: "perm" },
    ];
  }
  // console.log(data);

  await http
    .post(config.API.profileSearchNewOcIdType(id, type.value), {
      criterias: data,
    })
    .then((res) => {
      // console.log(res.data.result);
      rows.value = res.data.result.map((e: any) => ({
        id: e.id,
        fullname: e.fullname,
        position: e.position,
        level: e.positionEmployeeLevel,
        organizationOrganization: e.oc,
      }));
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};

// putlist
const clickAdd = (props: any) => {
  // console.log("props===>",props.row.id)
  if (retireld.value == undefined) {
    retireld.value = retireld_params;
  }

  let data: any = props.row.id;
  // console.log("retireld & profileId", retireld.value, data);

  $q.dialog({
    title: "ยืนยันการเพิ่มข้อมูล",
    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      // console.log("เพิ่มข้อมูล");
      await http
        .put(config.API.profileRetire(retireld.value), { profileId: data })
        .then((res) => {
          success($q, "เพิ่มข้อมูลสำเร็จ");
          updateListData(retireld.value, data);
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          // fecthlistRetire();
          modal.value = false;
        });
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};
// update retireld
const updateListData = (retireld: string, pId: string) => {
  props.UpdateListId(retireld, pId);
};

const paging = ref<boolean>(true);
const pagination = ref({
  sortBy: "fullname",
  descending: true,
  page: 1,
  rowsPerPage: 10,
});
const paginationLabel = (start: number, end: number, total: number) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
</script>

<template>
  <q-btn
    flat
    round
    class="text-teal-5"
    icon="mdi-plus"
    size="md"
    @click="modal = true"
  >
    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
  >

  <q-dialog v-model="modal">
    <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
      <q-toolbar class="q-py-md">
        <q-toolbar-title class="text-h6">เพิ่มรายชื่อ
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="modal = false"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />

      <div class="q-pa-md">
        <q-toolbar style="padding: 0">
          <q-input
            borderless
            outlined
            dense
            debounce="300"
            v-model="filter"
            placeholder="ค้นหา"
            style="width: 850px; max-width: auto"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </q-toolbar>
        <q-table
          flat
          bordered
          dense
          :rows="rows"
          :columns="columns"
          row-key="name"
          class="custom-header-table"
          :filter="filter"
          :pagination-label="paginationLabel"
          v-model:pagination="pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th v-for="col in props.cols" :key="col.name" :props="props"
                ><div>
                  <span class="row text-black">{{ col.label }}</span>
                </div>
              </q-th>
              <q-th auto-width />
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer">
              <q-td>{{ props.rowIndex + 1 }}</q-td>
              <!-- <q-td key="order" :props="props">
                {{ props.row.order }}
              </q-td> -->
              <q-td key="fullname" :props="props">
                {{ props.row.fullname }}
              </q-td>
              <q-td key="position" :props="props">
                {{ props.row.position }}
              </q-td>
              <q-td key="level" :props="props">{{ props.row.level }}</q-td>
              <q-td key="organizationOrganization" :props="props">
                {{ props.row.organizationOrganization }}
              </q-td>
              <q-td>
                <q-btn
                  outline
                  :props="props"
                  label="เพิ่ม"
                  class="text-teal-5"
                  @click="clickAdd(props)"
                />
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="scope">
            <q-pagination
              v-model="pagination.page"
              color="primary"
              :max="scope.pagesNumber"
              :max-pages="5"
              size="sm"
              boundary-links
              direction-links
            ></q-pagination>
          </template>
        </q-table>
      </div>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
