<template>
	<view class="catstyle9" style="height: 100%;">
		<view class="left-slider">
			<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d" @change="changeHandler"></sidebar>
		</view>
		<view class="right-slider">
			<view class="adbox" v-if="d[tid].advert_pic">
				<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
			</view>
			<view v-for="(x, index) in sd" :key="index">
				<view @click="clickHandler(x)" class="sec-title">{{ x.Name }}
				</view>
				<template v-if="x.ChildList && x.ChildList.length > 0">
					<view class="item" v-for="(cx, ci) in x.ChildList" :key="ci" :data-url="cx.page_url">
						<view class="left">{{ cx.Name }}</view>
						<view class="right">
							<image v-if="cx.IconPath && cx.IconPath!=''" mode="aspectFit" :src="getIconLink(cx.IconPath)" style="width: 100%; height: 100%;" />
						</view>
					</view>
				</template>
				<template v-else>
					<view class="item">
						<view class="left">无三级分类</view>
						<view class="right"></view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

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

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

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

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

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

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

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

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

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