<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='opacity' :title='toplist.name' :titleshow='false'></navseat>
		<view class="onecontent">
			<image class="onecontentimage" :src="toplist.coverImg" mode=""></image>
			<view class="onecontentabsolute">
				<view class="onecontentabsoluteitem flex-between">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/l.png" mode=""></image>
					<input :disabled="true" type="text" placeholder="订阅提醒，每日爆品上线不错过" />
					<view class="onecontentabsoluteitembotton">
						订阅提醒
					</view>
				</view>
			</view>
		</view>
		<view class="towcontent">
			<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 style="margin-top: 20rpx;">
								{{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="10"></uni-countdown>

									</view>

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

					</view>
				</view>
			</view>
			<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
		</view>
		<!-- 小内切圆 -->
		<!-- <view class="after"></view> -->
	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				titlename: '今日上新',
				opacity: false,
				list: [],
				toplist: {},
				form: {
					address: uni.cache.get('getLocationstorage').address, //地址
					lng: uni.cache.get('getLocationstorage').lng,
					lat: uni.cache.get('getLocationstorage').lat,
					type: '', //品类
					orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}
		},
		onLoad(e) {
			this.distiricttopCommon()
		},
		onShow() {
			this.onLoadlist()
		},
		methods: {
			async distiricttopCommon() {
				let res = await this.api.distiricttopCommon({
					type: '', //团购卷品类Id/subShop-预约到店
					orderBy: 0
				})
				console.log(res.data)
				if (res.code == 0) {
					this.toplist = res.data.carousel[0]
				}
			},
			clickproduct(item) {
				uni.pro.navigateTo('product/index',{
					id:item.id
				})
			},
			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: 0, //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;
				background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png) no-repeat;
				background-size: cover;
			}

			.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 {
			padding: 0 28rpx;
			position: relative;
			margin-top: -32rpx;

			.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 {
					.fivecontent_item_navimage {
						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_lefttopstart {
							margin-top: 8rpx;

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

								.fivecontent_item_nav_leftlangtext {
									margin-left: 6rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 16rpx;
									color: #F9A511;
								}

								.fivecontent_item_nav_leftlangimage {
									width: 10.82rpx;
									height: 14.06rpx;
								}
							}

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

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


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

									.fivecontent_item_boxitemlefttowtext {
										margin-left: 6rpx;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 16rpx;
										color: #F9A511;
									}

									.fivecontent_item_boxitemlefttowimage {
										width: 10.82rpx;
										height: 14.06rpx;
									}
								}

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

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

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