<template>
	<div class="content" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="tag-item" v-if="tagName">
			{{tagName}}
		</div>
		<div class="item-card">
			<ToolItemCard v-for="(item, index) in toolList" :key="index" :config="item" :category-slug="category_slug" />
		</div>
	</div>
</template>

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

export default {
	components: {
		ToolItemCard,
	},
	data() {
		return {
			tagName: '',
			toolList: [],
			category_slug: '',
			fullscreenLoading: false,
		}
	},
	methods: {
		// 按分类获取工具列表
		async getToolsByTag(slug) {
			if (slug) {
				this.fullscreenLoading = true;
				const params = {categorySlug: slug};
				const {data: res} = await this.$api.tool.getToolsList(params);
				const {code, data} = res;
				if (code === 0 && data.list) {
					this.toolList = data.list;
				}
				this.fullscreenLoading = false;
			}
		}
	},
	watch: {
		// 监听路由变化
		'$route'(to) {
			const slug = to.query.category_slug;
			if (slug) {
				this.category_slug = slug;
				this.getToolsByTag(slug);
			}
		}
	},
	mounted() {
		// 组件挂载时也检查一次路由参数
		const slug = this.$route.query.category_slug;
		if (slug) {
			this.category_slug = slug;
			this.getToolsByTag(slug);
		}
	},
}
</script>

<style scoped lang="scss">
.content {
	padding-top: 60px;
	padding-bottom: 100px;
	.tag-item {
		display: inline-block;
		padding: 10px;
		border-radius: 12px;
		font-family: 'Poppins-SemiBold', sans-serif;
		color: #fff;
		font-weight: 600;
		background: $header-backgroungd;
	}
	.item-card {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
		margin-top: 30px;

		.card-caontainer {
			background: #FFFFFF;
			box-shadow: 0 10px 30px 0 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;
					font-family: 'Poppins-SemiBold', serif;
				}
			}

			.text {
				color: $grey-color;
				font-family: 'Poppins-Regular', serif;
				// line-height: 30px;
			}
		}
	}
}
</style>
