<template>
    <div class="toptitle text-dark col-12 row items-center">คำสั่งลาออก</div>
    <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">
            <q-select
              class="col-xs-12 col-sm-3 col-md-2"
              v-model="fiscalyear"
              label="ปีงบประมาณ"
              dense
              emit-value
              map-options
              :options="fiscalyearOP"
              option-value="id"
              option-label="name"
              lazy-rules
              hide-bottom-space
              :readonly="false"
              :borderless="false"
              :outlined="true"
              :hide-dropdown-icon="false"
              @update:model-value="searchFilterTable"
            />
            <div>
              <q-btn
                size="12px"
                flat
                round
                color="add"
                icon="mdi-plus"
                @click="clickAdd"
              >
                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
                <!-- <q-menu>
                  <q-list style="min-width: 100px">
                    <q-item clickable @click="clickAdd">
                      <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup disable>
                      <q-item-section
                        >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
                      >
                    </q-item>
                  </q-list>
                </q-menu> -->
              </q-btn>
            </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-card bordered class="col-12 filter-card q-pa-sm">
              <div class="row col-12 q-col-gutter-sm">
                <q-select
                  class="col-xs-12 col-sm-3 col-md-2"
                  v-model="OrderType"
                  label="ประเภท"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="OrderTypeOption"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="false"
                  :borderless="false"
                  :outlined="true"
                  :hide-dropdown-icon="false"
                  @update:model-value="searchFilterTable"
                />
                <q-select
                  class="col-xs-12 col-sm-3 col-md-2"
                  v-model="OrderStatus"
                  label="สถานะ"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="OrderStatusOption"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="false"
                  :borderless="false"
                  :outlined="true"
                  :hide-dropdown-icon="false"
                  @update:model-value="searchFilterTable"
                />
              </div>
            </q-card>
          </div>
          <div class="col-12">
            <q-table
              ref="table"
              :columns="columns"
              :rows="UpdataData"
              :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-th auto-width />
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props" class="cursor-pointer">
                  <q-td
                    key="Order"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.Order }}
                  </q-td>
                  <q-td
                    key="OrderNum"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.OrderNum }}
                  </q-td>
                  <q-td
                    key="OrderType"
                    :props="props"
                    @click="redirectToPage(props.row.OrderType)"
                  >
                    {{ props.row.OrderType }}
                  </q-td>
                  <q-td
                    key="OrderDate"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.OrderDate }}
                  </q-td>
                  <q-td
                    key="OrderBy"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.OrderBy }}
                  </q-td>
                  <q-td
                    key="Signer"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.Signer }}
                  </q-td>
                  <q-td
                    key="OrderStatus"
                    :props="props"
                    @click="redirectToPage(props.row.Order)"
                  >
                    {{ props.row.OrderStatus }}
                  </q-td>
                  <q-td auto-width>
                    <q-btn
                      dense
                      size="12px"
                      flat
                      round
                      color="red"
                      @click="clickDelete(props.row.id)"
                      icon="mdi-delete"
                    >
                      <q-tooltip>ลบข้อมูล</q-tooltip>
                    </q-btn>
                  </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>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref, useAttrs, computed } from "vue";
  import type { QTableProps } from "quasar";
  import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
  import type { DataOption } from "@/modules/05_placement/interface/index/Main";
  import { useCounterMixin } from "@/stores/mixin";
  import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
  import router from "@/router";
  import { useQuasar } from "quasar";
  
  const $q = useQuasar(); //ใช้ noti quasar
  const DataStore = useOrderPlacementDataStore();
  const pagination = ref({
    sortBy: "desc",
    descending: false,
    page: 1,
    rowsPerPage: 10,
  });
  
  const mixin = useCounterMixin();
  const { dateText } = mixin;
  
  // แปลงเวลา ค.ศ ให้เป็น พ.ศ
  const textDate = (value: Date) => {
    return dateText(value);
  };
  
  const visibleColumns = ref<string[]>([
    "Order",
    "OrderType",
    "OrderNum",
    "OrderDate",
    "OrderBy",
    "Signer",
    "OrderStatus",
  ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
  
  // หัวตาราง
  const columns = ref<QTableProps["columns"]>([
    {
      name: "Order",
      align: "left",
      label: "คำสั่ง",
      sortable: true,
      field: "Order",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "OrderNum",
      align: "left",
      label: "เลขที่คำสั่ง",
      sortable: true,
      field: "OrderNum",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "OrderType",
      align: "left",
      label: "ประเภท",
      sortable: false,
      field: "OrderType",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "OrderDate",
      align: "left",
      label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
      sortable: true,
      field: "OrderDate",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "OrderBy",
      align: "left",
      label: "คำสั่งโดย",
      sortable: true,
      field: "OrderBy",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "Signer",
      align: "left",
      label: "ผู้ลงนาม",
      sortable: false,
      field: "Signer",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "OrderStatus",
      align: "center",
      label: "สถานะคำสั่ง",
      sortable: false,
      field: "OrderStatus",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "fiscalYear",
      align: "left",
      label: "ปีงบประมาณ",
      sortable: true,
      field: "fiscalYear",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
  ]);
  
  // ข้อมูลตาราง (จำลอง)
  const rows = ref<FormOrderPlacementMainData[]>([
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2565",
      fiscalYear: 2565,
      OrderDate: "30 พ.ค. 2565",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "จัดทำร่างคำสั่ง",
      OrderType: "คำสั่งย้าย",
    },
  
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2565",
      fiscalYear: 2565,
      OrderDate: "30 พ.ค. 2565",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "จัดทำร่างคำสั่ง",
      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2564",
      fiscalYear: 2564,
      OrderDate: "30 พ.ค. 2564",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "บัญชีแนบท้าย",
      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2564",
      fiscalYear: 2564,
      OrderDate: "30 พ.ค. 2564",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "บัญชีแนบท้าย",
      OrderType: "คำสั่งย้าย",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2564",
      fiscalYear: 2564,
      OrderDate: "30 พ.ค. 2564",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ส่งสำเนาคำสั่ง",
      OrderType: "คำสั่งย้าย",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2564",
      fiscalYear: 2564,
      OrderDate: "30 พ.ค. 2564",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ส่งสำเนาคำสั่ง",
      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2566",
      fiscalYear: 2566,
      OrderDate: "30 พ.ค. 2566",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "รอลงนาม",
      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2566",
      fiscalYear: 2566,
      OrderDate: "30 พ.ค. 2566",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2565",
      fiscalYear: 2565,
      OrderDate: "30 พ.ค. 2565",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2566",
      fiscalYear: 2566,
      OrderDate: "30 พ.ค. 2566",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งแต่งตั้ง",
    },
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2566",
      fiscalYear: 2566,
      OrderDate: "30 พ.ค. 2566",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งย้าย",
    },
  
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2564",
      fiscalYear: 2564,
      OrderDate: "30 พ.ค. 2564",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งแต่งตั้ง",
    },
  
    {
      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
      OrderNum: "1/2566",
      fiscalYear: 2566,
      OrderDate: "30 พ.ค. 2566",
      OrderBy: "สำนักงาน กทม.",
      Signer: "นาม สมคิด ยอดใจ ",
      OrderStatus: "ออกคำสั่งแล้ว",
      OrderType: "คำสั่งแต่งตั้ง",
    },
  ]);
  // const OrderStatusOption = [
  //   "ทั้งหมด",
  //   "ยังไม่ได้บรรจุ",
  //   "บรรจุแล้ว",
  //   "ยังไม่ได้ออกคำสั่ง",
  // ];
  
  let OriginalData = ref<FormOrderPlacementMainData[]>([]);
  let UpdataData = ref<FormOrderPlacementMainData[]>([]);
  
  onMounted(async () => {
    await OriginalDataFetch();
    fiscalYearFilter();
    searchFilterTable();
    OrderStatusFilter();
    OrderTypeFilter();
  });
  
  const OriginalDataFetch = async () => {
    // API
    // await http
    //   .get(config.API.// ตัวอย่าง)
    //   .then((res: any) => {
    //   })
    //   .catch((e: any) => {
    //     messageError($q, e);
    //   })
    //   .finally(async () => {
    //   });
    await DataStore.DataMainOrder(rows.value);
    OriginalData.value = await DataStore.DataMainOrigOrder;
    UpdataData.value = OriginalData.value;
  };
  
  // ดูรายการหน้าต่อไป
  const redirectToPage = (id?: number) => {
    // router.push({ name: "placementDetail" });
    router.push(`/placement/order/detail`);
  };
  
  const clickDelete = (id: string) => {
    $q.dialog({
      title: "ยืนยันการลบข้อมูล",
      message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
      cancel: {
        flat: true,
        color: "negative",
      },
      persistent: true,
    })
      .onOk(async () => {
        //   await deleteData(id);
      })
      .onCancel(() => {})
      .onDismiss(() => {});
  };
  
  // const deleteData = async (id: string) => {
  //   showLoader();
  //   await http
  //     .delete(config.API.orderReplace(id))
  //     .then((res) => {
  //       success($q, "ลบข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       hideLoader();
  //       await fetchData();
  //     });
  // };
  
  const clickAdd = () => {
    router.push({ name: "OrderplacementDetail" });
  };
  
  // const viewDetail = (id: string, status: string) => {
  //   if (status == "checkPayment") {
  //     router.push(`${route.fullPath}/payment/${id}`);
  //   } else {
  //     router.push(`${route.fullPath}/profile/${id}`);
  //   }
  // };
  
  // เลือกปีงบประมาณ
  const fiscalyear = ref<number | null>(0);
  const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
  const addedfiscalYearValues: number[] = [];
  const fiscalYearFilter = async () => {
    // API
    // await http
    //   .get(config.API.// ตัวอย่าง)
    //   .then((res: any) => {
    //    DataStore.DataMainYearSet(rows.value);
    //    fiscalyearOP.value = DataStore.DataMainYearGet;
    //   })
    //   .catch((e: any) => {
    //     messageError($q, e);
    //   })
    //   .finally(async () => {
    //   });
    for (let data of OriginalData.value) {
      const year = data.fiscalYear;
      console.log(year);
  
      if (fiscalyear.value === null || year > fiscalyear.value) {
        fiscalyear.value = year;
      }
  
      if (!addedfiscalYearValues.includes(year)) {
        fiscalyearOP.push({ id: year, name: year.toString() });
        addedfiscalYearValues.push(year);
      }
    }
  };
  
  const OrderType = ref<string>("");
  const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
  const addedOrderTypeValues: string[] = [];
  const OrderTypeFilter = async () => {
    // API
    // await http
    //   .get(config.API.// ตัวอย่าง)
    //   .then((res: any) => {
    //    DataStore.DataMainYearSet(rows.value);
    //    fiscalyearOP.value = DataStore.DataMainYearGet;
    //   })
    //   .catch((e: any) => {
    //     messageError($q, e);
    //   })
    //   .finally(async () => {
    //   });
    for (let data of OriginalData.value) {
      const OrderTypeValue = data.OrderType;
      console.log(OrderTypeValue);
  
      // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
      //   OrderTypeValue = OrderType;
      // }
      if (!addedOrderTypeValues.includes(OrderTypeValue)) {
        OrderTypeOption.push({
          // id: OrderTypeValue ?? 0,
          id: OrderTypeOption.length,
          name: OrderTypeValue,
        });
        addedOrderTypeValues.push(OrderTypeValue);
      }
      // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
      //   OrderTypeOption.push({
      //     id: OrderTypeValue,
      //     name: OrderTypeValue.toString(),
      //   });
      //   addedOrderTypeValues.push(OrderTypeValue);
      // }
    }
  };
  const OrderStatus = ref<string>("");
  const OrderStatusText = ref<FormOrderPlacementMainData[]>(
    DataStore.DataMainOrigOrder
  );
  const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
  const addedOrderStatusValues: string[] = [];
  const OrderStatusFilter = async () => {
    // API
    // await http
    //   .get(config.API.// ตัวอย่าง)
    //   .then((res: any) => {
    //    DataStore.DataMainYearSet(rows.value);
    //    fiscalyearOP.value = DataStore.DataMainYearGet;
    //   })
    //   .catch((e: any) => {
    //     messageError($q, e);
    //   })
    //   .finally(async () => {
    //   });
    for (let data of OriginalData.value) {
      const OrderStatusValue = data.OrderStatus;
      console.log(OrderStatusValue);
  
      if (
        OrderStatusValue === null ||
        parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
      ) {
        OrderStatus.value = OrderStatusValue;
      }
  
      if (!addedOrderStatusValues.includes(OrderStatusValue)) {
        OrderStatusOption.push({
          // id: OrderStatusValue,
          id: OrderStatusOption.length,
          name: OrderStatusValue,
        });
        addedOrderStatusValues.push(OrderStatusValue);
      }
    }
  };
  
  // เลือกปีงบประมาณตาม API
  const searchfiscalyear = () => {
    console.log("Input value changed:", fiscalyear.value);
    // API
    // await http
    //   .get(config.API.// ตัวอย่าง)
    //   .then((res: any) => {
    //   })
    //   .catch((e: any) => {
    //     messageError($q, e);
    //   })
    //   .finally(async () => {
    //   });
  };
  
  // ค้นหาในตาราง
  const filterKeyword = ref<string>("");
  const filterRef = ref<any>(null);
  const resetFilter = () => {
    filterKeyword.value = "";
    filterRef.value.focus();
  };
  
  const attrs = ref<any>(useAttrs());
  
  const searchFilterTable = async () => {
    // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
    await DataStore.DataUpdateOrder(
      OrderType.value,
      OrderStatus.value,
      fiscalyear.value
    );
    UpdataData.value = DataStore.DataMainUpdateOrder;
  };
  //   UpdataData.value = DataStore.DataMainUpdate;
  // console.log("Input value changed:", OrderStatus.value, OrderType.value);
  
  const paging = ref<boolean>(true);
  const paginationLabel = (start: string, end: string, total: string) => {
    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
    else return start + "-" + end + " ใน " + total;
  };
  </script>
  
  <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>
  