<template>
	<div :id="id">
		<div class="bar-list">
			<div class="top-box">
				<div>
					<img :src="`/logo/${tool.img}_check.png`" />
					<span class="title-text .gradient-color">
						{{tool.name}}
					</span>
				</div>
				<div class="more pointer" v-if="!tagList.length">
					View more<i class="el-icon-arrow-right"></i>
				</div>
			</div>
			<div v-if="tagList.length">
				<div class="tags" ref="tagsContainer" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag"
					@mouseleave="stopDrag">
					<div class="tag-item" v-for="(item,index) in 10">
						AI Image & illustration Generation
					</div>
				</div>
				<div class="line"></div>
			</div>
			<div>
				<div class="more pointer" v-if="tagList.length">
					View more<i class="el-icon-arrow-right"></i>
				</div>
				<div class="item-card">
					<div class="card-caontainer" v-for="(item,index) in 8">
						<div class="title">
							<img src="/logo/collect.png" />
							<span>
								Skywork
							</span>
						</div>
						<div class="content">
							Latest ToolsLatest ToolsLatest ToolsLatest Tools
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['tool','id'],
		data() {
			return {
				isDragging: false,
				startX: 0,
				scrollLeft: 0,
				tagList: [],
			}
		},
		methods: {
			startDrag(e) {
				this.isDragging = true;
				this.startX = e.pageX - this.$refs.tagsContainer.offsetLeft;
				this.scrollLeft = this.$refs.tagsContainer.scrollLeft;
			},
			onDrag(e) {
				if (!this.isDragging) return;
				e.preventDefault();
				const x = e.pageX - this.$refs.tagsContainer.offsetLeft;
				const walk = (x - this.startX) * 2; // 调整滑动速度
				this.$refs.tagsContainer.scrollLeft = this.scrollLeft - walk;
			},
			stopDrag() {
				this.isDragging = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar-list {
		margin: 50px 0;
	}

	.top-box {
		@include display-flex;
		justify-content: space-between;

		.title-text {
		
			font-weight: 600;
			font-size: $larg-font-size;
		}
	}

	.tags {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		// cursor: grab;
		user-select: none;

	}

	.tag-item {
		flex-shrink: 0;
		padding: 10px;
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
		// cursor: grab;
		/* 显示抓取手势 */

		&:active {
			// cursor: grabbing;
			/* 抓取中状态 */
		}
	}

	.more {
		text-align: right;
		color: $grey-color;
		font-size: $mid-font-size;
	}

	.item-card {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
		margin-top: 30px;
	}

	.card-caontainer {
		background: #FFFFFF;
		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
		border-radius: 8px;
		padding: 16px;
		border: 1px solid #E2E8F0;

		.title {
			display: flex;
			align-items: center;

			span {
				color: $main-font-color;
				font-size: $big-font-size;
				font-weight: 600;
			}
		}

		.content {
			color: $grey-color;
			// line-height: 30px;
		}
	}
</style>
