<template>
	<view class="goods-box">
		<view>
			<!-- 只是商品 -->
			<template>
				<!--一行一个-->
				<style1 v-if="goods.listStyle == 1" :goods-info="goods" :good-list="currentList"></style1>
				<!--一行两个-->
				<style2 v-if="goods.listStyle == 2" :goods-info="goods" :good-list="currentList"></style2>
				<!--一行三个-->
				<style3 v-if="goods.listStyle == 3" :goods-info="goods" :good-list="currentList"></style3>
				<!--左右滚动-->
				<style5 v-if="goods.listStyle == 0" :goods-info="goods" :good-list="currentList"></style5>
				<!--列表模式-->
				<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
			</template>
		</view>
	</view>
</template>

<script>
import style1 from './style1';
import style2 from './style2';
import style3 from './style3';
import style4 from './style4';
import style5 from './style5';
import style6 from './style6';
import sidebar from '../sidebar/index';
export default {
	props: ['goods'],
	components: {
		style1,
		style2,
		style3,
		style4,
		style5,
		style6,
		sidebar
	},
	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.list;
		}
	},
	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>
