<script setup lang="ts">
import { ref, watch } from "vue";

const nodes = ref<any>([
  {
    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
    children: [
      {
        orgTreeName: "ยุทธศาสตร์ที่ 1",
        children: [
          {
            orgTreeName: "ยุทธศาสตร์ที่ 2",
            children: [
              {
                orgTreeName: "ยุทธศาสตร์ที่ 3",
                children: [
                  {
                    orgTreeName: "ยุทธศาสตร์ที่ 4",
                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        orgTreeName: "ยุทธศาสตร์ที่ 1",
        children: [
          {
            orgTreeName: "ยุทธศาสตร์ที่ 2",
            children: [
              {
                orgTreeName: "ยุทธศาสตร์ที่ 3",
                children: [
                  {
                    orgTreeName: "ยุทธศาสตร์ที่ 4",
                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
    children: [
      {
        orgTreeName: "ยุทธศาสตร์ที่ 1",
        children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
      },
    ],
  },
]);
const filter = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const expanded = ref<Array<any>>([]);
const nodeId = ref<string>("");

function updateSelected(data: any) {
  console.log(data);
  nodeId.value = data.orgTreeName;
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
  <q-card flat bordered class="q-pa-md">
    <div class="row q-col-gutter-sm q-pl-sm">
      <q-toolbar class="text-primary">
        <q-btn dense flat round color="primary" icon="add">
          <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
        </q-btn>

        <q-input dense outlined v-model="filter" label="ค้นหา">
          <template v-slot:append>
            <q-icon
              v-if="filter !== ''"
              name="clear"
              class="cursor-pointer"
              @click="filter = ''"
            />
            <q-icon v-else name="search" color="grey-5" />
          </template>
        </q-input>
      </q-toolbar>
    </div>
    <q-tree
      class="q-pa-sm q-gutter-sm"
      dense
      :nodes="nodes"
      node-key="orgTreeName"
      label-key="orgTreeName"
      :filter="filter"
      :no-results-label="notFound"
      :no-nodes-label="noData"
      v-model:expanded="expanded"
    >
      <template v-slot:default-header="prop">
        <q-item
          clickable
          :active="nodeId == prop.node.orgTreeName"
          @click.stop="updateSelected(prop.node)"
          active-class="my-list-link text-primary text-weight-medium"
          class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
        >
          <div>
            <div class="text-weight-medium">
              {{ prop.node.orgTreeName }}
            </div>
          </div>
        </q-item>
      </template>
    </q-tree>
  </q-card>
</template>

<style scoped></style>
