<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
			<view class="status-bar"></view>
			<view class="navbar_tow flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="status-bar"></view>
				<view class="navbar_tow flex-between">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="navbar_tow flex-between"
						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
					<!-- #endif -->
						<!-- 标题搜索框 -->
						<view class="flex-between">
							<view class="navbar_tow_one flex-start" @click="uindexlist">
								<text>美味抢先点</text>
								<text>西安</text>
								<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
									size="16"></u-icon>
							</view>
							<view class="navbar_tow_tow flex-start">
								<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
								<view class="navbar_tow_towview">搜索</view>
							</view>
						</view>
					</view>
					<!-- 吸顶 -->
					<view v-if="isFixedTop" class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx">
						<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index">
							<text>{{item.name}}</text>
							<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
								size="16"></u-icon>
						</view>
					</view>
				</view>
				<!-- 以上都是导航栏处理 -->

				<!-- 轮播图 -->
				<swipers :carousel='hometoplist.carousel'></swipers>
				<!-- 广告 -->
				<advertisement></advertisement>
				<!-- 金刚区 -->
				<diamond :district='hometoplist.district'></diamond>
				<!-- 今日上线 -->
				<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
				<!-- 类目 -->
				<view class="fourcontent flex-between">
					<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
						@click="viewHistory(item)">
						<text>{{item.name}}</text>
						<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
							size="16"></u-icon>
					</view>
				</view>

				<!-- 盒子撑开 -->
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="isFixedTop" :style="isFixedTop?`height:${fourcontentHeighT}px`:''"></view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-if="isFixedTop" :style="isFixedTop?`height:${fourcontentHeighT + 22}px`:''"></view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || MP-WEIXIN -->
				<view v-if="isFixedTop"></view>
				<!-- #endif -->
				<!-- 产品 -->
				<view class="fivecontent">
					<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
						<view class="fivecontent_item_nav flex-start">
							<image src="@/static/avatar.png" mode="aspectFill"></image>
							<view class="fivecontent_item_nav_left">
								<view class="fivecontent_item_nav_lefttop flex-between">
									<view>
										{{item.shopName}}
									</view>
									<view>
										龙首.{{item.distances}}m
									</view>
								</view>
								<view class="flex-start">
									<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in 2"
										:key="index1">
										<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
											mode="aspectFill"></image>
										<text>{{item.shopTag}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="fivecontent_item_box">
							<view class="fivecontent_item_boxitem flex-between">
								<image src="@/static/avatar.png" mode=""></image>
								<view class="fivecontent_item_boxitemleft flex-colum-start">
									<view class="fivecontent_item_boxitemleftone flex-between">
										<view>全场饮品任选</view>
										<text>已抢15789份</text>
									</view>
									<view class="fivecontent_item_boxitemlefttow flex-start">
										<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
											mode="aspectFill"></image>
										<text>人气连锁品牌</text>
									</view>
									<view class="indexboxitemleftthere flex-colum-start">
										<view class="indexboxitemleftthereabsolute">
											马上抢
										</view>
										<view class="indexboxitemlefttheretext flex-start">
											<view class="indexboxitemlefttheretextone">
												<text>¥</text>
												<text>1444</text>
											</view>
											<view class="indexboxitemlefttheretexttow">
												¥111
											</view>

										</view>
										<view class="indexboxitemleftthere_countdown flex-between">
											<text class="indexboxitemleftthere_countdowntext">共省4元</text>
											<view class="indexboxitemleftthere_countdowntexts">
												<uni-countdown :show-day="false" :day="1" :hour="1" :minute="12"
													:second="40" color="#FFFFFF" border-color="#00B26A"
													splitorColor="#FFFFFF" :font-size="8"></uni-countdown>
											</view>

										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />



				<!-- 弹出层 -->
				<u-popup mode="top" :show="showproductlist" @close="closeproductlist" @open="openproductlist">
					<!-- 导航栏 -->
					<view class="navbar" :class="{active:opacity}">
						<!-- #ifndef APP-PLUS || MP-WEIXIN -->
						<view class="status-bar"></view>
						<view class="navbar_tow flex-between"
							:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
						<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="status-bar"></view>
							<view class="navbar_tow flex-between">
							<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="navbar_tow flex-between"
									:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
								<!-- #endif -->
									<!-- 标题搜索框 -->
									<view class="flex-between">
										<view class="navbar_tow_one flex-start" @click="uindexlist">
											<text>八点八零</text>
											<text>西安</text>
											<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
												size="16"></u-icon>
										</view>
										<view class="navbar_tow_tow flex-start">
											<input type="text" class="navbar_tow_towinput" v-model="keyword"
												placeholder="请输入关键字" />
											<view class="navbar_tow_towview">搜索</view>
										</view>
									</view>
								</view>
								<!-- 吸顶 -->
								<view class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx">
									<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
										:key="index" @click="viewHistory(item)">
										<text>{{item.name}}</text>
										<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
											color="#333333" size="16"></u-icon>
									</view>
								</view>
								<!-- 显示下拉字段 -->
								<view class="sixcontent" v-if="clickhometoplistmenulist.detail">
									<view class="sixcontentitemP flex-colum-start">
										<view class="sixcontentitemP_item"
											:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
											v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
											@click="clickdetail(item,index)">
											{{item.label}}

										</view>
									</view>
								</view>
								<view class="sixcontent" v-if="clickhometoplistmenulist.districts">
									<view class="sixcontentitemP flex-start">
										<view class="sixcontentitemP_itembox flex-colum-start">
											<view class="sixcontentitemP_itemone"
												:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
												v-for="(item,index) in clickhometoplistmenulist.districts" :key="index"
												@click="clickdetail(item,index)">
												{{item.name}}

											</view>
										</view>
									</view>
								</view>
							</view>
				</u-popup>

			</view>
</template>
<script>
	import swipers from './components/swiper.vue'
	import diamond from './components/diamond.vue'
	import todaylist from './components/todaylist.vue'
	import productlist from './components/productlist.vue'
	import advertisement from './components/advertisement.vue'
	export default {
		components: {
			swipers,
			diamond,
			todaylist,
			productlist,
			advertisement
		},
		data() {
			return {
				isFixedTop: false, //吸顶是否显示
				Topdistance: 3000, //吸顶初始距离
				fourcontentHeighT: 0, //高度
				keyword: '',
				current: 0,
				opacity: false,
				showproductlist: true, //弹成
				clickdetailindex: 0, //默认下拉选项第一个
				hometoplist: { //上面数据
					carousel: [],
					district: []
				},
				homelist: [], //下面数据
				clickhometoplistmenulist: {}, //下拉点击的数据
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					distance: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				}
			};
		},

		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
				this.showproductlist = false
			} else {
				this.opacity = true
			}
			if (e.scrollTop >= this.Topdistance) { //类别导航栏
				this.isFixedTop = true
			} else {
				this.isFixedTop = false
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		async onLoad() {
			setTimeout(() => {
				this.GetTop()
			}, 1000)
			let res = await this.apix.locationdistrict({
				keywords: '西安市'
			})
			this.clickhometoplistmenulist = res.data[0].districts
		},
		onReachBottom() {
			this.onLoadhome()
		},
		onShow() {
			this.hometop()
			this.onLoadhome()
		},
		methods: {
			closeproductlist() {
				this.showproductlist = false
				// console.log('close');
			},
			openproductlist() {
				// console.log('open');
			},
			uindexlist() {
				uni.pro.navigateTo('index/uindexlist')
			},
			updateCity(data) {
				this.list[data].end_times = 0;
				this.$forceUpdate();
			},
			GetTop() {
				//获取元素距离顶部的距离
				this.$u.getRect('.fourcontent').then(res => {
					this.Topdistance = res.top - this.HeighT.heightBar //滚动距离
					this.fourcontentHeighT = res.height //高度
				})

			},
			// 首页上面数据
			async hometop() {
				try {
					let res = await this.apix.homehomePageUp()
					this.hometoplist = res.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 下面初始数据
			init_fn() {
				this.homelist = []
				this.form.page = 1
				this.form.status = 'loadmore'
				this.onLoadhome()
			},
			async onLoadhome() {
				try {
					let res = await this.apix.home(this.form)
					if (res.data.length == 0) {
						this.form.status = 'nomore'
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.homelist = [...this.homelist, ...res.data];
							if (res.data.length == 10) {
								this.form.status = 'loading';
							} else {
								this.form.status = 'nomore';
							}
						}, 500)
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 点击元素到指定位置
			async viewHistory(item) {
				if (item.dictName == 'allCity') {
					let res = await this.apix.locationdistrict({
						keywords: '西安市'
					})
					this.clickhometoplistmenulist = res.data[0]
				} else {
					this.clickhometoplistmenulist = item
				}
				uni.pageScrollTo({
					scrollTop: this.Topdistance + 1,
					duration: 300
				});
				if (item.isChild) {
					this.showproductlist = true
				} else {

				}
			},
			// 选择元素的指定选项
			clickdetail(item, index) {
				this.clickdetailindex = index
				this.showproductlist = false
			},
		}

	};
</script>

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

	.content {
		position: -webkit-sticky;
		position: sticky;
		top: 0;

		.active {
			background: rgba(249, 249, 249, 1);
		}

		.status-bar {
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) / 2);
			// #endif
			// #ifdef MP-WEIXIN
			height: var(--status-bar-height);
			// #endif
		}

		// #ifdef APP-PLUS
		.statusbarmargin {
			margin-top: var(--status-bar-height);
		}

		// #endif
		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99;

			.navbar_tow {
				width: 100%;
				position: relative;
				font-size: 36rpx;

				.flex-between {
					// #ifdef APP-PLUS || H5
					margin: 28rpx;
					// #endif
					// #ifdef MP-WEIXIN
					margin-left: 28rpx;
					// #endif
					width: 100%;
					flex-wrap: nowrap;
					height: 100%;
					line-height: 100%;

					.navbar_tow_one {
						height: 100%;
						line-height: 100%;

						text:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						text:nth-child(2) {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}

					.navbar_tow_tow {
						position: relative;
						height: 100%;
						line-height: 100%;
						flex: 1;
						margin-left: 10rpx;

						.navbar_tow_towview {
							position: absolute;
							right: 4rpx;
							top: 50%;
							transform: translate(0, -50%);
							text-align: center;
							background: #FEE06A;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							width: 116rpx;
							height: 56rpx;
							line-height: 56rpx;
							border-radius: 34rpx 34rpx 34rpx 34rpx;
						}

						.navbar_tow_towinput {
							padding-left: 32rpx;
							padding-right: 116rpx;
							height: 100%;
							flex: auto;
							background: #FFFFFF;
							border-radius: 34rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}
					}
				}

			}
		}

		.fourcontent {
			padding: 32rpx 28rpx 0 28rpx;
			overflow-x: auto;
			flex-wrap: nowrap;

			.fourcontent_item {
				flex-wrap: nowrap;
				margin-left: 22rpx;
				padding: 4rpx 14rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				text {
					width: max-content;
				}
			}

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

		.sixcontent {
			.sixcontentitemP {
				padding: 0 32rpx 28rpx 32rpx;
				max-height: 600rpx;
				overflow: auto;

				.sixcontentitemP_itembox {
					.sixcontentitemP_itemone {
						flex: 1;
						margin-top: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

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

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

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

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

		.fivecontent {
			padding: 0 28rpx;

			.fivecontent_item {
				margin-top: 32rpx;
				padding: 24rpx 32rpx;
				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;
								}
							}

							.indexboxitemleftthere {
								position: relative;
								margin-top: 30rpx;
								padding-left: 16rpx;
								width: 100%;
								height: 88rpx;
								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 {
									.indexboxitemlefttheretextone {
										text {
											font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
											font-weight: normal;
											color: #FF5053;
										}

										text:nth-child(2) {
											font-weight: bold;
											font-size: 34rpx;
										}

										text:nth-child(1) {
											font-size: 24rpx;
										}
									}

									.indexboxitemlefttheretexttow {
										margin-left: 12rpx;
										font-size: 20rpx;
										font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
										font-weight: normal;
										color: #999999;
										text-decoration: line-through;
									}
								}

								.indexboxitemleftthere_countdown {
									width: 100%;

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

									.indexboxitemleftthere_countdowntexts {
										font-family: Roboto, Roboto;
										font-weight: 400;
										color: #333333;
										margin-left: 16rpx;
										font-size: 22rpx;
									}
								}
							}
						}
					}
				}
			}

		}
	}
</style>