<template>
	<view class="layout">
		<view class="header-cover" ref="headerCover" :style="'opacity:' + opacity">
			
			<view class="header-cover-top">
				<!-- <text v-if="isLogin" class="header-cover-name">你好，{{ name }}</text> -->
				<!-- <text v-else class="header-cover-login" @click="goLogin()">请登录</text> -->
				<text class="header-cover-integral">{{ integralCount }}</text>
				<!-- <view class="integral-detail" @click="goIntegralDetail">积分明细 ></view> -->
			</view>
		</view>
		<view class="header">
			<view class="header-top">
				
			</view>
			<view class="header-center">
				<view class="header-integral">{{ integralCount }}</view>
				<view class="header-integral-tip">当前积分</view>
			</view>
		</view>
		<text v-if="isLogin" class="header-name">你好，{{ name }}</text>
		<text v-else class="header-login" @click="goLogin()">请登录</text>
		<view class="integral-detail" @click="goIntegralDetail">积分明细 ></view>
		<view class="swiper-container" v-if="headerData.length>1">
			<swiper class="swiper" @change="changeSwiper" :indicator-dots="false">
				<swiper-item v-for="(item, index) in headerData" :key="index">
					<view class="swiper-list">
						<view class="item" v-for="(subItem, subIndex) in item" :key="subIndex" @click="goToLandPage(subItem)">
							<image class="icon" mode="aspectFill" :src="subItem.icon"></image>
							<view class="item-title"><text>{{ subItem.title }}</text></view>
							<view class="item-desc"><text>{{ subItem.subTitle }}</text></view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view>
				<view class="indicator">
					<view class="swiper-dot" :class="index===headerIndex?'swiper-dot-active':''" v-for="(item, index) in headerData" :key="index"></view>
				</view>
			</view>
		</view>
		
		<view v-else class="list" :key="index">
			<view class="item" v-for="(subItem, subIndex) in headerData[0]" :key="subIndex"  @click="goToLandPage(subItem)">
				<image class="icon" mode="aspectFill" :src="subItem.icon"></image>
				<view class="item-title">{{ subItem.title }}</view>
				<view class="item-desc">{{ subItem.subTitle }}</view>
			</view>
		</view>
		<view class="bottom-list">
			<view class="top">
				<image class="img" src="../../static/home-rec.png" alt="">
				<view class="name">热门推荐</view>
			</view>
			<view @click="goDetail(item)" class="item" v-for="(item,index) in goodsList" :key="index">
				<image class="img" mode="aspectFill" :src="item.thumb"></image>
				<view class="right">
					<!-- <view class="title-container"><text class="brand">{{item.brand}}</text>{{item.title}}</view> -->
					<text class="title-container">
						<text class="brand">{{item.brand}}</text>{{item.title}}
					</text>
					<view class="bottom">
						<view class="money">
							{{item.price}}<text>积分</text>
						</view>
						<view class="btn">
							立即兑换
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="list" ref="list">
			<view class="item" v-for="(item, index) in brandList" :key="index" @click="goToGoodDetail(item.brandNo, item.name)">
				<view class="item-layout">
					<image class="icon" mode="aspectFill" :src="item.imgPath"></image>
					<view class="item-right">
						<text class="item-title">{{ item.name }}</text>
						<text class="item-desc">{{ item.des }}</text>
					</view>
				</view>
			</view>
		</view> -->
		<uni-load-more v-if="brandList.length > 0" :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			integralCount: '0',
			loadingType: 'more',
			brandList: [],
			page: 1,
			pageSize: 20,
			isLogin: false,
			opacity: 0,
			headerData: [],
			headerIndex: 0,
			goodsList: []
		};
	},
	onShow() {
		this.integralCount = 0
		this.getUserInfo();
		this.getHeaderData()
		// this.getData();
		this.getList()
	},
	onPageScroll(e) {
		// console.log(e)
		this.opacity = e.scrollTop / 99
		// const animation = uni.requireNativePlugin('animation')
		// var top = this.$refs.headerCover
		// animation.transition(top, {
		// 	opacity: e.scrollTop / 99
		// }, () => {})
		
	},
	onReachBottom() {
		console.log(11111);
		this.getList();
	},
	methods: {
		goLogin() {
			this.$router.push('Login');
		},
		getUserInfo() {
			this.isLogin = true;
			this.$net
				.get('/staff/detail', {'refreshToken': 'not'})
				.then(res => {
					if (res.code === 200) {
						this.name = res.data.staffName;
						this.integralCount = this.$numUtils.moneyFormat(res.data.surplusIntegral, 3, ',');
						this.isLogin = true
						this.$store.commit('refreshUserLogin', true)
						this.$store.commit('refreshUserInfo', res.data)
					} else {
						this.isLogin = false
					}
				})
				.catch(err => {
					console.log(err);
					this.isLogin = false
				});
		},
		getData() {
			this.$net
				.get('/goods/brand', { page: this.page, pageSize: this.pageSize, 'refreshToken': 'not' })
				.then(res => {
					if (res.data.list.length > 0) {
						this.brandList = this.brandList.concat(res.data.list);
						this.brandList = this.brandList.concat(res.data.list);
						this.brandList = this.brandList.concat(res.data.list);
						this.goodsList = this.goodsList.concat(res.data.list);
						let data = [].concat(this.brandList)
						this.headerData = this.division(data, 15)
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		getHeaderData() {
			this.$net
				.get('/home/header', { 'refreshToken': 'not' })
				.then(res => {
					let data = res.data.list || []
					this.headerData = this.division(data, 15)
				})
				.catch(err => {
					console.log(err);
				});
		},
		division(arr, length) {
		  let index = 0;
		  let newArray = []
		  while (index < arr.length) {
		    if (length > arr.length) {
				newArray.push(arr)
				index += length
		    } else {
				newArray.push(arr.slice(index, index += length))
			}
		  }
		  return newArray
		},
		getList() {
			if (this.loadingType == 'noMore') {
				return
			}
			this.$net
				.get('/home/list', { page: this.page, pageSize: this.pageSize, 'refreshToken': 'not' })
				.then(res => {
					if (res.data.list.length > 0) {
						this.goodsList = this.goodsList.concat(res.data.list);
						this.page += 1;
					}
					this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
					console.log(this.loadingType);
				})
				.catch(err => {
					console.log(err);
				});
		},
		goToLandPage(item) {
			if (!this.isLogin) {
				this.goLogin();
				return
			}
			console.log(item);
			this.$router.goLandPage(item.schema);
		},
		goDetail(item) {
			if (!this.isLogin) {
				this.goLogin();
				return
			}
			this.$router.push('GoodsDetail', {skuNo:item.skuId, spuNo:item.spuId})
		},
		goIntegralDetail() {
			if (!this.isLogin) {
				this.goLogin();
				return
			}
			this.$router.push('IntegralDetail')
		},
		changeSwiper(event) {
			console.log(event);
			this.headerIndex = event.detail.current
		}
	}
};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	flex-direction: column;
	overflow-x: hidden;
	.header-cover {
		height: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		// background: red;
		background-image: url(../../static/home-header-bg.png);
		background-size: cover;
		position: fixed;
		top: 0;
		z-index: 999;
		.header-cover-top {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 30rpx;
			margin-left: 30rpx;
			position: sticky;
			// .header-cover-name {
			// 	font-size: 24rpx;
			// 	color: #ffffff;
			// }
			// .header-cover-login {
			// 	font-size: 24rpx;
			// 	color: #ffffff;
			// 	text-decoration: underline;
			// }
			// .integral-detail {
			// 	background-image: url(../../static/integral-detail-bg.png);
			// 	width: 174rpx;
			// 	height: 58rpx;
			// 	font-size: 26rpx;
			// 	color: #ffffff;
			// 	line-height: 58rpx;
			// 	text-align: center;
			// 	background-size: 100% 100%;
			// }
			.header-cover-integral {
				font-size: 34rpx;
				font-weight: bolder;
				color: #ffffff;
				text-align: center;
			}
		}
	}
	.header {
		height: 350rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-image: url(../../static/home-header-bg.png);
		background-size: 100% 100%;
		.header-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-left: 30rpx;
			
		}
		.header-center {
			display: flex;
			flex-direction: column;
			align-items: center;
			.header-integral {
				font-size: 82rpx;
				font-weight: bolder;
				color: #ffffff;
				margin-top: 78rpx;
			}
			.header-integral-tip {
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}
	.header-name {
		font-size: 24rpx;
		color: #ffffff;
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		z-index: 999;
	}
	.header-login {
		font-size: 24rpx;
		color: #ffffff;
		text-decoration: underline;
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		z-index: 999;
	}
	.integral-detail {
		background-image: url(../../static/integral-detail-bg.png);
		width: 174rpx;
		height: 58rpx;
		font-size: 26rpx;
		color: #ffffff;
		line-height: 58rpx;
		text-align: center;
		background-size: 100% 100%;
		position: fixed;
		top: 20rpx;
		z-index: 999;
		right: 0;
	}
	.swiper-container {
		border-radius: 30rpx;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		z-index: 99;
		margin-top: -50rpx;
		width: 100%;
		.swiper {
			height: 572rpx;
			width: 100%;
			border-radius: 30rpx;
			.swiper-list {
				display: flex;
				flex-direction: row;
				background: #ffffff;
				border-radius: 30rpx;
				padding: 30rpx 5rpx 0;
				z-index: 99;
				flex-wrap: wrap;
				width: 100%;
				height: 540rpx;
				.item {
					width: 148rpx;
					text-align: center;
					padding-bottom: 18rpx;
					.icon {
						width: 96rpx;
						height: 96rpx;
						margin: 0 auto;
						display: block;
					}
					.item-title {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #333333;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 148rpx;
						padding: 0;
					}
					.item-desc {
						font-size: 20rpx;
						color: #999999;
						text-overflow: ellipsis;
						white-space: nowrap;
						// margin-top: 4rpx;
						overflow: hidden;
						width: 148rpx;
						padding: 0;
					}
				}
			}
		}
		.indicator {
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
			.swiper-dot {
				// 指示点元素默认样式
				width: 12upx;
				height: 8upx;
				background: #DDDDDD;
				border-radius: 4rpx;
				margin-left: 6rpx;
			}
						
			.swiper-dot-active {
				// 指示点元素激活（当前选中）状态样式
				width: 32upx;
				height: 8upx;
				background: #FF3737;
				border-radius: 4rpx;
			}
		}
	}
	.list {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 5rpx 12rpx;
		z-index: 99;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		margin-top: -50rpx;
		.item {
			width: 148rpx;
			text-align: center;
			padding-bottom: 18rpx;
			.icon {
				width: 96rpx;
				height: 96rpx;
				margin: 0 auto;
				display: block;
			}
			.item-title {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #333333;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				padding: 0;
				width: 148rpx;
			}
			.item-desc {
				font-size: 20rpx;
				color: #999999;
				text-overflow: ellipsis;
				white-space: nowrap;
				// margin-top: 4rpx;
				overflow: hidden;
				width: 148rpx;
				padding: 0;
			}
		}
	}
	.bottom-list {
		margin: 20rpx 0;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		.top {
			display: flex;
			align-items: center;
			.img {
				height: 32rpx;
				width: 32rpx;
			}
			.name {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: bolder;
				font-weight: bolder;
			}
		}
		.item {
			height: 240rpx;
			margin-top: 30rpx;
			display: flex;
			.img {
				height: 240rpx;
				width: 240rpx;
				background-color: #F9F9F9;
				border-radius: 8rpx;
				border: 1rpx solid #F5F5F5;
			}
			.right {
				margin-top: 20rpx;
				margin-left: 20rpx;
				.title-container {
					height: 80rpx;
					width: 428rpx;
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					vertical-align:middle;
					.brand {
						font-size: 22rpx;
						line-height: 32rpx;
						color: #FFFFFF;
						height: 30rpx;
						padding: 0 10rpx;
						background-color: #FF0520;
						border-radius: 15rpx;
						position: relative;
						top: -2rpx;
						margin-right: 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 82rpx;
					.money {
						color: #FF0520;
						font-size: 38rpx;
						font-weight: bolder;
						text {
							font-size: 28rpx;
							font-weight: 400;
						}
					}
					.btn {
						height: 56rpx;
						width: 156rpx;
						border-radius: 28rpx;
						background-color: #FF3737;
						color: #ffffff;
						line-height: 58rpx;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
