<template>
	<!-- 首页 -->
	<view class="index">
		<!-- 吸顶 -->
		<!-- __UNI__B5AC1D2 -->
		<u-sticky offset-top="0" h5-nav-height="0">
			<view class="status_bar"></view>
			<!-- 选项卡 -->
			<view>
				
				<u-tabs-swiper height="122"  gutter="50" bar-width="70" bar-height="8" bg-color="#ffffff" :class="swiperCurrent===0?'':'asd'" inactive-color="gray"
					font-size="32" active-color="black" class="TabControl" ref="uTabs" :list="list" :current="current"
					@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
			</view>
			<!-- logo标识 -->
			<view class="logo" v-if="swiperCurrent===0">
				<image class="lucky" :src="require('@/static/luckyLogo.png')" mode=""></image>
			</view>
		</u-sticky>
		<!-- 选项页面 -->
		
		<swiper class="swiper" :style="{height:(dynamic+500)+'rpx'}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<!-- 部落页面 -->
				<view v-if="index==0" class="tribe">
					
					<!-- 轮播图样式 -->
							<img class="wrap" :src="homePicture" alt="">
					<!-- 推荐 -->
					<view class="recommendBox" v-if="false">
						<view class="recommend">
							<view class="recommend_list">
								<image class="tjtp" :src="require('@/static/Group.png')" mode=""></image>
								<span>常见问题</span>
							</view>
							<view class="recommend_list">
								<image class="tjtp" :src="require('@/static/service.png')" mode=""></image>
								<span>在线客服</span>
							</view>
						</view>
					</view>
					<!-- 商品列表 -->
					<view class="goodsListbox">
						<view class="goodsList">
							<view class="good" v-for="el in testBox" :key="el.boxId" @click="showPage(el.boxId)">
								<view class="goodImg">
									<!-- <img :src="el.pic" alt=""> -->
									<u-lazy-load class="lazyImg" :image="el.pic"></u-lazy-load>
								</view>
								
								<p class="goodDescribe">
									 {{el.name}}
									 
								</p>
								
								<view class="goodPriceOrNum">
									<span class="price"><span class="small">￥</span>{{el.price}}</span>
									<span class="number">{{el.sale}}+人已开盒</span>
								</view>
								
							</view>
						</view>
						<u-divider class="divider" bg-color="#F5F5F5" fontSize="35" border-color="gray">盲盒陆续上新</u-divider>
					</view>
				</view>
				<!-- 推荐页面 -->
				<!-- <view v-if="index==1">
					<view class="welfare">

					</view>
				</view> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				list: [{
						name: '部落'
					},
					// {
					// 	name: '推荐'
					// }
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				yanse: "",
				//轮播图
				listCarouse: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
				],
			}
		},
		
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 跳转至展示页
			async showPage(num){
				await uni.setStorageSync("isId",num)
				this.$Router.push({
					name:"showPage"
				})
			}
		},
		created(){
			// 获取首页盲盒
			this.$store.dispatch("gainHomeContent");
			// this.listCarouse[0].image=this.$store.state.home.homePicture
		},
		computed:{
			homePicture(){
				return this.$store.state.home.homePicture
			},
			testBox(){
				return this.$store.state.home.box
			},
			dynamic(){
				return (Math.ceil((this.$store.state.home.box).length/2)*480)
			}
		},
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F7F7;
	}
	* {
		margin: 0;
		padding: 0;
	}
	.index{
	}
	.asd {
		// background-color:darkgray!important;
	}
	// 状态栏
	.status_bar {
		background-color: #ffffff;
		height: var(--status-bar-height);
		width: 100%;
	}

	// 选项卡
	.TabControl {
		// 选项条设置
		height: 122rpx!important;
		::v-deep.u-tabs-scroll-box {
			justify-content: flex-start !important;
			// 部落
			.UEl_0 {
				width: 150rpx !important;
				flex: 0 !important;
			}

			//推荐
			.UEl_1 {
				width: 150rpx !important;
				flex: 0 !important;
			}
			
		}

	}

	//logo标识
	.logo {
		width: 750rpx;
		height: 84rpx;
		background-color: white;
		color: rgba(45, 128, 191, 0.8);
		.lucky{
			width: 235rpx;
			height: 87rpx;
		}
	}

	//页面长度
	.swiper {
		display: flex!important;
		justify-content: center!important;
		flex-direction: column!important;
		width: 100vw!important;
		align-items: center!important;
		// height: 3500rpx!important;
		background-color: #F7F7F7!important; //#F7F7F7
		padding-bottom: 20rpx!important;
		.swiper-item {
			// 部落页面
			.tribe {
				.wrap{
					width: 750rpx;
					height: 350rpx;
				}
				/* 推荐 */
				.recommendBox {
					background-color:#F7F7F7;
					width: 750rpx;
					height: 220rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.recommend {
						background-color:#F7F7F7;
						width: 700rpx;
						display: flex;
						justify-content: flex-start;
						.recommend_list {
							width: 160rpx;
							display: flex;
							margin-left: 14rpx;
							flex-direction: column;
							align-items: center;
							.tjtp{
								width: 88rpx;
								height: 88rpx;
							}
							span {
								margin-top: 12rpx;
							}
						}
					}
				}

				// 商品列表
				.goodsListbox {
					margin-top: 50rpx;
					width: 750rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.goodsList {
						width: 688rpx;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 15rpx;
						.good {
							width: 336rpx;
							overflow: hidden;
							border-radius: 15rpx;
							background-color: white;
							margin-bottom: 15rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							.goodImg {
								width: 300rpx;
								height: 300rpx;
								margin-bottom: 30rpx;
								.lazyImg{
									max-height: 300rpx!important;
									background-color: white!important;
								}
							}

							.goodDescribe {
								width: 320rpx;
								margin: auto;
								overflow: hidden;
								/* 设置元素为弹性伸缩盒 */
								display: -webkit-box;
								/* 设置弹性盒纵向排列 */
								-webkit-box-orient: vertical;
								/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
								-webkit-line-clamp: 2;
								font-size: 13px;

							}
							.goodPriceOrNum{
								width: 320rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 10rpx;
								.price{
									font-weight: 700;
									color: #EF4F3F;
									font-size: 23px;
									.small{
										font-weight: 200;
										font-size: 13px;
									}
								}
								.number{
									color: darkgray;
									font-size: 13px;
									margin-top: 5px;
								}
								
							}
						}
					}

				}
			
			}

			//推荐页面
			.welfare {
			}
		}
	}
</style>