fuse-code/src/hook/ids.ts

import { diffArrayChange } from "@/utils";
import { computed, ref, Ref, watch } from "vue";

export const useSelects = <T extends { id: any }>(items: Ref<T[]>, test = false) => {
  const selects = ref<T[]>([]);

  const updateSelect = (item: T, select: boolean) => {
    console.error('select', item.id, select)
    const ndx = selects.value.findIndex((s) => s.id === item.id);
    if (select) {
      ~ndx || selects.value.push(item as any);
    } else {
      ~ndx && selects.value.splice(ndx, 1);
    }
  };
  const updateSelectId = (id: any, select: boolean) => {
    console.log('===>', [...items.value], id, select)
    const item = items.value.find((s) => s.id === id);
    console.log('===>', item)
    if (item) {
      updateSelect(item, select);
    } else {
      const ndx = selects.value.findIndex((s) => s.id === id);
      if (~ndx) {
        selects.value.splice(ndx, 1);
      } 
    }
  };

  const oldItems: T[] = [];
  watch(
    items,
    (items) => {
      const { added, deleted } = diffArrayChange(
        items.map((item) => item.id),
        oldItems.map((item) => item.id)
      );
      console.error([...items], 'itemChange', added, deleted)
      added.forEach((id) => updateSelectId(id, true));
      deleted.forEach((id) => updateSelectId(id, false));
      oldItems.length = 0;
      oldItems.push(...items);
    },
    { deep: true }
  );

  return {
    selects,
    unSelects: computed(() => items.value.filter(item => !selects.value.includes(item as any))),
    all: computed({
      get: () => items.value.length === selects.value.length,
      set: (select: boolean) => {
        console.error('select', select)
        items.value.forEach(item => updateSelect(item, select))
      } 
    }),
    include: (id: string) => selects.value.some(item => item.id === id),
    updateSelect,
    updateSelectId,
  };
};