<template>
	<view class="content">
		<view class="page-content">
			<view class="header">
				<u-image width="160rpx" height="160rpx" :border-radius="10" :src="storeInfo?storeInfo.icon:''"></u-image>
				<view class="store-info">
					<view class="name">
						{{storeInfo ?storeInfo.name : ''}}
					</view>
					<view class="address">
						{{storeInfo?storeInfo.addrDetail:''}}
					</view>
					<view class="location">
						<view class="left">
							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
							<text>{{storeInfo?storeInfo.distance:''}}km</text>
						</view>
						<view class="right">
							<u-icon class="icon" size="32" name="clock"></u-icon>
							<text>{{storeInfo?storeInfo.beginTime:''}}-{{storeInfo?storeInfo.endTime:''}} 营业</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 网点标签 -->
			<view class="store-mark">
				<text v-for="(item,index) in labelList" :key="index" class="mark-item">
					{{item}}
				</text>
			</view>
			<view class="store-server">
				服务项目：
				<text v-for="item in storeInfo.itemVOList" :key="item.id">{{item.itemName}}</text>
			</view>
			<!-- 路线指引 -->
			<view class="store-rich store-line">
				<view class="line-title">
					* 路线指引 *
				</view>
				<view class="line-content">
					<u-parse :html="storeInfo&&storeInfo.guidance?storeInfo.guidance:''"></u-parse>
				</view>
			</view>
			<!-- 温馨提示 -->
			<view class="store-rich">
				<view class="line-title">
					* 温馨提示 *
				</view>
				<view class="line-content">
					<u-parse :html="storeInfo&&storeInfo.reminder?storeInfo.reminder:''"></u-parse>
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="warn" plain @click="getWaitPhoto">排队情况</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="waitPhoto"></image>
		</u-popup>
	</view>
</template>

<script>
	import {getStoreDetail, getWaitPhoto} from '@/api/store.js'
	export default {
		components: {
		},
		data() {
			return {
				// 用户拒绝授权位置信息时默认展示青海西宁位置地图
				currentPosition: {
					lat: '36.636193',
					lng: '101.760521'
				},
				showPop: false, // 是否显示排队弹窗
				storeInfo: null, // 网点详细信息
				labelList: [], // 网点标签
				waitPhoto: ''  // 排队照片
			}
		},
		onLoad(option) {
			// 获取当前经纬度
			let _this = this
			uni.getLocation({
				type: 'wgs84', // 默认wgs84
				success: function(res) {
					_this.currentPosition.lat = res.latitude;
					_this.currentPosition.lng = res.longitude;
					// 查询门店信息
					if (option.id) {
						_this.getStoreDetail(option.id)
					}
				},
				fail: function(res) {
					console.log(res)
					// 查询门店信息
					if (option.id) {
						_this.getStoreDetail(option.id)
					}
				},
			});
			
		},
		methods: {
			// 获取网点详情信息
			getStoreDetail (id) {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					id: id,
					lat: this.currentPosition.lat,
					lng: this.currentPosition.lng
				}
				getStoreDetail(params).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.getOptionName()
						this.storeInfo.distance = this.storeInfo.distanct && this.storeInfo.distanct.distance ? Math.round(this.storeInfo.distanct.distance / 1000) : ''
					} else {
						this.toashMsg(res.message)
					}
				})
			},
			// 匹配数据字典 获取相应的name
			getOptionName () {
				console.log(222)
				let storeLabelList = this.$store.state.vuex_storeLabel  // 网点标签数据字典列表
				let arr = []
				this.storeInfo.labelList.map(item =>{
					let p = storeLabelList.find((i) => {
						return i.code == item
					})
					if (p) {
						arr.push(p.dispName)
					} 
				})
				this.labelList = arr
			},
			// 获取排队情况
			getWaitPhoto () {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				// let deviceNo = this.storeInfo.deviceVOList.length? this.storeInfo.deviceVOList[0].deviceNo :''
				getWaitPhoto({deviceNo:9898}).then(res=>{
					uni.hideLoading()
					if(res.status==200) {
						this.waitPhoto = res.data
						this.showPop=true
					} else {
						this.toashMsg(res.message)
					}
				})
			},
			// 打开导航位置信息界面
			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;
		width: 100%;
		.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>
