<template>
	<view class="group-goods">
	<!-- <view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> -->
		<!-- <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
			<text class="title">热门榜单</text>
			<view class="group-people x-f">
				<text class="tip">更多</text>
				<text class="cuIcon-right"></text>
			</view>
		</view> -->
		<view class="classify-tab-box acea-row">
			<view :class="'classify-item ' + (classifyType == index?'on':'')" v-for="(item,index) in classifyList" :key="index" @click="changeClassify(index)">
				{{item.listName}}
			</view>
		</view>
		<view class="goods-box">
		<!-- <view class="goods-box swiper-box x-f"> -->
			<view class="top-box">
				<view class="top-item acea-row" v-for="(item,index) in topList" :key="index" @tap="jump('/pages/shop/GoodsCon/index',{id:item.id})">
					<view class="top-num-box">
						<view class="">{{index+1}}</view>
						<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view>
					</view>
					<image class="img" :src="item.image" mode="aspectFill"></image>
					<view class="info-box">
						<view class="title more-t">{{item.storeName}}</view>
						<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view>
						<view class="original">{{ item.sales }}+人购买</view>
					</view>
				</view>
			</view>
			<PromotionGood v-if="goodsList.length" :benefit="goodsList" />
			<!-- <swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
				<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
					<view class="goods-list-box x-f">
						<block v-for="mgoods in goods" :key="mgoods.id">
							<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
								<view class="img-box">
									<view class="tag">hot</view>
									<image class="img" :src="mgoods.image" mode="widthFix"></image>
								</view>
								<view class="price-box">
									<view class="y-f">
										<text class="seckill-current">￥{{ mgoods.price  }}</text>
										<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
									</view>
								</view>
								<view class="title">
									<slot name="titleText"></slot>
								</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-dots" v-if="goodsList.length > 1">
				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
					:key="index"></text>
			</view> -->
		</view>
	</view>
</template>

<script>
	// import shActivityGoods from '@/components/sh-activity-goods.vue';
	import PromotionGood from '@/components/PromotionGood'
	export default {
		name: "HotCommodity",
		components: {
			PromotionGood
		// 	shActivityGoods
		},
		data() {
			return {
				classifyList: [],
				classifyType: 0,
				topList: [],
				goodsList: [],
				swiperCurrent: 0
			};
		},
		props: {
			detail: Array
		},
		computed: {},
		created() {
			console.log('oArr detail', this.detail)
		},
		watch: {
			detail(next) {
				this.classifyList = next;
				this.goodsList = this.sortData(next[this.classifyType].productInfo, 4);
			}
		},
		methods: {
			changeClassify(i) {
				if(this.classifyType == i) return;
				this.classifyType = i;
				this.goodsList = this.sortData(this.classifyList[this.classifyType].productInfo, 4);
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				if(oArr.length > 5) {
					this.topList = oArr.slice(0, 5);
					arr = oArr.slice(5, oArr.length);
				} else {
					this.topList = oArr;
				}
				// console.log('oArr', oArr)
				// oArr.forEach(c => {
				// 	if (minArr.length === length) {
				// 		minArr = [];
				// 	}
				// 	if (minArr.length === 0) {
				// 		arr.push(minArr);
				// 	}
				// 	minArr.push(c);
				// });

				return arr;
			},
			jump(path, query) {
				this.$yrouter.push({
					path,
					query,
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.group-goods {
		// position: relative;
		// z-index: 9;
		font-family: PingFang SC;
	}
	
	.classify-tab-box {
		padding: 4rpx 32rpx 22rpx;
		.classify-item {
			width: 124rpx;
			height: 40rpx;
			border-radius: 16rpx;
			border: 2rpx solid #2EB5AE;
			font-size: 24rpx;
			font-weight: 500;
			color: #2DB5AE;
			line-height: 36rpx;
			text-align: center;
			margin-right: 20rpx;
		}
		.on {
			color: #FFFFFF;
			background: #2DB5AE;
		}
	}
	
	.top-box {
		padding: 0rpx 32rpx 12rpx;
		.top-item {
			width: 686rpx;
			height: 174rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			.top-num-box {
				width: 146rpx;
				height: 174rpx;
				padding: 24rpx 0rpx 24rpx 12rpx;
				font-size: 80rpx;
				font-family: Futura;
				font-weight: 700;
				color: #2DB5AE;
				line-height: 106rpx;
				text-align: center;
				.tip {
					font-size: 32rpx;
					line-height: 42rpx;
					position: relative;
					top: -22rpx;
				}
			}
			.img {
				width: 168rpx;
				height: 162rpx;
				border-radius: 8rpx;
				margin: 6rpx 0rpx;
			}
			.info-box {
				width: 370rpx;
				height: 174rpx;
				padding: 16rpx 18rpx 16rpx 10rpx;
				.title {
					height: 76rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #3A3A3C;
					line-height: 38rpx;
				}
				.price-box {
					font-size: 30rpx;
					font-family: Futura;
					font-weight: 600;
					color: #3A3A3C;
					line-height: 40rpx;
					text {
						font-size: 20rpx;
						font-weight: 500;
						color: #999999;
						line-height: 26rpx;
						text-decoration: line-through;
						padding-left: 10rpx;
					}
				}
				.original {
					font-size: 20rpx;
					color: #999999;
					line-height: 26rpx;
				}
			}
		}
	}

	// .swiper-box,
	// .carousel {
	// 	width: 700rpx;
	// 	height: 240upx;
	// 	position: relative;
	// 	border-radius: 20rpx;

	// 	.carousel-item {
	// 		width: 100%;
	// 		height: 100%;
	// 		// padding: 0 28upx;
	// 		overflow: hidden;
	// 	}

	// 	.swiper-image {
	// 		width: 100%;
	// 		height: 100%;
	// 		// border-radius: 10upx;
	// 		background: #ccc;
	// 	}
	// }

	// .swiper-dots {
	// 	display: flex;
	// 	position: absolute;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// 	bottom: 0rpx;
	// 	z-index: 66;

	// 	.dot {
	// 		width: 45rpx;
	// 		height: 3rpx;
	// 		background: #eee;
	// 		border-radius: 50%;
	// 		margin-right: 10rpx;
	// 	}

	// 	.dot-active {
	// 		width: 45rpx;
	// 		height: 3rpx;
	// 		background: #a8700d;
	// 		border-radius: 50%;
	// 		margin-right: 10rpx;
	// 	}
	// }

	// 今日必拼+限时抢购
	.group-goods {
		// background: #fff;
		// border-radius: 20rpx;
		// overflow: hidden;

		// .title-box {
		// 	padding-bottom: 20rpx;

		// 	.title {
		// 		font-size: 32rpx;
		// 		font-weight: bold;
		// 	}

		// 	.group-people {
		// 		.time-box {
		// 			font-size: 26rpx;
		// 			color: #edbf62;

		// 			.count-text-box {
		// 				width: 30rpx;
		// 				height: 34rpx;
		// 				background: #edbf62;
		// 				text-align: center;
		// 				line-height: 34rpx;
		// 				font-size: 24rpx;
		// 				border-radius: 6rpx;
		// 				color: rgba(#fff, 0.9);
		// 				margin: 0 8rpx;
		// 			}
		// 		}

		// 		.head-box {
		// 			.head-img {
		// 				width: 40rpx;
		// 				height: 40rpx;
		// 				border-radius: 50%;
		// 				background: #ccc;
		// 			}
		// 		}

		// 		.tip {
		// 			font-size: 28rpx;
		// 			padding-left: 30rpx;
		// 			color: #666;
		// 		}

		// 		.cuIcon-right {
		// 			font-size: 30rpx;
		// 			line-height: 28rpx;
		// 			color: #666;
		// 		}
		// 	}
		// }

		.goods-box {
			// .goods-item {
			// 	margin-right: 22rpx;

			// 	&:nth-child(4n) {
			// 		margin-right: 0;
			// 	}
			// }
		}

		// .min-goods {
		// 	margin-right: 22rpx;

		// }
	}
</style>
