<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(item,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(item,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.productName}}份
									</view>
								</view>
								<view class="fivecontent_item_boxitemlefttow flex-between">
									<view class="fivecontent_item_boxitemlefttow_o flex-start">
										<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="">
										</image>
										<view> {{item.productName}}</view>
									</view>
									<text class="fivecontent_item_boxitemlefttow_t">{{item.distances}}</text>
								</view>
								<view class="fivecontent_item_boxitemlefthere 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="fivecontent_item_boxitemlefour flex-start">
									<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/H.png" mode="">
									</image>
									<text>已抢{{item.realSalesNumber}}份</text>
								</view>
								<view class="fivecontent_item_boxitemlefive">
									马上抢
								</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小时销量飙升榜',
						dateType: 1
					},
					{
						name: '今日热榜',
						dateType: 0
					}
				],
				form: {},
			};
		},
		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()

			setTimeout(() => {
				this.GetTop()
			}, 1000)
		},
		onShow() {
			this.init_fn()
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			//飙升榜
			clickxitembtitemindex(item, index) {
				this.xitembtitemindex = index
				this.list = []
				this.form.dateType = item.dateType
				this.form.page = 1
				this.form.size = 10
				this.form.status = 'loadmore'
				this.onLoadlist()
			},
			towcontentclick(item, index) {
				this.towcontentclickindex = index
				this.list = []
				this.form.type = item.value
				this.form.page = 1
				this.form.size = 10
				this.form.status = 'loadmore'
				this.onLoadlist()
			},
			// 下面初始数据
			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: '', //品类
					orderBy: 4, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					dateType: 1,
					status: 'loadmore'
				}
				this.onLoadlist()
			},
			//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: 4
				})
				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', {
					id:item.id
				})
			},
			async onLoadlist() {
				try {
					let res = await this.api.indexlist(this.form)
					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) {}
			},
		}
	};
</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: 208rpx;
								height: 208rpx;
								border-radius: 12rpx;
							}

							.fivecontent_item_boxitemleft {
								margin-left: 24rpx;
								flex: 1;
								justify-content: flex-start;
								position: relative;
								.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 {
									width: 100%;
									margin-top: 14rpx;

									.fivecontent_item_boxitemlefttow_o {
										image {
											width: 24rpx;
											height: 24rpx;
										}

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

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

								.fivecontent_item_boxitemlefthere {
									width: 100%;
									margin-top: 12rpx;
									align-items: flex-end;

									.fivecontent_item_boxitemlefthere_one {
										align-items: flex-end;

										.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;
									}
								}

								.fivecontent_item_boxitemlefour {
									margin-top: 12rpx;
									background: #FFEEE9;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									padding: 4rpx 12rpx;

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

									text {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 500;
										font-size: 16rpx;
										color: #FF5053;
									}
								}
								.fivecontent_item_boxitemlefive{
									position: absolute;
									padding: 8rpx 12rpx;
									background: #FEE06A;
									bottom: 32rpx;
									right: 0;
									border-radius: 24rpx 24rpx 24rpx 24rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: bold;
									font-size: 24rpx;
									color: #333333;
								}
							}
						}
					}
				}
			}

		}

		.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>