<template>
	<view class="content">
		<view class="page-content">
			<view class="header">
				<image class="list-img" :src="'../../static/img/mddef.jpg'"></image>
				<view class="store-info">
					<view class="name">
						贞观路站
					</view>
					<view class="address">
						陕西省西安市未央区北二环贞观路
					</view>
					<view class="location">
						<view class="left">
							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
							<text>0.1km</text>
						</view>
						<view class="right">
							<u-icon class="icon" size="32" name="clock"></u-icon>
							<text>8：00-22：00 营业</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 网点标签 -->
			<view class="store-mark">
				<text class="mark-item">
					30分钟内免费洗车
				</text>
				<text class="mark-item">
					30分钟内免费洗车
				</text>
			</view>
			<view class="store-server">
				服务项目：
				<text>标准速洗</text>
				<text>标准速洗</text>
			</view>
			<!-- 路线指引 -->
			<view class="store-rich store-line">
				<view class="line-title">
					* 路线指引 *
				</view>
			</view>
			<!-- 温馨提示 -->
			<view class="store-rich">
				<view class="line-title">
					* 温馨提示 *
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="warn" plain @click="showPop=true">排队情况</button>
			<button type="warn" @click="openLocation">立刻导航</button>
		</view>
		<u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
			<image class="pop-img" :src="'../../static/img/mddef.jpg'"></image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				showPop: false, // 是否显示排队弹窗
				storeInfo: {
					latitude: '34.29318',
					longitude: '108.96712',
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getStoreDetail(option.id)
			}
		},
		methods: {
			// 获取网点详情信息
			getStoreDetail (id) {
				
			},
			// 打开导航位置信息界面
			openLocation () {
				// let latitude = this.storeInfo.latitude
				// let longitude = this.storeInfo.longitude
				
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        const latitude = res.latitude;
				        const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							  }
						})
				    }
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0 20rpx;
		.page-content{
			flex: 1;
			overflow-y: scroll;
		}
		.header {
			padding: 20rpx 0;
			display: flex;
			width: 100%;
			height: 200rpx;
			.list-img {
				width: 20%;
				height: 100%;
				margin-right: 10rpx;
			}
		
			.store-info {
				height: 100%;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				margin-right: 10rpx;
		
				.name {
					font-size: 32rpx;
					color: #000;
				}
				.address{
					font-size: 26rpx;
				}
				.location {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					.left {
						margin-right: 20rpx;
					}
		
					.icon {
						color: #999;
						margin-right: 10rpx;
					}
				}
			}
		}
		.store-mark{
			padding: 20rpx 0;
			width: 100%;
			.mark-item{
				padding: 10rpx 20rpx;
				border: 1px solid #eee;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 24rpx;
			}
		}
		.store-server{
			padding: 20rpx 0;
			width: 100%;
			font-size: 24rpx;
			border-bottom: 1px solid #eee;
			text{
				margin-right: 30rpx;
			}
		}
		.store-rich{
			padding: 20rpx 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.store-line{
			border-bottom: 1px solid #eee;
		}
		.footer{
			width: 100%;
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			button{
				width: 45%;
			}
		}
		.pop-img{
			width: 100%;
			height: 100%;
		}
	}
</style>
