<template>
	<div :id="id">
		<div class="bar-list">
			<div class="top-box">
				<div class="title-wrap">
					<img :src="`/logo/${tool.img}_check.png`" alt="" />
					<span class="title-text gradient-color">
						{{tool.categoryName}}
					</span>
				</div>
				<div @click="goToViewMore" class="more pointer" v-if="!tool.tagList">
					View more<i class="el-icon-arrow-right"></i>
				</div>
			</div>
			<div v-if="tool.tagList && tool.tagList.length">
				<ScrollList>
					<div class="tags">
						<div class="tag-item" v-for="(item,index) in tool.tagList" :key="index">
							{{ item }}
						</div>
					</div>
				</ScrollList>
				<div class="line"></div>
			</div>
			<div>
				<div @click="goToViewMore" class="more pointer" v-if="tool.tagList && tool.tagList.length">
					View more<i class="el-icon-arrow-right"></i>
				</div>
				<div class="item-card" v-if="tool.tools && tool.tools.length">
					<div v-for="(item, index) in tool.tools" :key="index" style="min-height: 110px">
						<ToolItemCard :config="item" :categorySlug="categorySlug" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ScrollList from "~/pages/Home/components/ScrollList.vue";
	import ToolItemCard from "~/pages/Home/components/ToolItemCard.vue";

	export default {
		components: {ToolItemCard, ScrollList},
		props: {
			tool: {
				type: Object,
				default: () => {
					return {}
				}
			},
			id: {
				type: String,
				default: '',
			},
			categorySlug: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 查看更多
			goToViewMore() {
				if (this.categorySlug) {
					this.$router.push('/home/more?category_slug=' + this.categorySlug)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-wrap {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.bar-list {
		margin: 50px 0;
	}

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

		.title-text {
			font-weight: 600;
			font-size: $larg-font-size;
			font-family: 'Poppins-SemiBold', serif;
		}
	}

	.tags {
		margin-top: 27px;
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;
		width: max-content;
	}

	.tag-item {
		flex-shrink: 0;
		padding: 10px;
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
		/* 显示抓取手势 */
		font-family: 'Poppins-SemiBold', sans-serif;
		color: #64748B;
		font-weight: 600;

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

	.more {
		display: block;
		text-align: right;
		color: $grey-color;
		font-size: $mid-font-size;
		font-family: 'Poppins-Regular', serif;

		&:active {
			opacity: 0.8;
		}
	}

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