<template>
	<div class="goods-box" :class="{ flex: goods.catPosition == 'left' }" :style="{'margin-bottom':marginBottom+'rpx'}">
		<view :style="{ margin: goods.catStyle == 1 ? '0px' : '10px 5px' }">
			<u-tabs :bgColor='goods.backgroundColor?goods.backgroundColor:"#ffffff"' 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" style="background-color: black;"></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>
					<!-- 一行三个 -->
					<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>
					<!-- 教育有星星模式 -->
					<style7 v-if="goods.listStyle == 4" :goods-info="goods" :good-list="currentList"></style7>
				</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>
				<!--一行三个-->
				<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>
				<!-- 教育有星星模式 -->
				<style7 v-if="goods.listStyle == 4" :goods-info="goods" :good-list="currentList"></style7>
			</template>
		</div>
	</div>
</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 style7 from './style7';
	import sidebar from '../sidebar/index';
	export default {
		props: ['goods'],
		components: {
			style1,
			style2,
			style3,
			style4,
			style5,
			style6,
			style7,
			sidebar
		},
		data() {
			return {
				mainColor: '',
				activeKey: 0,
				currentList: [],
				marginBottom:''
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			if (this.goods.showCat) {
				this.currentList = this.goods.catList[0].goodsList;
			} else {
				this.currentList = this.goods.list;
			}
		},
		mounted(){
			let port = uni.getSystemInfoSync().platform
			switch (port) {
			case 'android':
				this.marginBottom = '0'
				console.log('运行Android上',port);//android
				break;
			case 'ios':
				this.marginBottom = '54'
				console.log('运行iOS上',port);//ios
				break;
			default:
				this.marginBottom = '54'
				console.log('运行在开发者工具上');//devtools
				break;
			}
		},
		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>
