<template>
	<view class="activity" :class="isRequest ? 'active' :''">
		<view class="topBanner"><image src="https://admin.caimei365.com/userfiles/1/images/photo/2020/08/top-bg%402x.png" mode=""></image></view>
		<view class="activity-main clearfix" :class="inputActive">
			<view class="home-hotmaintab-fixed">
				<view class="home-flex-tab show">
					<view class="flex text-white">
						<view class="basis-xxl">
							<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
								<block v-for="(item,index) in headTab.list" :key="index">
									<view class="cu-item" :class="index== headTab.TabCur ?'select':''" @tap="tabSelect(index,item)" :data-id="index">
										<view>{{item}}</view>
										<view class="tab-dot bg-white"/>
									</view>
								</block>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-container" id="activityContainer">
			<view class="activity-section one clearfix" :class="'activity-section-'+ index" v-for="(item, index) in dataList" :key="index" :data-index='index' >
				<view class="section-title" :class="'section-title-'+ index" >
					<view class="name">{{item.classificationName}}</view>
				</view>
				<view class="section-main">
					<view class="product-list" v-for="(pros, prosIndex) in item.productList" :key="prosIndex"  @click.stop="detailPage(pros)">
						<view class="list-rebate">{{pros.activityDiscount}}<text class="small">折</text></view>
						<view class="list-image">
							<image :src="pros.mainImage" mode=""></image>
						</view>
						<view class="list-name">{{pros.name}}</view>
						<template v-if="hasLogin">
							<template v-if="userIdentity == 2 || userIdentity == 1">
								<view class="list-price">
									<view class="price-new">￥<text class="big">{{pros.retailPrice}}</text><text>{{pros.smallPrice}}</text></view>
									<view class="price-old">￥<text class="big">{{toFixedFn(pros.price1)}}</text><text></text></view>
								</view>
							</template>
							<template v-if="userIdentity == 4">
								<view class="list-price none">
									<view class="price-left">
										<text class="icon"></text>
										<text class="none">￥<text>???</text></text>
									</view>
									<view class="price-right">
										<view class="login-btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</view>
									</view>
								</view>
							</template>
						</template>
						<template v-else>
							<view class="list-price none">
								<view class="price-left">
									<text class="icon"></text>
									<text class="none">￥<text>???</text></text>
								</view>
								<view class="price-right">
									<view class="login-btn" @click.stop="navigator">登录</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-pop">
			<!-- #ifdef MP-WEIXIN -->
			<button class="activity-icon share" open-type="share"  @click="onShare"></button>
			<!-- #endif -->
			<button class="activity-icon top" :class="showTop ? 'active' : ''" @click.stop="onPageScrollTop"></button>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	import { debounce } from '@/common/config/common.js'
	import authorize from '@/common/config/authorize.js'
	
	console.log(this)
	export default {
	    data() {
	        return {
			  winHeight: '',
	          topBanner:'',
			  userIdentity:'',
			  clubStatus:'',
			  inputActive:'float',
			  showTop:false,
			  isRequest:false,
			  skeletonShow:true,
			  headTab: {
			  	TabCur: 0, 
			  	scrollLeft: 0, 
			  	list: [],
			  }, 
			  dataList:[],
			  tabSelectFlag: false,
			  sectionPropsArr: [],
			  scrollTopArray:[],
			  sectionTopRangeArr: [],
			  scrollTopIndex:0,
			  hanldeProductID:0,
			  hanldeProductName:'',
			  hanldeProductPrice:'',
	        }
	    },
		onLoad() {
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.clubStatus = resolve.clubStatus
				this.userIdentity = resolve.userIdentity
			})
			this.getWinHeight();
			this.initData()
			uni.setNavigationBarTitle({title:'年中大促'});
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			getWinHeight() {
				this.winHeight = wx.getSystemInfoSync().windowHeight;
			},
			initData(){
				this.ActivityService.GetRepeatActivityBrandList().then(response =>{
					let data = response.data
					this.headTab.list = data.brandNames
					this.dataList = data.brandList
					this.dataList.forEach((item,index) =>{
						let productList = item.productList
						let newProductList = []
						this.scrollTopArray.push(index);
						// 处理商品价格
						productList.forEach(el=>{
							let value = el.retailPrice
							let number =  Number(value) - Number(value)%1;
							let intPartFormat = number.toString(); //将整数部分逢三一断
							let floatPart = '.00'
							let smallPrice = ''
							let valueArray = value.toString().split(".");
							if(valueArray.length == 2){
								 floatPart = valueArray[1].toString(); //拿到小数部分
								 if(floatPart.length == 1) { //补0,实际上用不着
									smallPrice = "." + floatPart + '0';
								 } else {
									smallPrice = "." + floatPart;
								 }
							}else{
								smallPrice = floatPart
							}
							newProductList.push(Object.assign({},el,{retailPrice:intPartFormat,smallPrice:smallPrice}))
						})
						item.productList = newProductList
					})
					this.isRequest = true
					// 你看下要不要加延时，可能会获取不到scrollTop
					setTimeout(()=>{
						this.getSectionProps();
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getSectionProps() {
				// 获取每个tab对应区域的scrollTop值
				let className = '.activity-section',
					sectionPropsArr = [];
				uni.createSelectorQuery().select('.topBanner').boundingClientRect((data)=>{//最外层盒子节点
				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
						res.forEach((item, index) => {
							sectionPropsArr.push({
								className: `${className}${index}`,
								scrollTop: item.top - data.top - 50
							})
						})
						this.sectionPropsArr = sectionPropsArr;
						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
				　　}).exec()
				}).exec()
			},
			getSectionRange(arr) {
				// 获取每个tab对应区域的区间
				let sectionScrollTopList = [];
				for(let i = 0; i < arr.length; i++) {
					let thisScrollTop = arr[i].scrollTop;
					if(i < arr.length - 1) {
						let nextScrollTop = arr[i+1].scrollTop;
						if(i == 0) {
							sectionScrollTopList.push(`0-${thisScrollTop}`);
						} else if(i == arr.length - 2){
							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
						} else {
							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
						}
					} else {
						sectionScrollTopList.push(`${thisScrollTop-this.winHeight}-${thisScrollTop}`);
					}
				}
				return sectionScrollTopList;
			},
			activeTab: debounce((top, _this)=> {
				// 当滑动时也能同步激活tab
				const { sectionTopRangeArr } = _this;
				if(sectionTopRangeArr.length > 0) {
					sectionTopRangeArr.forEach((item, index) => {
						let splitItem = item.split('-'),
							openInterval = Number(splitItem[0]),
							closedInterval = Number(splitItem[1]);
						if(top >= openInterval && top < closedInterval) {
							_this.headTab.TabCur = index;
							_this.headTab.scrollLeft = (index - 1) * 60;
						}
					})
				}
			},100, true),
			tabSelect(index,item) {//tab菜单被点击
				this.tabSelectFlag = true;
				this.headTab.TabCur = index;
				this.headTab.scrollLeft = (index - 1) * 60;
				let classIndex = '.activity-section-'+index;
				uni.createSelectorQuery().select('.topBanner').boundingClientRect((data)=>{//最外层盒子节点
				　　uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
				　　　　uni.pageScrollTo({
				　　　　　　duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
				　　　　　　scrollTop:res.top - data.top - 50,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				　　　　})
						setTimeout(()=>{
							this.tabSelectFlag = false;
						},500)
				　　}).exec()
				}).exec()
			},
			detailPage(item) {//跳转商品详情页
				this.hanldeProductID = item.productID
				this.hanldeProductName= item.name
				this.hanldeProductPrice= item.retailPrice
				this.$api.navigateTo(`/pages/goods/product?id=${item.productID}&path=activity`)
			},
			navigator(){
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						this.$store.commit('setLoginType',9)
						this.$api.navigateTo('/pages/login/login?type=0')
					}else{
						this.$api.navigateTo('/pages/authorization/authorization?type=1')
					}
				})	
			},	
			toFixedFn(text){//处理小数点后两位数
				return Number(text).toFixed(2);
			},
			onShare(res){//点击按钮分享转发
				if (res.from === 'button') {
				  // 来自页面内转发按钮
				}
				return {
				  title: '采美年中大促，折扣满满，全场低至9元~',
				  path: '/h5/pages/activity/activity_mid',
				  imageUrl:'https://admin.caimei365.com/userfiles/1/images/photo/2020/08/share%402x.png'
				}
			},
			onPageScrollTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 600
				});
			},
			onCreateSelectorQuery(event,index,classIndex){
				let self = this
				uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点4
					if(res.dataset.index == index){
						if( event.scrollTop == res.top ){
							self.headTab.TabCur = index;
							self.headTab.scrollLeft = (index - 1) * 60;
						}
					}
				}).exec()
			}
		},
		onShareAppMessage (res){//小程序三点分享转发
			if (res.from === 'button') {
				// 来自页面内转发按钮
		    }
			return {
				title: '采美年中大促，折扣满满，全场低至9元~',
				path: '/h5/pages/activity/activity_mid',
				imageUrl:'https://admin.caimei365.com/userfiles/1/images/photo/2020/08/share%402x.png'
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			const { scrollTop } = e;
			if(!this.tabSelectFlag) {
				this.activeTab(scrollTop, this);
			}
			
			if(e.scrollTop > 450){
				this.inputActive = 'fixed'
			}else{
				this.inputActive = 'float'
			}	
			if(e.scrollTop>600){
				this.showTop = true
			}else{
				this.showTop = false
			}	
			//锚点切换
			// this.createSelectorQuery(e)
		},
		onPullDownRefresh() {//下拉刷新
			uni.stopPullDownRefresh()
		},
		onShow() {
			
		}
	}
</script>
	
<style lang="scss">
	@import "@/common/css/stylesheet.css";
	view,
	scroll-view,
	swiper,
	button,
	input,
	textarea,
	label,
	navigator{
		box-sizing: border-box;
	}
	.activity{
		width: 100%;
		height: auto;
		padding-bottom:60rpx;
		background:rgba(242,94,58,1);
		opacity: 0;
		&.active{
			opacity: 1;
		}
	}
	.topBanner{
		width: 100%;
		height: 880rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.activity-main{
		width: 100%;
		height: auto;
		&.float{
			float: left;
		}
		&.fixed{
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99999;
		}
	}
	.activity-pop{
		width: 80rpx;
		height: 220rpx;
		position: fixed;
		right: 20rpx;
		bottom: 100rpx;
		.activity-icon{
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: 15rpx 0;
			&.share{
				background: url(data:image/png;base64,[encoded data, 10272 characters]) no-repeat;
				background-size: contain;
			}
			&.top{
				opacity: 0;
				background: url(data:image/png;base64,[encoded data, 10056 characters]) no-repeat;
				background-size: contain;
				&.active{
					opacity: 1;
				}
			}
		}
	}
	.activity-container{
		width: 100%;
		height: auto;
		padding: 0 24rpx;
		.activity-section{
			width: 100%;
			height: auto;
			.section-title{
				width: 100%;
				height: 88rpx;
				float: left;
				.name{
					min-width: 40rpx;
					height: 88rpx;
					margin: 0 auto;
					padding: 0 60rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
					font-size:$font-size-32 ;
					letter-spacing:4rpx;
					position: relative;
					&::before{
						content: '';
						width:240rpx;
						height:4rpx;
						background:linear-gradient(302deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
						position: absolute;
						left: 20rpx;
						top: 50%;
					}
					&::after{
						content: '';
						width:240rpx;
						height:4rpx;
						background:linear-gradient(302deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
						position: absolute;
						right: 20rpx;
						top: 50%;
					}
				}
			}
			.section-main{
				width: 100%;
				height: auto;
				float: left;
				padding: 0 0 20rpx 0;
				.product-list{
					width: 340rpx;
					height: 546rpx;
					padding:0 0 20rpx 0;
					border-radius: 20rpx;
					background-color: #FFFFFF;
					float: left;
					margin-right:20rpx;
					margin-bottom: 20rpx;
					position: relative;
					&:nth-child(2n){
						margin-right: 0;
					}
					.list-rebate{
						width: 82rpx;
						height: 82rpx;
						position: absolute;
						top: 15rpx;
						left: 15rpx;
						background: url(data:image/png;base64,[encoded data, 10272 characters])no-repeat;
						background-size: contain;
						line-height: 82rpx;
						text-align: center;
						font-size: $font-size-24;
						font-weight: bold;
						color: #FFFFFF;
						font-family: 'Helvetica';
						.small{
							font-size: $font-size-20;
						}
					}
					.list-image{
						width: 340rpx;
						height: 340rpx;
						image{
							width: 340rpx;
							height: 340rpx;
							display: block;
							border-radius: 20rpx 20rpx 0 0;
						}
					}
					.list-name{
						width: 100%;
						padding:0 20rpx;
						height: 84rpx;
						margin: 10rpx 0;
						line-height: 42rpx;
						text-overflow:ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: $font-size-28;
						letter-spacing: 1px;
					}
					.list-price{
						width: 100%;
						height: 60rpx;
						padding:0 20rpx;
						&.none{
							padding: 6rpx 20rpx;
							margin-top: 30rpx;
							.price-left{
								float: left;
								.icon{
									display: block;
									width: 48rpx;
									height: 48rpx;
									background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAJqADAAQAAAABAAAAJAAAAAD+MnM7AAAGBElEQVRYCcWYz2sdVRTH752Zl+S91OKPTUipGDf+Ie6s7UahG3VVFxYEMTSY90RKO6maikQ3LrJoCRXFuggugsU0VVS6KEKVSJUKFS2llBAqbao14Y3ne37cO+81P957CTjwOjN3zjn3c77n3DuTekfHoacXj6WpG3O+6E/TxCWJc0nq6edcinMi13L2NOacJxt+Rs/pfJf8jo9NjUwi3k4cFJ4mSADlBIqBAENwAKIfIHAWEIOiBBgaz9wuSurd94/8PrETUIjBYPQvQRlMAaVWK1k6nmWDewYHa3vSSjqeZG7VFISt/QDnAZ3hXNQ/bOwMnAfd4WcWC0yQQh0qUyVNx0+efeodPLPj6KGrbxTOvW1wUFQU1IQUFupmWXLilaOPN8y3lzMrJiWjEmlP+bSYaQ9WHeifMZUMSEpMshMUQK3vqKz16fyPbZVVwDhbNL30VK1Wa+dya1mzkL7jnpKey6zPUEq9Riy69qmvn5q83jMcg4kCtgKdu792/6UHyFbXXkAfsTqciAGSH8YpEsehc+m6/vHUjZ7guMdef/5KgS3ASpJkCZr/LTdQmamQUv7ftRd95o977/owuZXMrqU/1Z/jJAQJQCSCnvMnDh4e7qrnGOzIwV+o+S1jWQCStUzAvcQqiTIMUgKEr8CpoqSa9Gv0x4J47uWhjuG4lNI7okRUAz2HhpbJQpkU0OxEZQBHf4xltlFr35J9ffbUrY7LKmA6GSaPANo7JSVNKSlRVMfGy/4GzspxDwK+qM99stQRHIMhIAJhAgTCWdTS8uJex2Fn2worTc/K/jzGi0S3D1UM47Bzrln/8uzWcAwW+0ucLXOcZQuRRg7jnIT2FdtoAjwuoGxrq1jHg7K0zy3MLm+qHIOZWubIqiAYB1QA3RKCLSmByU1BVpnueYyEYbsQQ8ZZdY5JfgT33dztDeHIzFQSEAQ0ZQyUX1UaMD4DsNoypNyzPyXBXykA5WtpjTI8thPnm/WL8+vDMRgcDKilsUuKAMh6SmztTSGK8oscNmyntgQM29B3mhyP8aql566oX7rwVw6BygeD0QZ4h0tAdwbAyug9j2nz8zipQF8Sopgq0vqNRnF4XONZUlA2tID6czKu8eP3rXAMRiodk4yxIUo/ICt636kCyFrGOXsGFsUke3ve5k8+YfEgLsFan9m71RR1iW/8fOlOUI7BxqaefC+tJBNwghIwNkDrMwOyUkEhVpImt004+FPzmz+fAUQx+afJUiXF35KnM9W1ceXy3VGUlMFwMTr5xJtZxRNcqzIIxqCcrU5ANqaUlSwsBPgbCJdf/Wm8rJ4pxcnBTkGzxL/WAoabV3OCy5IJmbQkvQXFGRPrz4KLigJg12ZnE/K9Jhf8FZyB7Tp182DBVvzAMT1xPaeSNhAAk8esACb3cRVaf0Xb4EcgwZ/iGLTE08pQvBjLf7Prseq+oSG/si4YSE+fvJF732xYMFOg/XUkiuAjMU5stnjW7h/GYI/FwYnCP0Jh/g3B8PDMB4ArGggQVOBySlDrJck4QsjmGic20Hb1YiWSr2uPVvcND/t7mBfHpmAw+PSjm7l3TS5re/ZxIstcepBVgVr0iY3VF+zKSVmbVAjq4VaojsBg9Pn0zZwmI+WiUi2TrVOyssLBVu3is+QCKfVsWSnMh2NLxcTMuS9O38rpr5+GlI+UwSRhW9BGXgeQ7Vgp8ZHy4dpvCNUVGIznzizlLqUFoT1nDR8ViJNDJeutlue8SJKF2iPV/espZUJ0rJg5nPtsicpKCwIqALCkmqnDqph6bAdIbDP8ylqobgGFuboGg9P52eU8CWXV5sbflQRj6giIwmsp6dn5vt3V/Xv3+r8RZ7OjJzAE/HZumbYSWhCqiAGxWgFEFouWtGMoxO8ZDM4Xz93O6b8TBI5gsDVYX1mPQUX6rJrv21070IlSiItjW2AI8AM+8lIopyUlOisplxNQD3UHtSNgCMIfefQ9ZWrxIoB6BNXfpVKIh2PbikkY5/gjj3tO+oo+ob5KqrUDIyP+H7P5386/Xr43evWnlT9/W1yZvnatGNgOyH81Zu2QqjVpZQAAAABJRU5ErkJggg==)no-repeat center center;
									background-size: contain;
									float: left;
								}
								.none{
									display: block;
									font-size: $font-size-20;
									line-height: 48rpx;
									color: #4A4B54;
									float: left;
									font-weight: bold;
									margin-left: 5rpx;
									text{
										letter-spacing: 4rpx;
										font-size: $font-size-32;
									}
								}
							}
							.price-right{
								float: right;
								.login-btn{
									width: 100rpx;
									height: 48rpx;
									background-color: #613FD2;
									border-radius: 24rpx;
									color: #FFFFFF;
									text-align: center;
									line-height: 48rpx;
									font-size: $font-size-26;
									font-weight: bold;
								}
							}
						}
						.price-new{
							width: 100%;
							height: 48rpx;
							line-height: 48rpx;
							font-size: $font-size-24;
							font-weight: bold;
							color: #FF5959;
							text-align: left;
							.big{
								font-size: $font-size-36;
							}
						}
						.price-old{
							width: 100%;
							height: 38rpx;
							line-height: 38rpx;
							font-size: $font-size-24;
							color: #666666;
							text-align: left;
							text-decoration: line-through;
						}
						
					}
				}
			}
		}
	}
	.home-hotmaintab-fixed{
		width: 100%;
		height:auto;
		overflow: hidden;
		background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/08/tab%402x.png)no-repeat;
		background-size: contain;
		padding-bottom: 20rpx;
		.home-flex-tab {
			width: 100%;
			position: relative;
			transition: opacity .25s;
			.text-white{
				color: #FFFFFF;
			}
			.flex {
				.basis-xxl {
					flex-basis: 100%;
					width: 100%;
					z-index: 1;
				}
				.basis-xxs {
					flex-basis: 10%;
					z-index: 1;
					width: 10%;
				}
				.sort-icon {
					font-size: 55rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
				}
			}
		}
	}
	.nav{
		white-space:nowrap;
	}
	.nav .cu-item {
		display: inline-block;
		margin: 0 10rpx;
		padding: 0 20rpx;
		letter-spacing: 2rpx;
	}
	.nav.z .cu-item.select {
		font-size: $font-size-32;
		font-weight: bold;
		color: #FFFFFF;
	}
	.nav.z .cu-item {
		height: 88rpx;
		font-size: $font-size-26;
		line-height: 88rpx;
		position: relative;
	}
	.nav.z .cu-item.select .tab-dot {
		position: absolute;
		height: 8rpx;
		border-radius: 20rpx;
		bottom: 0;
		left: 0;
		right: 0;
		width: 40rpx;
		margin: auto;
	}
	.bg-white{
		background-color: #FFFFFF;
	}
	::-webkit-scrollbar {
		display: none;
	}
	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
</style>
