<template>
	<div class="list">
		<div v-for="(item, index) in list" class="tools">
			<ToolItem :item="item" @tool-selected="handleToolSelected" />
		</div>
	</div>
</template>

<script>
import ToolItem from './ToolItem.vue'
export default {
	props: ['list'],
	components: {
		ToolItem
	},
	created() {
		this.list.forEach(item => {
			this.$set(item, 'active', false)
		})
	},
	methods: {
		handleToolSelected(selectedItem) {
			// 重置所有项
			this.list.forEach(item => {
				if (item !== selectedItem) {
					this.$set(item, 'active', false);
				}
			});
			// 激活当前选中项
			this.$set(selectedItem, 'active', true);
			this.$emit('tool-selected', selectedItem.name);
		}
	}
}
</script>

<style lang="scss" scoped>
.list {
	display: grid;
	grid-template-columns: repeat(4, 1fr); // 4列布局
	gap: 20px; // 网格间距

	.tools {
		display: inline-block;
	}
}
</style>
