<template>
	<div class="catstyle6" style="height: 100%;">
		<div class="left-slider">
			<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d" @change="changeHandler"></sidebar>
		</div>
		<div class="right-slider">
			<div class="adbox" v-if="d[tid].advert_pic" @click="clickHandler(d[tid].advert_url)">
				<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
			</div>
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(c, i) in sd" :key="i" @click="clickHandler(c)">
					<image class="imgclass" :src="getIconLink(c.IconPath)" style="width: 80rpx; height: 80rpx;" />
					<text class="grid-text">{{ c.Name }}</text>
				</u-grid-item>
			</u-grid>
		</div>
	</div>
</template>

<script>
	import sidebar from "../sidebar/index";
	export default {
		props: ["d", "h"],
		data() {
			return {
				mainColor: "",
				activeStyle: "",
				page: 1,
				page_count: 1,
				mh: 0,
				tid: 0,
				active: 0,
				sd: [],
			};
		},
		components: {
			sidebar,
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			this.sd = this.d[this.tid].ChildList;
		},
		methods: {
			changeHandler(i) {
				this.tid = i;
				this.page = 1;
				this.sd = this.d[this.tid].ChildList;
			},
			clickHandler(item) {
				let Id1 = this.d[this.tid].Id;
				let Id2 = item.Id;
				let CategoryIds = Id2;
				let IsEducation = uni.getStorageSync('basedata') ?
					(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
						.IsEducation : 0) :
					0;
				if (IsEducation == 1) {
					uni.navigateTo({
						url: '/pages/school/courseList?CategoryIds=' + CategoryIds
					});
				} else {
					uni.navigateTo({
						url: '/pages/goods/list?CategoryIds=' + CategoryIds
					});
				}
			},
		},
	};
</script>

<style>
	.catstyle6 .imgclass {
		display: block;
		width: 80rpx;
		height: 80rpx;
	}

	.catstyle6 {
		display: flex;
	}

	.catstyle6 .grid-text {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: "#330330";
	}

	.catstyle6 .left-slider {
		width: 85px;
		height: 100%;
		background: #f5f5f5;
	}

	.catstyle6 .right-slider {
		padding: 10px;
		height: 100%;
		width: 1px;
		flex: 1;
	}

	.catstyle6 .right-slider .adbox {
		width: 100%;
		height: calc(100vw - 105px / 3.37);
		margin-bottom: 10px;
	}
</style>
