fuse-code/src/hook/ids.ts

import { debounce, 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) => {
    const ndx = selects.value.findIndex((s) => s.id === item.id);
    test && console.log('updateSelect', item.id, select)
    if (select) {
      if (~ndx) {
        selects.value[ndx] = item as any
      } else {
        selects.value.push(item as any);
      } 
    } else {
      ~ndx && selects.value.splice(ndx, 1);
    }
  };
  const updateSelectId = (id: any, select: boolean) => {
    const item = items.value.find((s) => s.id === id);
    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)
      );
      // test && console.error('added', added)
      // test && console.error('deleted', deleted)
      
      added.forEach((id) => updateSelectId(id, true));
      deleted.forEach((id) => updateSelectId(id, false));
      oldItems.length = 0;
      oldItems.push(...items);
    },
    { deep: true, flush: 'post' }
  );

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