<template>
	<div class="buttonList" :style="{ gap: gap + 'px' }">
		<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
			<slot name="item" :item="item">
				{{ item.text }}
			</slot>
		</Button>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
	activeId: {
		type: [Number, Array],
		default: 0
	},
	gap: {
		type: Number,
		default: 8
	},
	multiple: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default: function () {
			return [];
		}
	}
});
const emit = defineEmits(["click"]);
const isActive = item => {
	if (!props.multiple) {
		return item.id === props.activeId;
	} else {
		return props.activeId.includes(item.id);
	}
};
function setActiveIndex(item) {
	if (!props.multiple) {
		if (props.activeId === item.id) {
			return;
		}
		emit("click", item.id);
	} else {
		let idList;
		if (props.activeId.includes(item.id)) {
			idList = props.activeId.filter(currentId => currentId !== item.id);
		} else {
			idList = props.activeId.concat(item.id);
		}
		emit("click", idList);
	}
}
</script>

<style lang="scss" scoped>
.buttonList {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex-wrap: wrap;
}
</style>
