<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<Nav />
		<view class="onecontent">
			<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
			<view class="onecontentabsolute">
			</view>
			<!-- 小内切圆 -->
			<view class="after"></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>
			<up-loadmore height='40' :status="form.status" iconSize='14' fontSize='14' />
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onBeforeUnmount,
		onMounted,
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import Nav from '@/components/CustomNavbar.vue'; //导航栏
	import {
		APIdistiricttopCommon,
		APIdistirictsubShopList
	} from "@/common/api/index/tothestore.js"
	import {
		useNavbarStore
	} from '@/stores/navbarStore';
	const store = useNavbarStore();

	// 数据
	const list = ref([])
	const toplist = ref({})
	const form = reactive({
		address: '', //地址
		type: '', //品类
		orderBy: '', //1.理我最近 2.销量优先 3.价格优先
		other: '', //附近1KM 1选中 0不选中
		page: 1, //页数
		size: 10, //页容量
		status: 'loadmore'
	})
	const init_fn = () => {
		list.value = []
		form.page = 1 //页数
		form.size = 10 //页数
		form.status = 'loadmore' //页数
		distirictsubShopList()
	}

	const distiricttopCommon = async () => {
		let res = await APIdistiricttopCommon({
			type: 'subShop', //团购卷品类Id/subShop-预约到店
			orderBy: ''
		})
		console.log(res.carousel[0])
		if (res) {
			toplist.value = res.carousel[0]
			// 动态更新导航栏配置
			store.updateNavbarConfig({
				showBack: true, //左边返回键
				rightText: '', //右边文字
				showSearch: false, //true是标题其他事文字
				title: toplist.value.name,
				isTransparent: false,
				hasPlaceholder: false //是否要占位符
			});
		}
	}


	const goMap = (d) => {
		uni.openLocation({
			longitude: (d.lng * 1),
			latitude: (d.lat * 1)
		})
	}
	// 打电话
	const makePhoneCall = (item) => {
		uni.makePhoneCall({
			phoneNumber: item.phone //仅为示例
		});
	}
	const distirictsubShopList = async () => {
		let res = await APIdistirictsubShopList({
			address: uni.cache.get('getLocationstorage').address, //地址
			lng: uni.cache.get('getLocationstorage').lng,
			lat: uni.cache.get('getLocationstorage').lat,
			distance: '2000', //默认10 以经纬度为中心 多大范围以内 单位km
			isPage: '', //是否分页 1分页 0不分页
			page: form.page, //页数
			size: form.size, //页容量
		})
		if (res.pages < form.page) {
			form.status = 'nomore'
			if (form.page == 1 && res.list.length == 0) {
				list.value = []
			}
			return false;
		} else {
			form.status = 'loading';
			if (form.page == 1) {
				list.value = res.list
			} else {
				list.value = [...list.value, ...res.list];
			}
			form.page = ++form.page;
			if (form.page > res.pages) {
				form.status = 'nomore';
			} else {
				form.status = 'loading';
			}

		}
	}
	// // 滑动到指定位置导航栏隐藏 
	onPageScroll((res) => {
		uni.$u.debounce(store.scrollTop = res.scrollTop, 500)
	});
	onMounted(() => {
		init_fn()
		// distiricttopCommon()
	})
	onReachBottom(() => {
		distirictsubShopList()
		// 分页
	})
</script>

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

	.content {
		.onecontent {
			width: 100%;
			height: 460rpx;
			position: relative;

			.after {
				position: absolute;
				bottom: 32rpx;
				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, #F9F9F9 40rpx);
			}

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


	}
</style>