<script setup lang="ts">
import { ref } from "vue";
import PageAuth from "/@/components/PageAuth";
import OrganizeTree from "./cpns/organize-tree.vue";

const pageName = "organize";

const breadcrumb = ref<DepartNode[]>([]);

const params = ref<Record<string, string>>({
  name: "",
  nickname: ""
});

const organizeTreeRef = ref<InstanceType<typeof OrganizeTree> | null>(null);

function handleBreadcrumbChange(depart: DepartNode) {
  breadcrumb.value.push(depart);
}

function handleOrganizeTreeSearch(index?: number) {
  if (index === breadcrumb.value.length - 1) return;

  const item = breadcrumb.value[index];
  const id = item ? item.value : "";

  organizeTreeRef.value.changePid(id);
  organizeTreeRef.value.onSearch();
  breadcrumb.value.splice(index + 1);
}
</script>

<template>
  <PageAuth
    class="px-[10px] h-[calc(100vh-60px)] bg-white"
    :pageName="pageName"
    :margin="false"
  >
    <!-- 面包屑 -->
    <ul class="flex cursor-pointer" v-if="breadcrumb.length > 0">
      <li @click="() => handleOrganizeTreeSearch()">
        全部分类
        <span class="mx-[5px]">/</span>
      </li>

      <li
        :class="{
          'cursor-pointer': true,
          'text-[#ccc]': index === breadcrumb.length - 1
        }"
        v-for="(item, index) in breadcrumb"
        :key="item.value"
        @click="() => handleOrganizeTreeSearch(index)"
      >
        {{ item.name }}
        <span class="mx-[5px]" v-if="index !== breadcrumb.length - 1">/</span>
      </li>
    </ul>

    <div class="flex justify-between pt-[20px]">
      <div class="flex gap-1">
        <ElInput
          v-model="params.name"
          placeholder="部门名称"
          clearable
          size="small"
          @change="() => organizeTreeRef.onSearch()"
        />
        <ElInput
          v-model="params.nickname"
          placeholder="员工名称"
          clearable
          size="small"
          @change="() => organizeTreeRef.onSearch()"
        />
      </div>

      <div class="flex gap-[10px]">
        <ElButton type="success" size="small" plain>添加</ElButton>
        <ElButton
          type="primary"
          size="small"
          plain
          @click="() => organizeTreeRef.onSearch()"
          >刷新</ElButton
        >
      </div>
    </div>

    <!-- 树节点 -->
    <div class="flex-1">
      <OrganizeTree
        ref="organizeTreeRef"
        :otherParms="params"
        @breadcrumb-change="handleBreadcrumbChange"
      />
    </div>
  </PageAuth>
</template>
