<template>
  <div class="row">
    <div class="col-12 col-sm-4 q-gutter-sm">
      <q-input ref="filterRef" filled v-model="filter" label="Filter">
        <template v-slot:append>
          <q-icon
            v-if="filter !== ''"
            name="clear"
            class="cursor-pointer"
            @click="resetFilter"
          />
        </template>
      </q-input>

      <!-- <div class="row col-12">expanded = {{ expanded }}</div> -->
      <!-- 
      @after-show="afterShow"
      @after-hide="afterHide" -->
      <q-tree
        dense
        default-expand-all
        selected-color="blue-6"
        :nodes="lazy"
        node-key="organizationId"
        label-key="organizationName"
        :filter="filter"
        :no-results-label="notFound"
        :no-nodes-label="noData"
        :filter-method="filterData"
        v-model:expanded="expanded"
        v-model:selected="selected"
        @update:selected="updateSelected"
        @lazy-load="onLazyLoad"
      >
        <template v-slot:default-header="prop">
          {{ prop.node.organizationName }}

          <q-btn flat icon="mdi-dots-vertical" class="q-pa-none q-ml-xs">
            <q-menu anchor="top right">
              <q-list style="min-width: 80px">
                <q-item
                  clickable
                  v-close-popup
                  @click="edit(prop.node.organizationId)"
                >
                  <q-item-section> แก้ไข </q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup>
                  <q-item-section>ลบ</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </template>
      </q-tree>
    </div>

    <div class="col-12 col-sm-8 q-pt-none q-pl-sm">
      <q-card>
        <q-card-section>
          <q-table
            flat
            bordered
            :rows="rows"
            :columns="columns"
            row-key="name"
            class="custom-header-table"
            no-data-label="ไม่มีข้อมูล"
          />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { QTableColumn } from "quasar";
import { onMounted, ref } from "vue";

const expanded = ref<Array<any>>([]);
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");

const nodes = ref<Array<any>>([]);
const lazy = ref(nodes);

const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
  // call fail() if any error occurs

  // setTimeout(() => {
  // simulate loading and setting an empty node
  // if (details.key.indexOf("data empty") > -1) {
  //   details.done([]);
  //   return;
  // }

  if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
    details.done([
      {
        organizationName: "กองบริหารทั่วไป",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
        organizationLevel: 1,
      },
      {
        organizationName: "กองสรรหาบุคคล",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
        organizationLevel: 1,
      },
      {
        organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
        organizationLevel: 1,
        children: [
          {
            organizationName: "ฝ่ายบริหารงานทั่วไป",
            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
            organizationLevel: 2,
            children: [
              {
                organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
                organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
                organizationLevel: 3,
              },
            ],
          },
          {
            organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
            organizationLevel: 2,
          },
        ],
      },
    ]);
  } else if (
    details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
  ) {
    details.done([
      {
        organizationName: "สำนักงานการเจ้าหน้าที่",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
        organizationLevel: 1,
      },
    ]);
  }
  // }, 500);
};

const selected = ref("");
const updateSelected = (target: any) => {
  console.log("updateSelected===>", target);
};

// const afterShow = () => {
//   console.log("afterShow");
// };

// const afterHide = () => {
//   console.log("@after-hide");
// };

/** filter */
const filter = ref<string>("");
const filterRef = ref();
const filterData = (node: any, filter: string) => {
  // ให้ทาง API ค้นหาให้
  nodes.value = [
    {
      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
      organizationLevel: 0,
      lazy: true,
      children: [
        {
          organizationName: "กองบริหารทั่วไป",
          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
          organizationLevel: 1,
        },
        {
          organizationName: "กองสรรหาบุคคล",
          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
          organizationLevel: 1,
        },
        {
          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
          organizationLevel: 1,
          children: [
            {
              organizationName: "ฝ่ายบริหารงานทั่วไป",
              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
              organizationLevel: 2,
            },
            {
              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
              organizationLevel: 2,
            },
          ],
        },
      ],
    },
    {
      organizationName: "สำนักปลัดกรุงเทพมหานคร",
      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
      organizationLevel: 0,
    },
  ];

  // expanded จาก id ได้
  expanded.value = [
    "3b86d275-8259-427c-8da7-12813fe482eb",
    "3486d275-8259-437c-8da7-12813fe482eb",
  ];

  return node.organizationName && node.organizationName.indexOf(filter) > -1;
};

function resetFilter() {
  filter.value = "";
  filterRef.value.focus();
}

const breakLoop = ref<boolean>(false);
async function edit(selected: string) {
  console.log("edit node tree id: " + selected);
  breakLoop.value = false;

  // Usage
  const targetNodeId = selected;
  const replacementNode = {
    organizationName: `ชื่อใหม่ ${selected}`,
    organizationId: selected,
  };

  for (let index = 0; index < nodes.value.length; index++) {
    const element = nodes.value[index];
    searchAndReplace(element, targetNodeId, replacementNode);
    console.log("index===>", index);
    console.log("breakLoop===>", breakLoop.value);
    if (breakLoop.value) break;
  }
}

function searchAndReplace(
  treeNode: any,
  organizationId: any,
  replacementObject: any
) {
  if (treeNode.organizationId === organizationId) {
    Object.assign(treeNode, replacementObject);
    breakLoop.value = true;
  } else if (treeNode.children) {
    for (const child of treeNode.children) {
      searchAndReplace(child, organizationId, replacementObject);
    }
  }
}

const columns = ref<QTableColumn[]>([
  {
    name: "no",
    required: true,
    label: "ลำดับ",
    align: "left",
    field: "no",
    // field: (row) => row.no,
    sortable: false,
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    field: "position",
    sortable: true,
  },
  {
    name: "positionNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    field: "positionNo",
    sortable: true,
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    field: "positionLine",
    sortable: true,
  },
]);

const rows = [
  {
    no: 1,
    position: "ผู้อำนวยการ",
    positionNo: "กบห01",
    positionLine: "ประเภทอำนวยการ",
  },
  {
    no: 2,
    position: "นักจัดการงานทั่วไป",
    positionNo: "กบห01",
    positionLine: "ประเภทวิชาการ",
  },
  {
    no: 3,
    position: "นักวิชาการเงินและบัญชี",
    positionNo: "กบห02",
    positionLine: "ประเภทวิชาการ",
  },
];

onMounted(async () => {
  nodes.value = [
    {
      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
      organizationLevel: 0,
      lazy: true,
    },
    {
      organizationName: "สำนักปลัดกรุงเทพมหานคร",
      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
      organizationLevel: 0,
      lazy: true,
    },
    // {
    //   organizationName: "data empty",
    //   lazy: true,
    // },
    // {
    //   organizationName: "Node is not expandable",
    //   expandable: false,
    //   children: [{ organizationName: "Some node" }],
    // },
  ];
});
</script>

<style lang="scss" scope>
.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>