<template>
	<div class="recommend">
		<!-- 热门版块 -->
		<div class="hot-box">
			<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in hotList" :key="index"
				@click="hotLabelClick(index, item.fid)">{{ item.name }}</div>
		</div>
		<!-- 路径 -->
		<plate-navigation v-if="fid != 0" :stairname="plate.subsectionsname"
			:subsectionsname="plate.subsectionsname"></plate-navigation>
		<section>
			<template v-if="list.length == 0">
				<index-list></index-list>
			</template>
			<div class="result-empty-box flexcenter shadow" v-else>
				<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
			</div>
		</section>
	</div>
</template>

<script>
import plateNavigation from '@/components/PlateNavigation.vue'
import indexList from '@/components/IndexList'
export default {
	name: "Recommend",//推荐阅读hjhjh 
	data() {
		return {
			hotActive: -1,//热门版块活跃点击
			hotList: [],
			list: [],
			fid: 0, // 板块id
			plate: {
				stairname: "",// 一级版块名称
				subsectionsname: "",// 子版块名称
			},
		}
	},

	watch: {
		"$parent.recommend": {
			handler(newV, oldV) {
				console.log(newV);
				this.hotList = newV
			},
			immediate: true
		}
	},
	mounted() {
		console.log(this.$parent.recommend);
	},

	methods: {
		hotLabelClick(index, fid) {
			console.log(fid);
			this.fid = fid
			this.hotActive = index
		}
	},
	components: {
		plateNavigation,
		indexList,
	},
}
</script>

<style lang="scss" scoped>
.paging {
	margin-top: .48rem;

	::v-deep {
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background: rgba(98, 177, 255, 1);
			border-radius: 50%;
		}

		.el-pagination .btn-next .el-icon,
		.el-pagination .btn-prev .el-icon {
			font-size: .4rem;
		}
	}
}

section {
	height: 10.3333rem;
}
</style>