<template>
	<div class="goods-box" :class="{ flex: goods.catPosition == 'left' }">
		<view>
			<u-tabs v-if="goods.showCat && goods.catPosition == 'top' && goods.catList.length > 1" name="menuName" :list="goods.catList"
			 :is-scroll="true" :active-color="mainColor" :current="activeKey" :show-bar="goods.catStyle == 1" :bold="false"
			 :type-style="goods.catStyle" :height="goods.catStyle == 1 ? '88' : '44'" @change="tabChangeHandler"></u-tabs>
		</view>
		<div :class="{ 'right-slider': goods.catPosition == 'top' }">
			
		
			<template>
				<!--列表模式-->
				<style1 v-if="goods.listStyle == 0" :goods-info="goods" :good-list="currentList"></style1>
			</template>
		</div>
	</div>
</template>

<script>
	import style1 from './style1';

	export default {
		props: ['goods'],
		components: {
			style1,
		
		},
		data() {
			return {
				mainColor: '',
				activeKey: 0,
				currentList: []
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			if (this.goods.showCat) {
				this.currentList = this.goods.catList[0].goodsList;
			} else {
				this.currentList = this.goods.TeacherList;
			}
		},
		methods: {
			tabChangeHandler(i) {
				this.currentList = this.goods.catList[i].goodsList;
				this.activeKey = i;
			}
		}
	};
</script>

<style>
	.style4View {
		display: inline-block;
		width: 100%;
		padding-left: 80px;
		box-sizing: border-box;
	}

	.goods-box {
		/* margin: 20rpx 0; */
	}

	.goods-box .tips {
		z-index: 50 !important;
	}

	.goods-box.flex {
		display: flex;
	}

	.goods-box.flex .left-slider {
		width: 80px;
		position: absolute;
	}

	.goods-box.flex .right-slider {
		flex: 1;
		width: 1rpx;
	}

	.defaultz .van-sticky {
		z-index: 1 !important;
	}

	.goods-box .van-tabs__scroll {
		background: none;
	}

	.goods-box ._div {
		width: 100%;
	}
</style>
