<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

const myForm = ref<QForm>();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, notifyError } = mixin;
const $q = useQuasar();
const router = useRouter();

const props = defineProps({
  OrderTypeOption: Object,
});

const OrderTypeOption = ref<any>([]);
const modal = ref<boolean>(false);
const employeeClass = ref<string>("");

const reportType = ref<string>("");
const reportYear = ref<number | null>();
const reportNo = ref<string>("");

const columns = ref<any["columns"]>([
  {
    name: "no",
    label: "ลำดับ",
    field: "no",
    align: "left",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขบัตรประชาชน",
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ - นามสกุล",
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const rows = ref<any>([]);

const clickOpenpopup = () => {
  modal.value = true;
  employeeClass.value = "";
  if (props.OrderTypeOption != undefined) {
    OrderTypeOption.value = props.OrderTypeOption.filter(
      (e: any) => e.name !== "ทั้งหมด"
    );
    reportType.value = OrderTypeOption.value[0].id;
    let currentDate = new Date();
    let currentYear = currentDate.getFullYear();
    reportYear.value = currentYear;
    rows.value = [];
    reportNo.value = "";
  }
};
const clickSearch = async () => {
  await myForm.value!.validate().then((result: boolean) => {
    if (result) {
      let body = {
        commandTypeId: reportType.value,
        year: reportYear.value,
        posno: reportNo.value,
      };
      // console.log(body);
      showLoader();
      http
        .post(config.API.searchOrderprofile(), body)
        .then((res) => {
          let data = res.data.result;
          console.log(data);

          if (data.length !== 0) {
            rows.value = data.map((e: any) => ({
              id: e.id,
              citizenId: e.citizenId,
              name: e.fullName,
              posNo: e.posNo,
              position: e.position,
            }));
          } else {
            notifyError($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
            rows.value = [];
          }
        })
        .catch((err) => {
          messageError($q, err);
          rows.value = [];
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
};
const clickRedirect = (id: string) => {
  router.push(`/registry/${id}`);
};
const paging = ref<boolean>(true);
const pagination = ref({
  sortBy: "citizenId",
  descending: false,
  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 round flat color="blue" icon="mdi-history" @click="clickOpenpopup">
    <q-tooltip>แสดงประวัติออกคำสั่ง</q-tooltip></q-btn
  >
  <q-dialog v-model="modal">
    <q-card style="width: 900px; max-width: 80vw">
      <q-card-section>
        <div class="my-content">
          <div
            class="row q-pa-xs items-center bg-blue-1"
            style="border-radius: 4px 4px 0px 0px"
          >
            <q-icon
              size="20px"
              color="blue-9"
              name="mdi-filter-variant"
              class="q-mx-sm"
            />
            <div class="text-blue-9 text-subtitle2 text-weight-medium">
              <span>ประวัติออกคำสั่ง</span>
            </div>
            <q-space />
            <q-btn
              color="blue-9"
              icon="mdi-close"
              size="12px"
              flat
              round
              dense
              v-close-popup
            />
          </div>
          <q-separator color="blue-1" />
          <div class="dialog-card-contain">
            <q-card-section class="q-pa-sm">
              <q-form ref="myForm">
                <div class="row col-12 q-col-gutter-xs">
                  <q-select
                    class="col-6"
                    hide-bottom-space
                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
                    outlined
                    dense
                    v-model="reportType"
                    emit-value
                    map-options
                    :options="OrderTypeOption"
                    option-label="name"
                    option-value="id"
                    :label="`${' ประเภท'}`"
                  >
                    <template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template></q-select
                  >
                  <datepicker
                    class="col-3"
                    menu-class-name="modalfix"
                    v-model="reportYear"
                    :locale="'th'"
                    autoApply
                    year-picker
                    :enableTimePicker="false"
                    clearable
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        class="inputgreen cursor-pointer q-mb-sm"
                        hide-bottom-space
                        outlined
                        dense
                        lazy-rules
                        borderless
                        :model-value="
                          reportYear == null ? null : reportYear + 543
                        "
                        :label="`${'ปีงบประมาณ'}`"
                        :rules="[(val:string) => !!val || `${'กรุณาเลือก ปี'}`]"
                        clearable
                      >
                      </q-input>
                    </template>
                  </datepicker>
                  <q-input
                    class="col-3"
                    clearable
                    dense
                    outlined
                    lazy-rules
                    v-model="reportNo"
                    hide-bottom-space
                    label="เลขที่คำสั่ง"
                  />

                  <q-space />
                  <div>
                    <q-btn
                      dense
                      color="primary"
                      icon="mdi-magnify"
                      label="ค้นหา"
                      class="q-px-md"
                      @click="clickSearch"
                    />
                  </div>
                </div>
              </q-form>
            </q-card-section>
          </div>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-table
          flat
          dense
          bordered
          :rows="rows"
          :columns="columns"
          row-key="order"
          class="custom-header-table"
          no-data-label="ไม่มีข้อมูล"
          :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 class="text-grey-7 text-weight-medium">
                  <span class="row">{{ col.label }}</span>
                </div>
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer">
              <q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
              <q-td
                key="citizenId"
                class="text-primary"
                :props="props"
                @click="clickRedirect(props.row.id)"
                >{{ props.row.citizenId }}</q-td
              >
              <q-td
                key="name"
                class="text-primary"
                :props="props"
                @click="clickRedirect(props.row.id)"
                >{{ props.row.name }}</q-td
              >

              <q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
              <q-td key="position" :props="props">{{
                props.row.position
              }}</q-td>
              <q-td key="date" :props="props">{{ props.row.date }}</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>
      </q-card-section>

      <!-- <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" v-close-popup />
      </q-card-actions> -->
    </q-card>
  </q-dialog>
</template>

<style scoped>
.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;
  }

  .q-table thead tr:last-child th {
    top: 48px;
  }

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