<template>
	<div class="goods-box" :class="{ flex: goods.catPosition == 'left' }">
		<view :style="{ margin: goods.catStyle == 1 ? '0px' : '10px 5px' }">
			<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 v-if="goods.showCat">
				<template v-if="goods.catPosition == 'top'">
					<!-- 一行一个 -->
					<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>
					<!--列表模式-->
					<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
				</template>
				<template v-else-if="goods.catPosition == 'left'">
					<!-- 左侧分类 -->
					<view>
						<view class="left-slider">
							<sidebar
								:active="activeKey"
								v-if="goods.showCat && goods.catPosition == 'left'"
								:list="goods.catList"
								name="menuName"
								:active-color="mainColor"
								:border="false"
								@change="tabChangeHandler"
							></sidebar>
						</view>
						<!-- 右侧列表 -->
						<view class="style4View"><style4 :goods-info="goods" :good-list="currentList"></style4></view>
					</view>
				</template>
			</template>
			<!-- 只是商品 -->
			<template v-else>
				<!--一行一个-->
				<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>
				<!--列表模式-->
				<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
			
			</template>
		</div>
	</div>
</template>

<script>
import style1 from './style1';
import style2 from './style2';
import style6 from './style6';
import sidebar from '../sidebar/index';
export default {
	props: ['goods'],
	components: {
		style1,
		style2,
		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;
		}
	},
	watch:{
		goods:{
			handler(newValue,oldValue){
				if (this.goods.showCat) {
					this.currentList = newValue.catList[0].goodsList;
				} else {
					this.currentList = newValue.list;
				}
			},
			deep:true
		}
	}
};
</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>
