<template>
	<view class="content">
		<view class="page-content">
			<view class="header">
				<u-image width="160rpx" height="160rpx" :border-radius="10" src="/static/img/mddef.jpg"></u-image>
				<view class="store-info">
					<view class="name">
						{{storeInfo.name}}
					</view>
					<view class="address">
						{{storeInfo.addrDetail}}
					</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>{{storeInfo.beginTime}}-{{storeInfo.endTime}} 营业</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 网点标签 -->
			<view class="store-mark">
				<text v-for="(item,index) in storeInfo.labelList" :key="index" class="mark-item">
					{{item}}
				</text>
			</view>
			<view class="store-server">
				服务项目：
				<text>标准速洗</text>
				<text>标准速洗</text>
			</view>
			<!-- 路线指引 -->
			<view class="store-rich store-line">
				<view class="line-title">
					* 路线指引 *
				</view>
				<view class="line-content">
					{{storeInfo.guidance}}
				</view>
			</view>
			<!-- 温馨提示 -->
			<view class="store-rich">
				<view class="line-title">
					* 温馨提示 *
				</view>
				<view class="line-content">
					{{storeInfo.reminder}}
				</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>
	import {getStoreDetail} from '@/api/store.js'
	export default {
		components: {
		},
		data() {
			return {
				showPop: false, // 是否显示排队弹窗
				storeInfo: {}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getStoreDetail(option.id)
			}
		},
		methods: {
			// 获取网点详情信息
			getStoreDetail (id) {
				uni.showLoading({
					title: '加载中...'
				})
				getStoreDetail({id:id}).then(res=>{
					uni.hideLoading()
					if (res.status == 200) {
						this.storeInfo = Object.assign({},res.data)
						if (this.storeInfo.addrDetail.indexOf("省") > 0 && this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") >
							0) {
							this.storeInfo.addrDetail = this.storeInfo.addrDetail
						} else {
							if (this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") > 0) {
								this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrDetail
							} else if (this.storeInfo.addrDetail.indexOf("区") > 0) {
								this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDetail
							} else {
								this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDistrictName + this.storeInfo.addrDetail
							}
						}
						this.storeInfo.distance = this.storeInfo.distanct && this.storeInfo.distanct.distance ? Math.round(this.storeInfo.distanct.distance / 1000) : ''
					} else {
						this.toashMsg(res.message)
					}
				})
			},
			// 获取排队情况
			getWaitPhone () {
				
			},
			// 打开导航位置信息界面
			openLocation () {
				let data = this.storeInfo
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        const latitude = res.latitude;
				        const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: data.name,
							address: data.addrDetail,
							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;
			.store-info {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 20rpx;
				.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: 5rpx;
					}
				}
			}
		}
		.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>
