<script setup lang="ts">
import { ref } from "vue";
import { useAsync } from "/@/hooks/useAsync";
import { httpList } from "/@/api/interest/organize";
const emit = defineEmits(["breadcrumbChange"]);

const props = defineProps<{
  otherParms: Record<string, string>;
}>();

const pid = ref("");

const { data, run, loading, isError } = useAsync<Organize>({
  initalData: {}
});

function toNextNode(depart: DepartNode) {
  pid.value = depart.value;
  requesetOrganizelist();
  emit("breadcrumbChange", depart);
}

function requesetOrganizelist() {
  const params = {
    ...(pid.value ? { pid: pid.value } : {}),
    ...props.otherParms
  };

  run(httpList(params));
}

function initalData() {
  requesetOrganizelist();
}

initalData();

defineExpose({
  changePid: (id: string) => (pid.value = id),
  onSearch: () => requesetOrganizelist()
});
</script>

<template>
  <ul
    class="mt-[10px]"
    v-loading="loading"
    v-if="data.depart && data.item && !isError"
  >
    <li
      class="leading-[30px] bg-red-300 flex gap-1 select-none cursor-pointer"
      @click="() => toNextNode(item)"
      v-for="item in data.depart"
      :key="item.value"
    >
      {{ item.name }}

      <div>></div>
    </li>

    <li
      class="leading-[30px] bg-blue-300 flex gap-1 select-none cursor-pointer"
      v-for="item in data.item"
      :key="item.value"
    >
      {{ item.nickname }}
    </li>
  </ul>

  <div
    class="w-full leading-[198px] text-center border-[#ccc] border rounded-sm mt-2 color-[#ccc] font-bold"
    v-else
  >
    暂无数据
  </div>
</template>
