<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="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
		};
	},
	created() {
		this.getData();
	},
	onShow() {
		console.log('onShow');
		this.getUserInfo();
	},
	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
		// }, () => {})
		
	},
	methods: {
		goLogin() {
			this.$router.push('Login');
		},
		getUserInfo() {
			this.isLogin = true;
			this.$net
				.get('/staff/detail', {})
				.then(res => {
					if (res.code === 200) {
						this.name = res.data.staffName;
						this.integralCount = res.data.allIntegral;
						this.isLogin = 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 })
				.then(res => {
					if (res.data.list.length > 0) {
						this.brandList = this.brandList
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.concat(res.data.list)
							.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);
				});
		},
		goToGoodDetail(brandNo, brandName) {
			if (!this.isLogin) {
				this.goLogin();
				return
			}
			this.$router.push('GoodSkuList', { brandNo: brandNo, brandName: brandName });
		},
		goIntegralDetail() {
			if (!this.isLogin) {
				this.goLogin();
				return
			}
			this.$router.push('IntegralDetail')
		}
	}
};
</script>

<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	flex-direction: column;
	.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: 15rpx;
			}
			.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;
	}
	.list {
		display: flex;
		flex-direction: row;
		background: #ffeeee;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-top: 25rpx;
		margin-top: -50rpx;
		z-index: 99;
		padding: 15rpx 15rpx;
		flex-wrap: wrap;
		.item {
			width: 50%;
			height: 144rpx;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			.item-layout {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 144rpx;
				margin: 0 15rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding-left: 15rpx;
				padding-right: 15rpx;
				overflow: hidden;
				.icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 90rpx;
				}
				.item-right {
					display: flex;
					flex: 1;
					flex-direction: column;
					margin-left: 20rpx;
					overflow: hidden;
					.item-title {
						font-size: 30rpx;
						font-weight: bolder;
						color: #333333;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.item-desc {
						font-size: 24rpx;
						color: #999999;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 15rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
}
</style>
