<template>
  <div class="flex flex-wrap justify-between">
    <select-item
      class="mb-2.5"
      v-for="item in list"
      :key="item.id"
      :name="item.name"
      @click="clickItem(item.id)"
      :active="selecteds.includes(item.id)"
    />
  </div>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { defineComponent } from "vue";
import SelectItem from "./SelectItem.vue";

export default defineComponent({
  props: ["list", "selecteds", "setSelecteds"],
  components: { SelectItem },
  methods: {
    // clickItem(id: any) {
    //   if (this.selecteds.includes(id)) {
    //     this.setSelecteds(this.selecteds.filter((i: any) => i !== id));
    //   } else {
    //     this.setSelecteds([...this.selecteds, id]);
    //   }
    // },
    // 单选
    clickItem(id: any) {
      if (this.selecteds.includes(id)) {
        this.setSelecteds(this.selecteds.filter((i: any) => i !== id));
      } else {
        this.setSelecteds([id]);
      }
    },
  },
});
</script>
