<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=" "></image>
			<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 class="towcontentlistxitembt flex-start">
					<view class="towcontentlistxitembtitem"
						:class="index==xitembtitemindex?'towcontentlistxitembtitemaktev':''"
						v-for="(item,index) in xitembtitem" :key="index" @click="clickxitembtitemindex(index)">
						{{item.name}}
					</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_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">
									<view class="fivecontent_item_boxitemleftone_t"><text class="fivecontent_item_boxitemleftone_o">热销TOP.{{index + 1}}</text>热销热销热销热销热销热销热销热销热销热销热销热销热销已抢{{item.realSalesNumber}}份</view>
								</view>
								<view class="fivecontent_item_boxitemlefttow flex-between">
									<view>{{item.productName}}</view>
									<text>已抢{{item.realSalesNumber}}份</text>
								</view>
							</view>

						</view>
					</view>
				</view><u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
				<!-- </scroll-view> -->
			</view>
		</view>
		<!-- 小内切圆 -->
		<!-- <view class="after"></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: [{
						name: '全部'
					},
					{
						name: '美食正餐'
					},
					{
						name: '饮品小吃'
					}
				],
				xitembtitemindex: 0,
				xitembtitem: [{
						name: '2小时销量飙升榜'
					},
					{
						name: '今日热榜'
					}
				],
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					distance: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
			};
		},
		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() {
			this.distiricttopCommon()
			this.onLoadlist()
			setTimeout(() => {
				this.GetTop()
			}, 1000)
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			//飙升榜
			clickxitembtitemindex(index) {
				this.xitembtitemindex = index
			},
			towcontentclick(index) {
				this.towcontentclickindex = index
			},
			//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)
						})

					}
				})
			},
			async distiricttopCommon() {
				let res = await this.api.distiricttopCommon({
					type: '', //团购卷品类Id/subShop-预约到店
					orderBy: 2
				})
				console.log(res.data)
				if (res.code == 0) {
					this.toplist = res.data.carousel[0]
					this.listbox = res.data.menu
				}
			},
			clickproduct(item) {
				uni.pro.navigateTo('product/index', item)
			},
			async onLoadlist() {
				try {
					this.form = {
						address: uni.cache.get('getLocationstorage').address, //地址
						lng: uni.cache.get('getLocationstorage').lng,
						lat: uni.cache.get('getLocationstorage').lat,
						type: '', //团购卷品类Id
						distanceInKm: '', //默认10 以经纬度为中心 多大范围以内 单位km
						orderBy: 2, //0.今日上新 1.离我最近 2.销量优先/热榜推荐 3.价格优先
						page: 1, //页数
						size: 10, //页容量
						status: 'loadmore',

					}
					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
						}
					})
					console.log(res.data.list)
					if (res.data.pages < this.form.page) {
						this.form.status = 'nomore'
						// if (res.data.pageNum == 1) {
						// 	this.is_end = true
						// }
						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) {}
			},
		}
	};
</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;
			}

			.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 24rpx 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: 32rpx 24rpx;
					width: 100%;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;


					.fivecontent_item_box {

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

							.fivecontent_item_boxitemleft {
								margin-left: 24rpx;
								flex: 1;
								justify-content: flex-start;
								height: 192rpx;
								.fivecontent_item_boxitemleftone {
									width: 100%;
									.fivecontent_item_boxitemleftone_t{
										.fivecontent_item_boxitemleftone_o{
											margin-right:10rpx ;
											display: inline-block;
											font-family: Roboto, Roboto;
											font-weight: 500;
											font-size: 16rpx;
											color: #FFFFFF;
											padding: 2rpx 6rpx ;
											text-align: center;
											background: linear-gradient( 116deg, #FF9D2B 0%, #FF4805 100%);
											border-radius: 4rpx 4rpx 4rpx 4rpx;
										}
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 28rpx;
										color: #333333;
										overflow:hidden; 
										text-overflow:ellipsis;
										display:-webkit-box; 
										-webkit-box-orient:vertical;
										-webkit-line-clamp:2; 
									}
								}
								.fivecontent_item_boxitemlefttow{
									
								}
							}
						}
					}
				}
			}

		}

		.after {
			position: absolute;
			top: -40rpx;
			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);
		}
	}
</style>