<script setup lang="ts">
import { ref, useAttrs, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useTransferDataStore } from "@/modules/05_placement/store"
import type { QTableProps } from "quasar";
import type { FormMainProbation, FormMainProbation2,mapData } from "@/modules/05_placement/interface/request/Main";

import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import router from "@/router";

import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar(); //ใช้ noti quasar
const rows = ref<FormMainProbation[]>([]);
const rows2 = ref<FormMainProbation2[]>([]);
const modal = ref<boolean>(false);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const fillter = ref<number>(0);
const paging2 = ref<boolean>(true);
const Opfillter = ref<any>([{ id: 0, value: "ทั้งหมด" }]);
const filterRef = ref<any>(null);
const filterRef2 = ref<any>(null);
const dataUpdate = ref<any>([]);
const probationlist = ref<any>([]);
const filterKeyword = ref<string>("");
const fillterStatus = ref<any>([]);
const filterKeyword2 = ref<string>("");
  
const storeFn = useTransferDataStore()
const mixin = useCounterMixin();
const { statusProbationMain } = storeFn
const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;

const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
const pagination2 = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
  "no",
  "name",
  "position_line",
  "position_level",
  "organization",
  "probation_no",
  "order_number",
  "probation_status",
]);

// หัวตาราง
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_line",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position_line",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "position_level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "probation_no",
    align: "center",
    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: true,
    field: "probation_no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "order_number",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
    field: "order_number",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "probation_status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "probation_status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

// หัวตาราง2
const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organizationOrganization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organizationOrganization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const ProbationMainFilter = () => {
  const useStatus = new Set();
  fillterStatus.value.forEach((item: any) => {
    const ID = item.probation_status;
    const title = statusProbationMain(Number(item.probation_status));
    if (ID !== null && !useStatus.has(ID)) {
      Opfillter.value.push({
        id: ID,
        value: title,
      });
      useStatus.add(ID);
    }
  });
  Opfillter.value.sort((a: any, b: any) => a.id - b.id);
};

const updateRows = (body: any) => {
  if (body.value !== "ทั้งหมด") {
    const filteredRows = dataUpdate.value.filter(
      (item: any) => item.probation_status === body.value
    );
    rows.value = filteredRows;
  } else {
    rows.value = dataUpdate.value;
  }
};

const getpersonalList = async () => {
  showLoader();
  await http
    .get(config.API.probationPersonalList())
    .then((res) => {
      const data = res.data.data;
      fillterStatus.value = data;
      rows.value = data.map((item: FormMainProbation) => ({
        personal_id: item.personal_id,
        name: item.name,
        position_line: item.position_line,
        position_line_id: item.position_line_id,
        position_level: item.position_level,
        position_level_id: item.position_level_id,
        organization: item.organization,
        probation_no: item.probation_no,
        order_number: item.order_number != "xx/2566" ? item.order_number : "-",
        probation_status: statusProbationMain(Number(item.probation_status)),
      }));
      dataUpdate.value = rows.value;
      ProbationMainFilter();
    })
    .catch(() => { })
    .finally(() => {
      hideLoader();
    });
};
// fecth profile
const fecthlistPersonal = async () => {
  showLoader();
  await http
    .get(config.API.profileOrganizRoot)
    .then((res) => {
      const id = res.data.result[0].id;
      if (id !== "") {
        findlist(id);
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => { });
};
const fecthlistProbation = async (id: string, data: any) => {
  try {
    probationlist.value = [];
    const res = await http.post(
      config.API.profileSearchNewOcIdType(id, "officer"),
      {
        criterias: data,
      }
    );
    return res.data.result;
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
};

const findlist = async (id: string) => {
  let data = [
    { criteriaType: "is_retire", criteriaValue: "false" },
    { criteriaType: "is_probation", criteriaValue: "true" },
  ];
  let data2 = [
    { criteriaType: "is_retire", criteriaValue: "false" },
    { criteriaType: "is_probation", criteriaValue: "false" },
  ];
  let response1 = await fecthlistProbation(id, data);
  let response2 = await fecthlistProbation(id, data2);

  response1.forEach((e: any) =>
    probationlist.value.push({ ...e, probation: true })
  );
  response2.forEach((e: any) =>
    probationlist.value.push({ ...e, probation: false })
  );
  rows2.value = probationlist.value.map((e: mapData) => ({
    id: e.id,
    fullname: e.fullname,
    position: e.position,
    level: e.positionEmployeeLevel,
    organizationOrganization: e.oc,
    status: e.probation,
  }));
  modal.value = true;
};
const clickAdd = (id: string) => {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const postData = {
        personal_id: id,
      };
      await http
        .post(config.API.personalAdd(), postData)
        .then(() => {
          getpersonalList();
          success($q, "เพิ่มข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          clickClose();
          hideLoader();
        });
    },
    "ยันยันการเพิ่มข้อมูล",
    "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
  );
};
const clickClose = async () => {
  modal.value = false;
};


const resetFilter = () => {
  filterKeyword.value = "";
  filterRef.value.focus();
};

const resetFilter2 = () => {
  filterKeyword2.value = "";
  filterRef2.value.focus();
};

const paginationLabel = (start: string, end: string, total: string) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};

const paginationLabel2 = (start: string, end: string, total: string) => {
  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
onMounted(async () => {
  getpersonalList();
});
</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="row q-col-gutter-sm">
      <div class="row col-12 q-col-gutter-sm">
        <div class="col-6">
          <div class="row">
            <q-select class="col-5 q-mr-sm" v-model="fillter" label="สถานะ" dense map-options option-label="value"
              :options="Opfillter" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
              :outlined="true" :hide-dropdown-icon="false" @update:model-value="updateRows(fillter)" />
            <div>
              <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
                <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
              </q-btn>
            </div>
          </div>
        </div>
        <q-space />
        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
          debounce="300" placeholder="ค้นหา">
          <template v-slot:append>
            <q-icon v-if="filterKeyword == ''" name="search" />
            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
          </template>
        </q-input>

        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
          class="col-xs-12 col-sm-3 col-md-2" />
      </div>
      <div class="col-12">
        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
          :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">
                <span class="text-weight-medium">{{ col.label }}</span>
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer"
              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
              <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>
                  {{ col.value }}
                </div>
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="scope">
            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
          </template>
        </q-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
    <q-card style="width: 900px; max-width: 80vw">
      <q-form ref="myForm">
        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
        <q-separator />
        <q-card-section class="q-pa-md q-col-gutter-sm">
          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
            placeholder="ค้นหา">
            <template v-slot:append>
              <q-icon v-if="filterKeyword2 == ''" name="search" />
              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
            </template>
          </q-input>
          <div class="col-12">
            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
              v-model:pagination="pagination2">
              <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-th auto-width />
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props" 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 == 'status'" class="text-center">
                      <q-icon v-if="col.value === true" name="mdi-check" color="positive" size="sm" />
                    </div>
                    <div v-else>
                      {{ col.value }}
                    </div>
                  </q-td>
                  <q-td auto-width>
                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
                    </q-btn>
                  </q-td>
                </q-tr>
              </template>
              <template v-slot:pagination="scope">
                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
              </template>
            </q-table>
          </div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scope>
.filter-card {
  background-color: #f1f1f1b0;
}

.toggle-expired-account {
  font-size: 12px;
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #35373c;
}

.icon-color {
  color: #4154b3;
}

.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>
