<template>
	<view id="wrapper">
		<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
			:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
			<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
				<view class="left-btn">
					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
						@click="navClickHandle(1)">
						<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
					</view>
					<view class="left-btntitle"
						:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
						积分商城
					</view>
				</view>

			</view>
		</view>
		<view class="shop-cover">
			<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
			</image>
			<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
				<view class="shop-coveronebox flex-start">
					<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
					<view style="margin-left: 10rpx;">
						当前积分
					</view>
				</view>
				<view class="shop-coveroneboxnuber">
					5830
				</view>
				<navigator url="/pages/user/shop/detail" hover-class="navigator-hover"
					class="shop-coveroneboxdetail flex-start">
					<view style="margin-right: 20rpx;">
						积分明细
					</view>
					<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
				</navigator>
				<view class="shop-coveroneinput flex-start">
					<u-search shape="round" searchIconSize='32rpx' height='100%' bgColor='#fff' placeholder="请输入商品"
						:animation="true" :clearabled="true" v-model="keyword"></u-search>
					<view class="shop-coveroneinputsouso">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="shop_content">
			<view class="shop_contenttitle">
				<view class="shop_contenttitleitem" :class="index == 1?'shop_contenttitleitems':''"
					v-for="(item,index) in shopcontenboxlsit" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="shop_contentlist flex-between">
				<view class="shop_contentlistitem flex-colum-start" @click="clickshopinfo(item)"
					v-for="(item,index) in 4" :key="index">
					<image class="shop_contentlistitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
					<view class="shop_contentlistitemone">
						澳洲高级洗发水
					</view>
					<view class="shop_contentlistitemtow flex-start">
						<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
						<view>
							30积分
						</view>
					</view>
					<view class="shop_contentlistitemthere flex-between">
						<view>
							市场价¥100.00
						</view>
						<view>
							已兑换0390件
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash';
	import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
	import webSocketUtils from '@/common/js/websocket.js'
	export default {
		data() {
			return {
				keyword: '',
				menuInfo: {},
				paddingBtmSize: 6,
				isFixed: false,
				active: 0,
				titleTopNums: [],
				shopcontenboxlsit: [{
						name: '全部'
					},
					{
						name: '交易积分'
					}, {
						name: '活动积分'

					}, {
						name: '任务积分'

					}, {
						name: '任务积分'

					}, {
						name: '任务积分'

					}, {
						name: '任务积分'

					}, {
						name: '任务积分'

					}
				]
			};
		},
		onPageScroll(e) {
			if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
				this.isFixed = true;
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				});
			} else {
				this.isFixed = false;
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000'
				});
			}
			this.countScrollTitle(e.scrollTop);
		},
		onLoad() {
			// #ifdef APP-PLUS || H5
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					this.menuInfo = e
				}
			})
			// #endif
			// #ifdef MP-WEIXIN
			this.menuInfo = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		onUnload() {

		},
		methods: {
			clickshopinfo(item) {
				uni.pro.navigateTo('user/shop/shopinfo', {
					item: item
				})
			},
			// 导航栏点击
			navClickHandle(t) {
				switch (t) {
					case 1:
						// 返回
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					default:
						break;
				}
			},
			countScrollTitle: _.throttle(function(top) {
				if (this.titleTopNums.length > 1) {
					for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
						if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
							this.titleTopNumIndex = i;
						}
					}
					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
						this.titleTopNumIndex = this.titleTopNums.length - 1;
					}
				}
			}, 100),
		}
	};
</script>

<style scoped lang="scss">
	$bg: #fafafa;
	$tabLeft: 200upx;
	$itemH: 100upx;
	$cartH: 90upx;

	page {
		background: #fff;
	}

	.nav-wrap {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 97;

		&.is-fixed {
			background-color: #fff;
		}

		.content {
			position: relative;

			.left-btn {
				display: flex;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: $paddingSize;
				}
			}

			.left-btntitle {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;

				text-align: center;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
				font-weight: normal;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}

	.shop-cover {
		position: relative;
		z-index: 1;
		// &::after {
		// 	content: '';
		// 	width: 100%;
		// 	height: 100%;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 2;
		// 	background-color: rgba(0, 0, 0, 0.3);
		// }

		.img {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}

		.shop-coverone {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding: 0rpx 32rpx;
			z-index: 2;

			.shop-coveronebox {
				font-family: PingFangSC-Semibold, PingFangSC-Semibold;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.shop-coveroneboxnuber {
				margin-top: 8rpx;
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 74rpx;
				color: #333333;
			}

			.shop-coveroneboxdetail {
				font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
				font-weight: normal;
				font-size: 28rpx;
				color: #666666;
			}

			.shop-coveroneinput {
				margin-top: 32rpx;
				background: #FFFFFF;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				height: 64rpx;
				line-height: 64rpx;

				.shop-coveroneinputsouso {
					border-left: 2rpx solid #E8E8E8;
					height: 100%;
					padding: 4rpx 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
					font-weight: normal;
					font-size: 28rpx;
					line-height: 60 rpx;
					color: #666666;
				}
			}
		}
	}

	.shop_content {
		position: relative;
		top: 0rpx;
		margin-top: -24rpx;
		z-index: 3;
		width: 100%;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 0 28rpx 28rpx 28rpx;

		.shop_contenttitle {
			width: 100%;
			padding-top: 32rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			overflow-x: scroll;
			white-space: nowrap;

			.shop_contenttitleitem:nth-child(1) {
				margin-left: 0;
			}

			.shop_contenttitleitem {
				margin-left: 18rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
				font-weight: normal;
				font-size: 32rpx;
				color: #666666;
			}

			.shop_contenttitleitems {
				color: #FF981E;
			}
		}

		.shop_contentlist {
			.shop_contentlistitem {
				margin-top: 32rpx;
				width: 48%;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.shop_contentlistitemimage {
					width: 100%;
					height: 296rpx;
					border-radius: 18rpx 18rpx 0 0;
				}

				.shop_contentlistitemone {
					padding: 16rpx 16rpx 0 16rpx;
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}

				.shop_contentlistitemtow {
					padding: 16rpx 16rpx 0 16rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}

					view {
						margin-left: 6rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
						font-weight: normal;
						font-size: 24rpx;
						color: #FF981E;
					}
				}

				.shop_contentlistitemthere {
					padding: 16rpx;
					width: 100%;

					view:nth-child(1) {
						font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
						font-weight: normal;
						font-size: 20rpx;
						color: #999999;
						text-align: center;
						font-style: normal;
						text-decoration-line: line-through;
						text-transform: none;
					}

					view:nth-child(2) {
						font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
						font-weight: normal;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>