<template>

	<view class="content">

		<map class="map" scale="16" :latitude="Number(lat)" :longitude="Number(lng)" :markers="markers"></map>
		<view class="item flex-y-center">
			<image class="icon" :src="URL+obj.thumb"></image>
			<view class="">
				<text class="item-title">{{obj.title||''}}</text>
				<view class="announcement">
					{{obj.announcement||''}}
				</view>
			</view>
		</view>
		<view class="item box-pack-between">
			<view class="flex-y-center">
				<view class="iconfont icon-dianhua"></view>
				<text>{{obj.tel||''}}</text>
			</view>
			<view class="boda" @click="tel">
				<!-- <image class="img" src="../../static/images/dianhua.png" mode=""></image> -->
			</view>
		</view>
		<view class="flex-y-center item box-pack-between" style="padding-bottom: 27rpx;">
			<view class="flex">
				<view class="iconfont icon-dizhi"></view>
				<text>{{obj.address}}</text>
			</view>
			<view class="flex-y-center map-dd" @click="Location" :style="{color:setColor}">
				<text>导航到店</text>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</view>
		<block v-if="obj.content">
			<view class="shop-desc">
				<view class="shop-desc-title flex-y-center">
					商家介绍
				</view>
				<mp-html :content="obj.content" />
			</view>
			<view class="" style="height:70px;"></view>
			<view class="box-pack-between  flex-y-center logo-pf">
				<view class="flex-y-center left" :style="{color:setColor}">
					<text class="iconfont icon-service"></text><text>商家热线</text>
				</view>
				<view class="right" @click="tel" :style="{background:setColor}">
					一键拨号
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				obj: {},
				markers: [],
				store_id: "",
				lat: "",
				lng: "",
				URL: getApp().globalData.URL,
				setColor: "",
			}
		},

		onLoad(e) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.setColor = this.$store.state.color;
			this.store_id = uni.getStorageSync('store_id')
			this.system();
		},

		onShareAppMessage(e) {
			return {}
		},

		methods: {

			look() {
				window.location.href = this.obj.url;
			},

			tel(e) {
				uni.makePhoneCall({
					phoneNumber: this.obj.tel //仅为示例
				});
			},

			Location() {
				// #ifdef MP-WEIXIN
				uni.openLocation({
					latitude: Number(this.lat),
					longitude: Number(this.lng),
					scale: 18,
					address: this.obj.address,
					name: this.obj.title,
					fail: function() {
						uni.getSetting({
							success: function(e) {
								e.authSetting["scope.location"] ? console.log("取消") : uni
									.showModal({
										title: "提示",
										content: "您拒绝了获取地址授权，部分功能无法使用,点击确定重新获取授权。",
										showCancel: !1,
										success: function(e) {
											e.confirm && uni.openSetting({
												success: function(e) {
													e.authSetting[
														"scope.location"
													];
												},
												fail: function(e) {}
											});
										}
									});
							}
						});
					}

				})
				// #endif

				// #ifdef MP-ALIPAY
				my.openLocation({
					longitude: this.lng,
					latitude: this.lat,
					address: this.obj.address,
					name: this.obj.title,
					scale: 18
				})
				// #endif

			},

			system() {
				this.$http.request('xcx/system', {
					store_id: this.store_id,
					table_id: ""
				}, "", "", ).then(res => {
					console.log(res, "res")
					this.obj = res.data;
					let markers = [];
					let subscribe = res.data.set.coordinates.split(',');
					this.lat = subscribe[0];
					this.lng = subscribe[1];
					markers.push({
						id: 1,
						latitude: subscribe[0],
						longitude: subscribe[1],
						title: res.data.title,
						iconPath: this.URL + res.data.thumb,
						width: 50,
						height: 50,
					});
					this.markers = markers;
					console.log(this.markers, "this.markers")
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F1F1;
		font-size: 24rpx;
	}

	.iconfont {
		margin-right: 20rpx;
	}

	.icon-service {
		font-size: 50rpx;
	}

	.icon-jiantou {
		font-size: 24rpx;
	}

	.map-dd {
		min-width: 157rpx;
	}

	.item-title {
		font-size: 32rpx;
	}

	.shop-desc {
		padding: 0rpx 30rpx;
		font-size: 26rpx;
		background: #FFFFFF;
		margin-top: 10rpx;
	}

	.shop-desc-title {
		height: 86rpx;
		background: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		color: rgba(20, 31, 51, 1);
		border-bottom: 1rpx solid #F1F1F1;
	}

	.content {
		.map {
			width: 100%;
			height: 600rpx;
		}

		.item {
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			background: #FFFFFF;

			.icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				min-width: 80rpx;
			}

			.boda {
				border-left: 1px solid #fff;

				.img {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10px;

				}
			}
		}

		.logo-pf {
			position: fixed;
			width: 100%;
			bottom: 0;
			padding: 20rpx;
			border-top: 1rpx solid #F1F1F1;
			background-color: #FFFFFF;

			.left {
				font-size: 30rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				.announcement {
					font-size: 26rpx;
				}
			}

			.right {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #007AFF;
				text-align: center;
				font-size: 26rpx;
				border-radius: 4rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
