<template>
	<div class="catstyle10" 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">
				<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
			</div>
			<div v-for="(c, i) in sd" :key="i">
				<div @click="clickHandler(c)" class="sec-title">{{ c.Name }}</div>
				<u-grid :column-num="3" :border="false">
					<template v-if="c.ChildList && c.ChildList.length > 0">
						<u-grid-item v-for="(cc, ci) in c.ChildList" :key="ci">
							<image :src="getIconLink(c.IconPath)" mode="widthFix" style="width: 80rpx; height: 80rpx;" />
							<text class="grid-text">{{ c.Name }}</text>
						</u-grid-item>
					</template>
					<template v-else>
						<u-grid-item>
							<u-icon name="photo-o" size="80" :color="'#999'" />
							<text class="grid-text" style="color:#999">无三级分类</text>
						</u-grid-item>
					</template>
				</u-grid>
			</div>
		</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: [],
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			this.sd = this.d[this.tid].ChildList;
		},
		components: {
			sidebar
		},
		methods: {
			changeHandler(e) {
				this.tid = e;
				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>
	.catstyle10 {
		display: flex;
	}

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

	.catstyle10 .right-slider {
		padding: 10px;
		height: 100%;
		width: 1px;
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}

	.catstyle10 .right-slider .van-icon--image,
	.catstyle10 .right-slider .van-icon {
		width: 80rpx;
		height: 80rpx;
		font-size: 80rpx;
		color: gray;
	}

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

	.catstyle10 .sec-title {
		font-size: 13px;
		font-weight: 500;
		margin: 10px 0;
	}
</style>
