<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='false'></navseat>

		<view class="onecontent">
			<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
			<!-- 小内切圆 -->
			<view class="after"></view>
			<view class="onecontentabsolute">
			</view>
		</view>
		<view class="towcontent">
		<!-- 	<view :class="isFixedTop?'towcontentlistxitemboxfixed':''" :style="{'top':customheighttop + 'px'}">
				<view class="towcontentlistxitem flex-start">
					<view class="towcontentlistxitembox flex-colum"
						:class="towcontentclickindex == index?'towcontentlistxitemboxopacity':''"
						v-for="(item,index) in listbox" :key="index" @click="towcontentclick(index)">
						<text>{{item.name}}</text>
						<image v-if="towcontentclickindex == index"
							src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view> -->
			<view v-if="isFixedTop" :style="{'height':windowHeight - seighT + 'px'}"></view>
			<view class="towcontentboutton" :style="{'height':seighT + 'px'}">
				<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"> -->
				<view class="fivecontent_item" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
					<view class="fivecontent_item_nav flex-start">
						<image class="fivecontent_item_navimage" :src="item.shopImage" mode="aspectFill"></image>
						<view class="fivecontent_item_nav_left">
							<view class="fivecontent_item_nav_lefttop flex-between">
								<view>
									{{item.shopName}}
								</view>
								<view>
									{{item.distances}}
								</view>
							</view>
							<view class="fivecontent_item_nav_lefttopstart flex-start">
								<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
									:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
									<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
										mode="aspectFill"></image>
									<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="fivecontent_item_box">
						<view class="fivecontent_item_boxitem flex-between">
							<image :src="item.image" mode=""></image>
							<view class="fivecontent_item_boxitemleft flex-colum-start">
								<view class="fivecontent_item_boxitemleftone flex-between">
									<view>{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}</view>
									<text>已抢{{item.realSalesNumber}}份</text>
								</view>
								<view class="flex-start flexstartboxfttow">
									<view class="fivecontent_item_boxitemlefttow flex-start"
										v-for="(c,index2) in item.proTag" :key="index2"
										:style="{'background':c.backColor,'color':c.backColor}">
										<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
											:src="c.shareImg" mode="aspectFill"></image>
										<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
									</view>
								</view>
								<view class="indexboxitemleftthere flex-colum-start">
									<view class="indexboxitemleftthereabsolute">
										马上抢
									</view>
									<view class="indexboxitemlefttheretext flex-start">
										<view class="fivecontent_item_boxitemlefthere_one flex-start">
											<text class="flex_startone">到手</text>
											<text class="flex_starttow">¥{{item.salePrice}}</text>
										</view>
										<view class="fivecontent_item_boxitemlefthere_tow">
											{{item.discount || ''}}折
										</view>
										<view class="fivecontent_item_boxitemlefthere_there">
											¥{{item.originPrice}}
										</view>
									</view>
									<view class="indexboxitemleftthere_countdown flex-between">
										<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
										<view class="indexboxitemleftthere_countdowntexts">
											<uni-countdown @timeup="updateCity" :show-day="false"
												:day="item.end_times.d" :hour="item.end_times.h"
												:minute="item.end_times.m" :second="item.end_times.s"
												:indexs='index' color="#FFFFFF" border-color="#00B26A"
												splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
								
										</view>
								
									</view>
								</view>
							</view>
				
						</view>
					</view>
				</view>
				<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
				<!-- </scroll-view> -->
			</view>
		</view>

	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				titlename: '咖啡',
				opacitys: false,
				towcontentclickindex: 0,
				windowHeight: '',
				seighT: '',
				customheighttop: '', //top高度
				isFixedTop: false,
				Topdistance: 3000, //吸顶初始距离
				list: [],
				toplist: {},
				listbox: [],
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					distance: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
				type:''
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacitys = false
			} else {
				this.opacitys = true
			}
			if (e.scrollTop >= this.Topdistance) { //类别导航栏
				this.isFixedTop = true
			} else {
				this.isFixedTop = false
			}
		},
		onLoad(e) {
			let _this = this
			uni.getStorage({
				key: 'itemData',
				success: function(res) {
					_this.type = res.data.value
					_this.distiricttopCommon()
					// setTimeout(() => {
						_this.GetTop()
						// _this.init_fn()
					// }, 1000)
				}
			});
			// this.type = e.value
			// this.distiricttopCommon()
			// setTimeout(() => {
			// 	this.GetTop()
			// }, 1000)
		},
		onShow() {
			let _this = this
			uni.getStorage({
				key: 'itemData',
				success: function(res) {
					_this.type = res.data.value
					_this.distiricttopCommon()
					// setTimeout(() => {
						// _this.GetTop()
						_this.init_fn()
					// }, 1000)
				}
			});
			// this.init_fn()
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			clickproduct(item){
				uni.pro.navigateTo('product/index',{
					id:item.id
				})
			},
			init_fn() {
				this.list = []
				this.form = {
					address: uni.cache.get('getLocationstorage').address, //地址
					lng: uni.cache.get('getLocationstorage').lng,
					lat: uni.cache.get('getLocationstorage').lat,
					type:this.type, //品类
					orderBy:0, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					dateType: 1,
					status: 'loadmore'
				}
				this.onLoadlist()
			},
			async distiricttopCommon(e) {
				let res = await this.api.distiricttopCommon({
					type: this.type, //团购卷品类Id/subShop-预约到店
					orderBy: ''
				})
				if (res.code == 0) {
					this.toplist = res.data.carousel[0]
					this.listbox = res.data.menu
				}
			},
			async onLoadlist() {
				try {
					let res = await this.api.indexlist(this.form)
					var dates = new Date().getTime();
					res.data.list.forEach((item, index) => {
						var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
						if (leftTime >= 0) {
							let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
							let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
							let m = Math.floor(leftTime / 1000 / 60 % 60);
							let s = Math.floor(leftTime / 1000 % 60);
							item.end_times = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						} else {
							item.end_times = 0
						}
					})
					if (res.data.pages < this.form.page) {
						this.form.status = 'nomore'
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.list = [...this.list, ...res.data.list];
							this.form.status = 'loading';
							if (res.data.pageNum == res.data.pages) {
								this.form.status = 'nomore';
							} else {
								this.form.status = 'loading';
							}
						}, 500)
					}
				} catch (e) {}
			},
			//G滚动底部
			loadMore(e) {
				console.log(e)
			},
			//获取元素距离顶部的距离
			GetTop() {
				uni.getSystemInfo({
					success: (data) => {
						console.log(data)
						this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
						// #ifdef MP-WEIXIN
						const custom = wx.getMenuButtonBoundingClientRect()
						this.seighT = data.windowHeight - custom.height - custom.top;
						console.log(custom)
						this.customheighttop = custom.height + custom.top
						// #endif
						// #ifdef APP-PLUS
						this.customheighttop = data.statusBarHeight / 2
						this.seighT = data.windowHeight - data.statusBarHeight / 2
						// #endif
						this.$u.getRect('.towcontentlistxitembt').then(res => {
							this.seighT = this.seighT - res.height //高度
						})
						this.$u.getRect('.towcontentlistxitem').then(res => {
							this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
							this.seighT = this.seighT - res.height //高度
							console.log(res)
						})

					}
				})
			},
			towcontentclick(index) {
				this.towcontentclickindex = index
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		.onecontent {
			width: 100%;
			height: 492rpx;
			position: relative;

			.onecontentimage {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
			}

			.after {
				position: absolute;
				bottom: 32rpx;
				right: 0;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
			}

			.onecontentabsolute {
				position: absolute;
				width: 100%;
				padding: 0 52rpx;
				bottom: 64rpx;

				.onecontentabsoluteitem {
					padding: 8rpx 16rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					image {
						width: 24.16rpx;
						height: 29.31rpx;
					}

					input {
						padding: 0 16rpx;
						flex: auto;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.onecontentabsoluteitembotton {
						width: 120rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		.towcontent {
			position: relative;
			margin-top: -32rpx;

			.towcontentlistxitemboxfixed {
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 99;
				margin-top: 0rpx !important;
			}

			.towcontentlistxitem {
				// margin-top: -32rpx;
				padding: 36rpx 28rpx 0rpx 28rpx;
				border-radius: 24rpx 0rpx 0rpx 0rpx;
				background: #F9F9F9;

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

				.towcontentlistxitembox {
					margin-left: 48rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				.towcontentlistxitemboxopacity {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				image {
					width: 38.83rpx;
					height: 8.62rpx;
				}
			}

			.towcontentlistxitembt {
				padding: 28rpx;
				overflow-x: auto;
				flex-wrap: nowrap;
				background: #F9F9F9;

				.towcontentlistxitembtitem {
					flex: none;
					padding: 8rpx 24rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-left: 32rpx;
				}

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

				.towcontentlistxitembtitemaktev {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					background: #FEE06A;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}


			.towcontentboutton {
				padding: 0 28rpx;

				.fivecontent_item:nth-child(1) {
					margin-top: 0;
				}

				.fivecontent_item {
					margin-top: 32rpx;
					padding: 24rpx;
					width: 100%;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;

					.fivecontent_item_nav {
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 8rpx;
						}

						.fivecontent_item_nav_left {
							flex: auto;
							margin-left: 12rpx;

							.fivecontent_item_nav_lefttop {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
							}

							.fivecontent_item_nav_leftlang {
								margin-top: 8rpx;
								width: max-content;
								padding: 4rpx 10rpx;
								background: #FFF9E1;
								border-radius: 4rpx 4rpx 4rpx 4rpx;

								text {
									margin-left: 6rpx;

									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 16rpx;
									color: #F9A511;
								}

								image {
									width: 10.82rpx;
									height: 14.06rpx;
								}
							}

							.fivecontent_item_nav_leftlang:nth-child(2) {
								margin-left: 12rpx;
								background: #FEE9DF;
							}
						}
					}

					.fivecontent_item_box {
						margin-top: 20rpx;
						border-top: 2rpx solid #E5E5E5;
						padding-top: 14rpx;

						.fivecontent_item_boxitem {
							image {
								width: 192rpx;
								height: 192rpx;
								border-radius: 12rpx;
							}

							.fivecontent_item_boxitemleft {
								margin-left: 24rpx;
								flex: auto;

								.fivecontent_item_boxitemleftone {
									width: 100%;

									text {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 24rpx;
										color: #999999;
									}

									view {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 500;
										font-size: 28rpx;
										color: #333333;
									}
								}

								.fivecontent_item_boxitemlefttow {
									margin-top: 8rpx;
									width: max-content;
									padding: 4rpx 10rpx;
									background: #FFF9E1;
									border-radius: 4rpx 4rpx 4rpx 4rpx;

									text {
										margin-left: 6rpx;

										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 16rpx;
										color: #F9A511;
									}

									image {
										width: 10.82rpx;
										height: 14.06rpx;
									}
								}

								.fivecontent_item_boxitemlefttow:nth-child(2) {
									margin-left: 12rpx;
									background: #FFD6D7;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
								}

								.indexboxitemleftthere {
								position: relative;
								margin-top: 30rpx;
								padding-left: 16rpx;
								width: 100%;
								background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
								background-size: 100% 100%;
							
								.indexboxitemleftthereabsolute {
									position: absolute;
									top: 14rpx;
									right: 12rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: bold;
									font-size: 24rpx;
									color: #FFFFFF;
								}
							
								.indexboxitemlefttheretext {
									// width: 100%;
									margin-top: 12rpx;
									// align-items: flex-end;
							
							
							display: flex;
							justify-content: center;
							align-items: center;
							
							
									.fivecontent_item_boxitemlefthere_one {
								display: flex;
								justify-content: center;
								align-items: center;
							
										.flex_startone {
											font-family: Source Han Sans CN, Source Han Sans CN;
											font-weight: 500;
											font-size: 16rpx;
											color: #FF7127;
										}
							
										.flex_starttow {
											font-family: Source Han Sans CN, Source Han Sans CN;
											font-weight: 500;
											font-size: 24rpx;
											color: #FF7127;
										}
									}
							
									.fivecontent_item_boxitemlefthere_tow {
										margin-left: 4rpx;
										padding: 2rpx 10rpx;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
										border: 2rpx solid #FF7127;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 500;
										font-size: 16rpx;
										color: #FF7127;
									}
							
									.fivecontent_item_boxitemlefthere_there {
										margin-left: 6rpx;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 16rpx;
										color: #999999;
										text-decoration-line: line-through;
									}
								}
							
								.indexboxitemleftthere_countdown {
									width: 100%;
									padding-right: 7rpx;
									margin-top: 2rpx;
									.indexboxitemleftthere_countdowntext {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 24rpx;
										color: #999999;
										padding-bottom: 8rpx;
									}
							
									.indexboxitemleftthere_countdowntexts {
										font-family: Roboto, Roboto;
										font-weight: 400;
										color: #333333;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: bold;
										font-size: 16rpx;
										color: #FFFFFF;
									}
								}
							}
							}
						}
					}
				}
			}

		}

	}
</style>