<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>
		</view>
		<view class="towcontent">
			<view class="fivecontent_item flex-between" v-for="(item,index) in list" :key="index">
				<view class="fivecontent_itemone flex-start">
					<image class="fivecontent_itemoneimage" :src="item.coverImg" mode=""></image>
					<view class="fivecontent_itemonebox">
						<view class="fivecontent_itemoneboxone flex-start">
							<view class="fivecontent_itemoneboxone_o">
								热销TOP{{index}}
							</view>
							<view class="fivecontent_itemoneboxone_t">
								{{item.shopName}}
							</view>
						</view>
						<view class="fivecontent_itemoneboxtow flex-start" @click="goMap(item)">
							<image class="fivecontent_itemoneboxtowimage"
								src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="widthFix"></image>
							<view class="fivecontent_itemoneboxtow_o">
								{{item.address.length>7?item.address.substring(0,7)+'...':item.address}}
							</view>
							<view class="fivecontent_itemoneboxtow_t">
								{{item.distances}}
							</view>
						</view>
					</view>
				</view>
				<view class="fivecontent_itemtow" @click="makePhoneCall(item)">
					马上预约
				</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: '', //地址
					type: '', //品类
					orderBy: '', //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
			}
		},
		onReachBottom() {
			this.onLoadhome()
		},
		onShow() {
			this.init_fn()
			this.distiricttopCommon()
		},
		methods: {
			goMap(d) {
				uni.openLocation({
					longitude: (d.lng * 1),
					latitude: (d.lat * 1)
				})
				// uni.openLocation({
				// 	longitude: uni.cache.get('getLocationstorage').lng,
				// 	latitude: uni.cache.get('getLocationstorage').lat
				// })
			},
			init_fn(e) {
				this.list = []
				this.form.page = 1 //页数
				this.form.size = 10 //页数
				this.form.status = 'loadmore' //页数
				this.distirictsubShopList()
			},
			makePhoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone //仅为示例
				});
			},
			async distiricttopCommon() {
				let res = await this.api.distiricttopCommon({
					type: 'subShop', //团购卷品类Id/subShop-预约到店
					orderBy: ''
				})
				if (res.code == 0) {
					this.toplist = res.data.carousel[0]
				}
			},
			async distirictsubShopList() {
				let res = await this.api.distirictsubShopList({
					address: uni.cache.get('getLocationstorage').address, //地址
					lng: uni.cache.get('getLocationstorage').lng,
					lat: uni.cache.get('getLocationstorage').lat,
					distanceInKm: '10', //默认10 以经纬度为中心 多大范围以内 单位km
					isPage: '', //是否分页 1分页 0不分页
					page: this.form.page, //页数
					size: this.form.size, //页容量
				})
				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)
				}
			}
		}
	};
</script>

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

	.content {
		.onecontent {
			width: 100%;
			height: 460rpx;
			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;
			padding: 32rpx 28rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			background: #F9F9F9;

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

			}

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

				.fivecontent_itemone {
					.fivecontent_itemoneimage {
						width: 84rpx;
						height: 84rpx;
						border-radius: 16rpx;
					}

					.fivecontent_itemonebox {
						margin-left: 16rpx;
						height: 84rpx;
						display: flex;
						flex-direction: column;

						.fivecontent_itemoneboxone {
							.fivecontent_itemoneboxone_o {
								padding: 2rpx 8rpx;
								background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								font-family: Roboto, Roboto;
								font-weight: 500;
								font-size: 16rpx;
								color: #FFFFFF;
							}

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

						.fivecontent_itemoneboxtow {
							margin-top: 10rpx;

							.fivecontent_itemoneboxtowimage {
								width: 24rpx;
								height: 24rpx;
							}

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

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

				.fivecontent_itemtow {
					padding: 8rpx 16rpx;
					background: #FEE06A;
					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>