<template>
	<div class="list">
		<div v-for="item in list" class="tools" @click="checkTool(item)">
			<span class="tool-card" :class="item.active?'checkedBg':''">
				<span class="content">
					<img :src="''" alt="" />
					<span>{{ item.name }}</span>
				</span>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['list'],
		data() {
			return {
				ischeck: 'check',
			}
		},
		created() {
			this.list.forEach(item => {
				this.$set(item, 'active', false)
			})
		},
		methods: {
			checkTool(item) {
				if (item.active) {
					this.$set(item, 'active', false);
				} else {
					// 否则，先重置所有项，再激活当前项
					this.list.forEach(i => this.$set(i, 'active', false));
					this.$set(item, 'active', true);
					this.$emit('tool-selected', item.name);
				}
			}
		}
	}
</script>

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

		.tools {
			max-width: 300px;
		}

		.tool-card {
			background: #FFFFFF;
			box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
			border-radius: 12px;
			padding: 10px 16px;
			display: inline-block;
			font-weight: 600;
			font-family: 'Poppins-SemiBold', serif;

			.content {
				@include display-flex;

				img {
					margin-right: 5px;
					width: 24px;
					height: 24px;
				}
			}

		}

		.tools .checkedBg {
			color: $white;
			background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
		}
	}
</style>
