<template>
	<div class="catstyle5" 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 class="item gg" v-for="(x, index) in sd" :key="index" @click="clickHandler(x)">
				<div class="left">{{ x.Name }}</div>
				<div class="right">
					<image v-if="x.IconPath && x.IconPath.length > 0" mode="aspectFit" :src="getIconLink(x.IconPath)" style="width: 100%; height: 100%;" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import sidebar from "../sidebar/index";
	export default {
		props: ["d", "h"],
		data() {
			return {
				mainColor: "",
				page: 1,
				page_count: 1,
				mh: 0,
				tid: 0,
				active: 0,
				sd: [],
			};
		},
		components: {
			sidebar,
		},
		created() {
			this.mainColor = this.$uiConfig.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>
	.catstyle5 {
		display: flex;
	}

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

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

	.catstyle5 .right-slider .item {
		height: 80px;
		display: flex;
		background: #f5f5f5;
		margin-bottom: 10px;
	}

	.catstyle5 .right-slider .item .left {
		padding: 15px;
		font-size: 18px;
		font-weight: 600;
		color: #666;
		flex: 1;
		width: 1px;
	}

	.catstyle5 .right-slider .item .right {
		margin-top: 16px;
		width: 80px;
		height: 64px;
		text-align: right;
		margin-right: 0px;
	}

	.catstyle5 .right-slider .item .right img {
		width: 80px;
		height: 64px;
	}

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