<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="`/logo/${item.img}_${item.active ? 'checkd' : 'un'}.png`" />
					<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) {
				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: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
			border-radius: 12px;
			padding: 10px 16px;
			display: inline-block;

			.content {
				@include display-flex;

				img {
					margin-right: 5px;
				}
			}

		}

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