<template>
	<view class="nav" :class="{navs:navindex==1}">
		<text class="ttt" style="font-size: 36rpx;">浙里洗</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/demo81.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/demo80.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 netWorkList" :key="item.id" @click="netWorkDetails(index)">
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/demo100.png" alt="" v-if="index===0" />
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/demo101.png" alt="" v-if="index===1" />
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/demo102.png" alt="" v-if="index===2" />
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/demo103.png" alt="" v-if="index===3" />
				<view class="datas-title">
					{{item.networkName}}
				</view>
				<view class="datas-address">
					<img class="i" src="https://www.jiubaotongxue.love/image/handle4.png" alt="" />
					<view class="t">
						{{item.networkArea}}
					</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"
							v-if="item.gongli>0">{{item.gongli}}km</text>
					</view>
					<text class="l">|</text>
					<view class="left-x" v-if="item.special===0">
						<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
							class="colors">站点维修</text>
					</view>
					<view class="left-x" v-if="item.special===1">
						<img class="i" src="https://www.jiubaotongxue.love/image/demo29.png" alt="" /><text
							class="colors">24小时营业</text>
					</view>
				</view>
				<view class="datas-state">
					<view class="sum">
						总共位：{{item.special+item.workDevice}}
					</view>
					<view class="surplus">
						空闲：{{item.workDevice}}
					</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>
				<img class="gps" src="https://www.jiubaotongxue.love/image/demo22.png" alt="" @click="myGps" />
			</view>
			<view class="ding">

			</view>
		</view>
		<view class="mapWindow" v-if="isMap===1">
			<view class="l">
				<view class="title">
					<text class="t">{{BranchInformationList.networkName}}</text><text class="r">正常营业</text>
				</view>
				<view class="c">
					{{BranchInformationList.networkArea}}
				</view>
				<view class="b">
					<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" />
					<text class="times">{{BranchInformationList.businessHours}}</text>
				</view>
			</view>
			<view class="right-m" @click="goGpsa">
				<view class="box">
					<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
					<view class="txt">
						导航
					</view>
				</view>
			</view>
		</view>
		<view class="d" style="width: 100%;height: 9%;position: relative;">

		</view>
	</scroll-view>

	<tabbar :active="active"></tabbar>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		home
	} from '../../stor/home/home.js'
	import {
		list
	} from '../../stor/list/list.js'
	import {
		storeToRefs
	} from 'pinia';
	import {
		getShare
	} from '../../stor/share/getShare.js'
	const h = home()
	const l = list()
	const gs = getShare()
	const {
		netWorkList,
		markers,
		BranchInformationList
	} = storeToRefs(l)
	const {
		share
	} = storeToRefs(gs)
	l.getNetworks()

	console.log(netWorkList);
	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()
	const latitude =ref()
	longitude.value=uni.getStorageSync('longitude')
	latitude.value = uni.getStorageSync('latitude')
	const active = ref(0)
	h.getgps()
	const scroll = (e) => {
		if (e.detail.scrollTop > 60) {
			navindex.value = 1
		} else {
			navindex.value = 0
		}
	}
	const netWorkDetails = (index) => {
		console.log(netWorkList.value[index]);
		uni.navigateTo({
			url: `/pages/networkDetail/networkDetail?id=${netWorkList.value[index].id}&&gongli=${netWorkList.value[index].gongli}`
		})
	}

	const preferential = () => {
		uni.navigateTo({
			url: "/pages/tuan/tuan"
		})
	}
	const scaends = () => {
		h.scanQrcode()
	}
	// 假设的地图中心点经纬度  
	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://www.jiubaotongxue.love/image/ban.png'
	])
	const markerId = ref(null)
	const onMarkerTap = (e) => {
		isMap.value = 1;
		if (markerId.value && markerId.value - 1 >= 0) {
			markers.value[markerId.value - 1].iconPath = 'https://www.jiubaotongxue.love/image/demo8.png';
			markers.value[markerId.value - 1].callout = {}
		}
		markers.value[e.detail.markerId - 1].iconPath = "https://www.jiubaotongxue.love/image/demo9.png";
		markers.value[e.detail.markerId - 1].callout = {
			content: markers.value[e.detail.markerId - 1].names,
			color: '#000000',
			fontSize: 10,
			borderRadius: 5,
			bgColor: '#ffffff',
			padding: 10,
			width: 100,
			height: 10,
			display: 'ALWAYS', // 始终显示
		}
		l.getBranchInformations(e.detail.markerId - 1)
		markerId.value = e.detail.markerId

	}
	const gotoRechange = () => {
		uni.navigateTo({
			url: "/pages/rechargeNetwork/rechargeNetwork"
		})
	}

	const validate = () => {
		uni.navigateTo({
			url: "/pages/vehicle/vehicle"
		})
	}
	const myGps = () => {
		longitude.value=uni.getStorageSync('longitude')
		latitude.value = uni.getStorageSync('latitude')
	}
	const iiii = () => {
		uni.navigateTo({
			url: `/pages/integral/integral`
		})
		// uni.scanCode({
		// 	success: (res) => {
		// 		console.log(res.result);
		// 		// 找到"id="后面的位置
		// 		var startIndex = res.result.indexOf("id=") + 3;

		// 		// 截取"id"后面的数据
		// 		var id = res.result.substring(startIndex);

		// 		// 打印id的值
		// 		console.log(id);
		// 		uni.navigateTo({
		// 			url: `/pages/integral/integral?id=${id}`
		// 		})
		// 	},
		// 	fail: (err) => {

		// 	}
		// })
	}

	onLoad((options) => {
		uni.setStorageSync('newPhoneNumbers')
		if (options && uni.getStorageSync('phoneNumber')) {
			gs.getShare(options.id)
		}
	})
	const goGpsa = () => {
		uni.openLocation({
			latitude: BranchInformationList.value.latitude,
			longitude: BranchInformationList.value.longitude,
			name: BranchInformationList.value.networkName,
			success: (res) => {
				console.log(res);
			}
		})
	}
	const gotoList = () => {
		uni.showToast({
			icon: "none",
			title: '更多精选，即将开放'
		})
	}
</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: linear-gradient(276deg, rgba(28, 159, 247, 1)  0%, rgba(18, 117, 247, 1) 100%);
		background-color: white;
		color: black;

	}

	.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: #777;

			}
		}

		.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;
				border-radius: 20rpx;

				.datas-img {
					width: 100%;
					height: 176rpx;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
				}

				.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;
						position: relative;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 24rpx;
						margin-left: 10rpx;
					}

				}

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

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

					.l {
						display: block;
						font-size: 20rpx;
						margin-left: 10rpx;
					}

					.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%);

				.gps {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					position: absolute;
					bottom: 60rpx;
					right: 20rpx;
					z-index: 100;
				}

			}

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