<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<scroll-view scroll-y="true" class="networkDetail">
		<view class="ding">

		</view>
		<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="BranchInformationList.image" class="img" alt="" />
				</swiper-item>
			</swiper>
		</view>
		<view class="boxs">
			<view class="mapWindow">
				<view class="l">
					<view class="title">
						<text class="t">{{BranchInformationList.networkName}}</text><text class="r">正常营业</text>
					</view>
					<view class="c">
						<img class="c-img" src="https://www.jiubaotongxue.love/image/demo28.png" alt="" />{{BranchInformationList.networkArea}}
					</view>
					<view class="datas-navigation">
						<view class="left-d">
							<img class="i" src="https://www.jiubaotongxue.love/image/demo29.png" alt="" /><text
								class="colors">营业时间：08:12-12:23</text>
						</view>
					</view>
					<view class="datas-state">
						<view class="sum">
							24小时营业
						</view>
						<view class="surplus">
							出入无忧
						</view>
					</view>

				</view>
				<view class="right-m" @click="isgetsetting">
					<view class="box">
						<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
						<view class="txt">
							导航
						</view>
					</view>
				</view>
				<view class="txtRight">
					距离您{{gongli}}km
				</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="state">
			<view class="title">
				<view class="lines">

				</view>
				<text class="txt">洗车工位</text>
			</view>
			<view class="machine">
				<view class="machine-flex" v-for="(item,index) in details" :key="item.id">
					<img class="i" src="https://www.jiubaotongxue.love/image/demo27.png" alt="" />
					<view class="t">
						<text class="t-left">车位1</text>
						<text class="t-right" v-if="item.workStatus != 0&&item.workStatus != 1&&item.warnStatus===1">维修无法使用</text>
						<text class="t-right" v-if="item.workStatus === 0">直接清洗</text>
						<text class="t-right" v-if="item.workStatus === 1">正在清洗</text>
					</view>
					<view class="flex-box" :class="{iSshow1: item.workStatus === 0, iSshow2: item.workStatus != 0&&item.workStatus != 1&&item.warnStatus===1 }">
						<text v-if="item.workStatus === 0">空闲中</text>
						<text v-if="item.workStatus === 1">使用中</text>
					</view>
				</view>
				<view class="ding">

				</view>
			</view>
		</view>
		<view class="netBottom">
			<view class="netBottom-left"  @click="hujiao=1">
				<img class="left-img" src="https://www.jiubaotongxue.love/image/demo30.png" alt="" />
				<text>联系门店</text>
			</view>
			<view class="netBottom-right">
				<view class="left" @click="goRecharge">
					门店充值
				</view>
				<view class="right" @click="secnd">
					扫码下单
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="hujiao" v-if="hujiao===1">
		<view class="windows-hujiao">
			<img class="i" src="https://www.jiubaotongxue.love/image/demo76.png" alt="" />
			<view class="ke">
				客服电话
			</view>
			<view class="ke1">
				176-0532-6897
			</view>
			<view class="ke3">
				<button class="lefts" @tap="hujiao=0">取消</button><button class="rights" @click="dianhua">立即呼叫</button>
			</view>
			<view class="ke4">
				为了保证服务质量，您的通话可能会被录音
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {list}from '../../stor/list/list.js'
	import {
		home
	} from '../../stor/home/home.js'
	import { storeToRefs } from 'pinia';
	const homes = home()
	const l = list()
	const {netWorkList,BranchInformationList,details} = storeToRefs(l)
	const demoa = () => {
		uni.request({
			url: "https://api.henancatv.com:8082/hncbn/osp/getToken",
			method:"POST",
			data: {
				"appId": "HN_20240511_0030",
				"appSecret": "7d6fb4b05181012f5c587ceaebd2939d"
			},
			success: (res) => {
				console.log(res);
			}
		})
	}
	const titles = ref('网点详情')
	const bgcolor = ref('#aaa')
	const color = ref('#000')
	const hujiao = ref(0)
	const gongli = ref()
	onLoad((options) => {
		titles.value = '网点详情'
		bgcolor.value = '#fff'
		color.value = '#000'
		gongli.value=options.gongli
		l.getBranchInformations(options.id)
	})
	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 issetting = ()=>{
		return new Promise((reslove,reject)=>{
			uni.getSetting({
				success: (res) => {
					reslove(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	
	}
	//打开导航
	const isgetsetting = ()=>{
		issetting().then((res)=>{
			if (!res.authSetting['scope.userLocation']) {
						// 用户未授权定位权限，可以提示用户手动打开权限
						uni.authorize({
							scope: 'scope.userLocation',
							success: (res) => {
								homes.getgps()
							}
						})
						uni.showToast({
							icon: 'none',
							title: "请打开授权定位",
							duration: 1000,
							success: (res) => {
								// lists.getBranchInformations(netWorkList.value[index].id)
								homes.getgps()
							}
						})
			
					} else {
						// 用户已经授权定位权限，可以直接获取地理位置信息
						// console.log(1);
						homes.getgps()
						uni.openLocation({
							latitude: BranchInformationList.value.latitude,
							longitude: BranchInformationList.value.longitude,
							name: BranchInformationList.value.networkName,
							success: (res) => {
								console.log(res);
							}
						})
						console.log("用户已开启定位权限");
					}
		})
	}
	const preferential = ()=>{
		uni.navigateTo({
			url:"/pages/preferentialDetail/preferentialDetail"
		})
	}
	
	const goRecharge=()=>{
		uni.navigateTo({
			url:"/pages/recharge/recharge"
		})
	}
	const secnd = ()=>{
		homes.scanQrcode()
	}
	const dianhua = ()=>{
		uni.makePhoneCall({
			phoneNumber:'17605326897'
		})
	}
</script>

<style lang="scss">
	.networkDetail {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #eeeeee;

		.ding {
			width: 100%;
			height: 11%;
		}

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

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

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

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

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

			.mapWindow {
				width: 100%;
				height: 266rpx;
				position: relative;
				bottom: 0rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #feffff;
				z-index: 999;

				.txtRight {
					position: absolute;
					top: 30rpx;
					right: 30rpx;
					color: #999999;
					font-size: 20rpx;
				}

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

					.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;
						display: flex;
						align-items: center;

						.c-img {
							display: block;
							width: 24rpx;
							height: 30rpx;
						}
					}

					.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: 42rpx;

							.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: 90rpx;
						position: relative;
						display: flex;
						align-items: center;
						color: white;

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

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


				}

				.right-m {
					width: 30%;
					height: 266rpx;
					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;
						}
					}
				}
			}

			.nav-title {
				position: relative;
				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: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-left: 32rpx;
				}

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

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

		}

		.state {
			width: 100%;
			position: relative;
			background-color: #fff;
			margin-top: 20rpx;

			.title {
				width: 100%;
				height: 100rpx;
				position: relative;
				display: flex;
				align-items: center;

				.lines {
					width: 10rpx;
					height: 24rpx;
					background-color: #4993FF;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					margin-left: 30rpx;
				}

				.txt {
					display: block;
					margin-left: 20rpx;
					line-height: 100rpx;
					font-size: 36rpx;
					font-weight: 500;
				}
			}

			.machine {
				width: 100%;
				background-color: #fff;
				font-size: 26rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.machine-flex {
					width: 304rpx;
					height: 164rpx;
					border: 1rpx solid #eee;
					margin-left: 42rpx;
					margin-top: 30rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					position: relative;

					.i {
						width: 304rpx;
						height: 90rpx;
						background: #D8D8D8;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
					}

					.t {
						width: 304rpx;
						height: 74rpx;
						line-height: 74rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						padding-left: 16rpx;
						padding-right: 12rpx;

						.t-left {
							font-size: 26rpx;
						}

						.t-right {
							font-size: 22rpx;
							color: #999999;
						}

					}

					.flex-box {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						width: 114rpx;
						height: 40rpx;
						background: linear-gradient(90deg, #F0CB3E 0%, #F1A202 100%);
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						font-size: 22rpx;
						color: white;
						text-align: center;
						line-height: 40rpx;


					}

					.iSshow1 {
						background: linear-gradient(90deg, #77E07B 0%, #42BE45 100%);
					}

					.iSshow2 {
						background: linear-gradient(90deg, #FC7575 0%, #F02121 100%);
					}

				}

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

		.netBottom {
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// bottom: constant(safe-area-inset-bottom);
			// bottom: env(safe-area-inset-bottom);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;

			.netBottom-left {
				width: 100rpx;
				font-size: 22rpx;
				margin-left: 48rpx;

				.left-img {
					display: block;
					width: 38rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}

			}

			.netBottom-right {
				width: 504rpx;
				height: 84rpx;
				// background-color: seagreen;
				margin-right: 30rpx;
				text-align: center;
				line-height: 84rpx;
				display: flex;
				color: white;

				.left {
					width: 50%;
					height: 84rpx;
					border-radius: 40rpx 0rpx 0rpx 40rpx;
					background: linear-gradient(135deg, #FEBA33 0%, #FF9933 100%);
				}

				.right {
					width: 50%;
					height: 84rpx;
					border-radius: 0rpx 40rpx 40rpx 0rpx;
					background: linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
				}
			}
		}
	}
	.hujiao{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		.windows-hujiao{
			width: 630rpx;
			height: 614rpx;
			background: #FFFFFF;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.i{
				width: 320rpx;
				height: 258rpx;
				margin-top: 40rpx;
				transform: translateX(-50%);
				margin-left: 50%;
			}
			.ke{
			width: 100%;
			text-align: center;
			height: 36rpx;
			font-size: 26rpx;
			color: #1276F7;
			line-height: 36rpx;
			margin-top: 24rpx;
			}
			.ke1{
				width:100%;
				text-align: center;
				height: 66rpx;
				font-weight: 600;
				font-size: 48rpx;
				color: #222222;
				line-height: 66rpx;
				margin-top: 16rpx;
			}
			.ke3{
				width:90%;
				height: 68rpx;
				transform: translateX(-50%);
				margin-left: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;
				.lefts{
					width: 266rpx;
					height: 68rpx;
					font-size: 26rpx;
					background-color: #ffffff;
					border: 1rpx solid #eee;
				}
				.rights{
					width: 266rpx;
					height: 68rpx;
					font-size: 26rpx;
					background: linear-gradient( 270deg, #25A5FF 0%, #0177FF 100%);
					color: white;
				}
			}
			.ke4{
				width: 100%;
				height: 32rpx;
				font-size: 22rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>