<template>
	<view class="nav" :class="{navs:navindex==1}">
		<text class="ttt">首页</text>
	</view>
	<scroll-view class="index" scroll-y="true" @scroll="scroll" ref="scroView">
		<view class="uni-margin-wrap">
			<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-color="rgba(220,192,203,1)"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index">
					<img :src="item" class="img" alt="" />
				</swiper-item>
			</swiper>
		</view>
		<view class="boxs">

			<view class="bodys-headers">
				<view class="header-a" @click="scaends">
					<view class="header-b">
						<view class="image">
							<img class="imagea" src="https://www.jiubaotongxue.love/image/demo1.png" alt="" />
						</view>
						<view class="txt">
							我要洗车
						</view>
					</view>
				</view>
				<view class="header-a" @click="gotoRechange">
					<view class="header-b">
						<view class="image">
							<img class="imagea" src="https://www.jiubaotongxue.love/image/demo2.png" alt="" />
						</view>
						<view class="txt">

							充值优惠
						</view>
					</view>
				</view>
				<view class="header-a" @click="validate">
					<view class="header-b">
						<view class="image">
							<img class="imagea" src="https://www.jiubaotongxue.love/image/demo3.png" alt="" />
						</view>
						<view class="txt">
							绑定车辆
						</view>
					</view>
				</view>
				<view class="header-a" @click="iiii">
					<view class="header-b">
						<view class="image">
							<img class="imagea" src="https://www.jiubaotongxue.love/image/demo4.png" alt="" />
						</view>
						<view class="txt">
							优惠券领取
						</view>
					</view>
				</view>
			</view>
			<view class="nav-title" @click="preferential">
				<img class="nav-img-left" src="https://www.jiubaotongxue.love/image/demo7.png" alt="" />
				<text class="t">团购核销入口</text>
				<view class="nav-btn">
					进入
				</view>
			</view>
		</view>
		<view class="bodys-title">
			<view class="title-left">
				<img class="t" src="https://www.jiubaotongxue.love/image/demo5.png" alt="" />
				<text class="i">精选店铺</text>
			</view>
			<view class="title-right" @click="gotoList">
				更多 >
			</view>
		</view>
		<view class="body-data">
			<view class="datas" v-for="(item,index) in demo" :key="index" @click="demos">
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/bannas.png" alt="" />
				<view class="datas-title">
					中石化顺达加油站
				</view>
				<view class="datas-address">
					<img class="i" src="https://www.jiubaotongxue.love/image/map1.png" alt="" />
					<view class="t">
						杭州市拱墅区丰庆755
					</view>
				</view>
				<view class="datas-navigation">
					<view class="left-d">
						<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
							class="colors">5.4km|</text>
					</view>
					<view class="left-x">
						<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
							class="colors">站点维修</text>
					</view>
				</view>
				<view class="datas-state">
					<view class="sum">
						总共位：5
					</view>
					<view class="surplus">
						空闲：5
					</view>
				</view>
				<view class="actives">
					暂停营业
				</view>
			</view>
		</view>
		<view class="maps-title">
			<view class="title-left">
				<img class="t" src="https://www.jiubaotongxue.love/image/map3.png" alt="" />
				<text class="i">网点展示</text>
			</view>
			<view class="map-container">
				<map id="map" :longitude="longitude" :latitude="latitude" :show-location="true" :scale="scale" :markers="markers"
					@markertap="onMarkerTap" @onMyLocationTap="returnToMyLocation"
					style="width: 100%; height: 100%;"></map>

			</view>
			<view class="ding">

			</view>
		</view>
		<view class="mapWindow" v-if="isMap===1">
			<view class="l">
				<view class="title">
					<text class="t">中山花园洗车点</text><text class="r">正常营业</text>
				</view>
				<view class="c">
					杭州千年舟家居文化创意港
				</view>
				<view class="b">
					<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" />
					<text class="times">6:00-22:00</text>
				</view>
			</view>
			<view class="right-m">
				<view class="box">
					<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
					<view class="txt">
						导航
					</view>
				</view>
			</view>
		</view>

	</scroll-view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const scroView = ref(null)
	const demo = ref([0, 1, 2, 3])
	const navindex = ref(0)
	const isMap = ref(0)
	const homeScro = ref(null)
	const longitude =ref(120.141023)
	 const  latitude = ref(30.311983)
	 import {d} from '../../api/api.js'
	const scroll = (e) => {
		if (e.detail.scrollTop > 60) {
			navindex.value = 1
		} else {
			navindex.value = 0
		}
	}
	const demos = () => {
		uni.navigateTo({
			url: "/pages/networkDetail/networkDetail"
		})
	}
	d().then((res)=>{
		console.log(res.data);
	})

	const preferential = () => {
		uni.navigateTo({
			url: "/pages/preferentialDetail/preferentialDetail"
		})
	}
	const scaends = ()=>{
		uni.navigateTo({
			url:"/pages/implement/implement"
		})
	}
	// 假设的地图中心点经纬度  
	const centerLongitude = ref(120.1421);
	const centerLatitude = ref(30.31974);
	const controls = ref({
		scale: true, // 是否显示比例尺控件
		zoom: true, // 是否显示缩放按钮控件
		// 定位控件
		myLocation: true
	})
	const returnToMyLocation = () => {
		// 获取用户当前位置信息
		navigator.geolocation.getCurrentPosition((position) => {
			centerLatitude.value = position.coords.latitude;
			centerLongitude.value = position.coords.longitude;
		});
	}
	const scale = ref(14);
	const banners = ref(['https://www.jiubaotongxue.love/image/bannas.png',
		'https://ts1.cn.mm.bing.net/th/id/R-C.c1c536c60766315effcf7473734265c8?rik=BJnvGw%2fMafvL5w&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2ft_s960x600c5%2fg2%2fM00%2f0E%2f09%2fCg-4WlVsB-GII_QDACASGpf7ol4AAEeNQPDq30AIBIy241.jpg&ehk=rmAXHBKBoEX%2bHmHxwM1UvcjGF3rxRv5booeLLpySEys%3d&risl=&pid=ImgRaw&r=0',
		'https://pic1.zhimg.com/v2-9db7bf3b825f2db103a534ca59c75481_r.jpg?source=1940ef5c'
	])
	// 批量添加的标记点数组  
	const markers = reactive([{
			id: 1,
			latitude: 30.32974,
			longitude: 120.1421,
			name: '标记点1',
			iconPath: 'https://www.jiubaotongxue.love/image/demo8.png',
			width: 30,
			height: 30,
			// anchor: {
			// 	x: 0.5,
			// 	y: 0.5
			// },
			callout: {
				// content: '杭州网点1',
				// color: '#000000',
				// fontSize: 10,
				// borderRadius: 5,
				// bgColor: '#ffffff',
				// padding: 10,
				// width: 100,
				// height: 10,
				// display: 'ALWAYS', // 始终显示
			}
		},
		{
			id: 2,
			latitude: 30.34974,
			longitude: 120.1421, // 稍微偏移的经度  
			name: '标记点2',
			iconPath: 'https://www.jiubaotongxue.love/image/demo8.png',
			width: 30,
			height: 30,
			callout: {
				// content: '杭州网点1',
				// color: '#000000',
				// fontSize: 10,
				// borderRadius: 5,
				// bgColor: '#ffffff',
				// padding: 10,
				// width: 100,
				// height: 10,
				// display: 'ALWAYS', // 始终显示
			}
		},
		// ... 可以继续添加更多标记点  
	]);
	const markerId = ref(null)
	const onMarkerTap = (e) => {
		isMap.value = 1;
		if (markerId.value&&markerId.value-1>=0) {
			markers[markerId.value - 1].iconPath = 'https://www.jiubaotongxue.love/image/demo8.png';
			markers[markerId.value - 1].callout = {}
		}
		markers[e.detail.markerId - 1].iconPath = "https://www.jiubaotongxue.love/image/demo9.png";
		markers[e.detail.markerId - 1].callout = {
			content: '杭州网点1',
			color: '#000000',
			fontSize: 10,
			borderRadius: 5,
			bgColor: '#ffffff',
			padding: 10,
			width: 100,
			height: 10,
			display: 'ALWAYS', // 始终显示
		}
		markerId.value = e.detail.markerId
	}
	const gotoRechange= ()=>{
		uni.navigateTo({
			url:"/pages/recharge/recharge"
		})
	}
	
	const validate = ()=>{
		uni.navigateTo({
			url:"/pages/vehicle/vehicle"
		})
	}
</script>

<style lang="scss">
	.nav {
		width: 100%;
		height: 11%;
		background-color: rgba(0, 0, 0, 0);
		position: fixed;
		z-index: 10;
		top: 0;
		color: white;

		.ttt {
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.navs {
		background-color: #4475ee;
	}

	.index {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;

		.uni-margin-wrap {
			position: relative;
			width: 100%;
			height: 560rpx;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.boxs {
			width: 690rpx;
			height: 318rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			margin-top: -120rpx;
			margin-left: 50%;
			transform: translateX(-50%);

			.nav-title {
				width: 630rpx;
				height: 100rpx;
				background: rgba(71, 144, 255, 0.12);
				border-radius: 20rpx;
				margin-left: 50%;
				margin-top: 10rpx;
				transform: translateX(-50%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				font-size: 28rpx;

				.nav-img-left {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-left: 32rpx;
				}

				.t {
					display: block;
					margin-left: 24rpx;
					color: #4D97FF;
					// font-weight: 600;
					font-size: 36rpx;
				}

				.nav-btn {
					width: 112rpx;
					height: 48rpx;
					background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), #D8D8D8;
					border-radius: 8rpx;
					line-height: 48rpx;
					color: white;
					text-align: center;
					margin-left: 156rpx;
				}
			}

			.bodys-headers {
				width: 100%;
				height: 180rpx;
				// background-color: salmon;
				display: flex;

				.header-a {
					position: relative;
					width: 22%;
					height: 200rpx;
					margin: 0 15rpx; // 设置间距

					.header-b {
						width: 130rpx;
						height: 130rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

						.image {
							width: 80rpx;
							height: 80rpx;
							margin-left: 50%;
							transform: translateX(-50%);
							// border: 1rpx solid red;
							border-radius: 50%;
							position: relative;

							.imagea {
								position: absolute;
								width: 80rpx;
								height: 80rpx;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								z-index: 9;
								border-radius: 50%;
							}
						}


						.txt {
							width: 100%;
							height: 20rpx;
							text-align: center;
							line-height: 20rpx;
							font-size: 26rpx;
							margin-top: 20rpx;
						}

						.txts {

							color: aqua;
						}
					}

				}
			}
		}



		.bodys-title {
			width: 702rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			position: relative;
			margin-left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.title-left {
				width: 70%;
				height: 96rpx;
				position: relative;
				display: flex;

				.t {
					width: 42rpx;
					height: 42rpx;
					margin-top: 24rpx;
					margin-left: 30rpx;
				}

				.i {
					line-height: 96rpx;
					display: block;
					margin-left: 20rpx;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.title-right {
				width: 92rpx;
				height: 36rpx;
				// background-color: #d9001b;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
				line-height: 36rpx;
				right: 20rpx;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				font-size: 26rpx;
				color: #242526;

			}
		}

		.body-data {
			position: relative;
			width: 93%;
			// height: 350rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.datas {
				position: relative;
				width: 48.5%;
				// height: 360rpx;
				background-color: #ffffff;
				margin-top: 25rpx;

				.datas-img {
					width: 100%;
					height: 176rpx;
					background-color: red;
				}

				.datas-title {
					width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					box-sizing: border-box;
					padding-left: 28rpx;
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 15rpx;
				}

				.datas-address {
					width: 100%;
					height: 38rpx;
					display: flex;
					align-items: center;
					margin-left: 28rpx;
					margin-top: 10rpx;

					.i {
						width: 29rpx;
						height: 29rpx;
						// background-color: salmon;
					}

					.t {
						width: 70%;
						height: 38rpx;
						line-height: 38rpx;
						// background-color: sandybrown;
						font-size: 24rpx;
						margin-left: 10rpx;
					}

				}

				.datas-navigation {
					width: 100%;
					height: 38rpx;
					display: flex;
					align-items: center;
					margin-top: 15rpx;

					.left-d {
						// width: 40%;
						height: 38rpx;
						display: flex;
						align-items: center;
						// background-color: rebeccapurple;
						margin-left: 28rpx;

						.i {
							width: 24rpx;
							height: 24rpx;
							// background-color: red;
						}

						.colors {
							font-size: 24rpx;
						}
					}

					.left-x {
						// width: 40%;
						height: 38rpx;
						display: flex;
						align-items: center;
						// background-color: rebeccapurple;
						margin-left: 5rpx;

						.i {
							width: 24rpx;
							height: 24rpx;
							// background-color: red;
						}

						.colors {
							font-size: 24rpx;
						}
					}
				}

				.datas-state {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: white;

					.sum {
						width: 138rpx;
						height: 36rpx;
						background: #4993FF;
						font-size: 22rpx;
						border: 1rpx solid #4993FF;
						text-align: center;
						line-height: 36rpx;
						margin-left: 20rpx;
						border-radius: 7rpx 7rpx 7rpx 7rpx;
					}

					.surplus {
						width: 138rpx;
						height: 36rpx;
						background: #42BE45;
						border: 1rpx solid #42BE45;
						font-size: 22rpx;
						text-align: center;
						line-height: 36rpx;
						margin-right: 20rpx;
						border-radius: 7rpx 7rpx 7rpx 7rpx;
					}
				}

				.actives {
					width: 108rpx;
					height: 36rpx;
					background: linear-gradient(135deg, #FE7864 0%, #FF3232 100%);
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					text-align: center;
					line-height: 36rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					border-radius: 0rpx 10rpx 10rpx 0rpx;

				}

			}
		}

		.maps-title {
			width: 702rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			position: relative;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 20rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.title-left {
				width: 70%;
				height: 96rpx;
				position: relative;
				display: flex;

				.t {
					width: 42rpx;
					height: 42rpx;
					margin-top: 24rpx;
					margin-left: 30rpx;
				}

				.i {
					line-height: 96rpx;
					display: block;
					margin-left: 20rpx;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.title-right {
				width: 92rpx;
				height: 36rpx;
				// background-color: #d9001b;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
				line-height: 36rpx;
				right: 20rpx;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				font-size: 26rpx;
				color: #242526;
			}

			.map-container {
				width: 96%;
				height: 690rpx;
				position: relative;
				margin-left: 50%;
				transform: translateX(-50%);

			}

			.ding {
				width: 100%;
				height: 50rpx;
			}
		}

		.mapWindow {
			width: 100%;
			height: 202rpx;
			position: relative;
			display: flex;
			justify-content: space-between;
			background-color: #feffff;
			z-index: 999;
			margin-top: 98rpx;

			.l {
				width: 600rpx;
				height: 202rpx;

				.title {
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					display: flex;
					margin-top: 30rpx;

					.t {
						display: block;
						font-size: 34rpx;
						font-weight: 600;
						margin-left: 42rpx;
					}

					.r {
						display: block;
						width: 108rpx;
						height: 36rpx;
						background: linear-gradient(135deg, #FEB44C 0%, #FF8833 100%);
						font-size: 22rpx;
						text-align: center;
						line-height: 36rpx;
						color: white;
						margin-left: 38rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}

				.c {
					width: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					height: 34rpx;
					box-sizing: border-box;
					padding-left: 42rpx;
					margin-top: 20rpx;
				}

				.b {
					width: 100%;
					height: 36rpx;
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.i {
						width: 24rpx;
						height: 24rpx;
						margin-left: 42rpx;
					}

					.times {
						font-size: 24rpx;
						margin-left: 10rpx;
					}

				}


			}

			.right-m {
				width: 30%;
				height: 202rpx;
				position: relative;

				.box {
					position: absolute;
					top: 50%;
					right: 56rpx;
					transform: translateY(-50%);

					.ic {
						width: 76rpx;
						height: 76rpx;
					}

					.txt {
						width: 76rpx;
						font-size: 24rpx;
						text-align: center;
						color: #3377FF;
					}
				}
			}
		}
	}
</style>