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

		.item {
			min-height: 110px;
			width: 100%;
			overflow: hidden;
		}
	}
}
</style>
