<template>
	<RefreshView ref="mescrollRef" :hasBack="true" :useTitleLeftBtn="0" :useTitleRightBtn="0"
		:text="page.title" :useUpScroll="false">

		<image class="type" src="../../static/dianhua.png" @click="call"></image>

		<view class="name">{{data.linkerName}}</view>
		<view class="area">{{data.regionName}}</view>
		<view class="address">{{page.distance}}</view>

	<!-- 	<view class="banner">
			<swiper class="swiper" indicator-dots="true" autoplay="true">
				 <swiper-item class="swiper-item" v-for="(item,index)  in data.listTwo" :key="index">-->
					<image style="width: 100%;height: 450rpx;" :src="data.logo" mode="aspectFill"></image>
	<!-- 			</swiper-item>
			</swiper>
		 </view>-->

		<!-- <view style="margin-top: 20rpx;">
			<text style="background-color: #F1F1F1;border-radius: 5rpx;margin: 15rpx;padding-left: 15rpx;
			padding-right: 15rpx;padding-top: 5rpx;padding-bottom: 5rpx;color: #4c576d;font-size: 22rpx;">{{data.environmentType}}</text>
		</view>
 -->
		<view
			style="display: flex;flex-direction: row;box-sizing: border-box;margin-top: 30rpx;margin-left: 20rpx;margin-right: 20rpx;">

			<text style="font-size: 24rpx;color: #FF5722;">营业时间：</text>
			<text style="font-size: 24rpx;color: #FF5722;">{{data.shopTime}}</text>
		</view>

		<view class="nav-bar">
			<image class="bar-left-img" src="../../static/area_dizhi.png" mode="aspectFit"></image>
			<text class="bar-text">{{data.address}}</text>
		</view>

		<view class="line"></view>

		<text class="bar-text">球馆简介</text>

		<view class="short">
			<rich-text :nodes="getShort()" class="short"></rich-text>
		</view>

		<!-- <uni-popup ref="popupBrowser" type="top">
			<uni-pop-browser></uni-pop-browser>
		/uni-popup>

		  #ifdef  H5

		<view>
			<drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" />
		</view> 

		 #endif 

			<uni-popup ref="popup" type="share">
			<uni-popup-share title="分享" @select="select"></uni-popup-share>
		</uni-popup> -->

	</RefreshView>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					sid: '',
					title: '球馆详情',
					lat: -1,
					lon: -1,
					distance: ""
				},
				data: {}
			}
		},
		created() {

			let _this = this

			// 获取定位
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {

					let locat = res

					_this.page.lat = locat.latitude
					_this.page.lon = locat.longitude

					if (_this.page.distance == "") {
						// if (_this.data.point != undefined) {
						// 	let split = _this.data.point.split(",")
						// 	// 计算距离
						// 	_this.page.distance = "距您" + _this.getDistance(_this.page.lat, _this.page.lon,
						// 		split[1], split[0])
						// 	console.log(_this.page.distance)
						// }
						// 计算距离
						_this.page.distance = "距您" + _this.getDistance(_this.page.lat, _this.page.lon,
							_this.data.lat, _this.data.lng)
						console.log(_this.page.distance)	
						
					}

					_this.refresh()

				},
				fail(err) {
					console.log(err)
				}
			});
		},
		onLoad(options) {
			this.page.sid = options.sid
		},
		methods: {
			refresh() {

				let _this = this;

				this.HTTP({
						url: 'gms/v1/gymnasiumsManagement/getGymnasiumDetails/'+_this.page.sid,
						paramsType: "FORM",
						method: "GET",
						loading: true
					}).then((res) => {

							this.data = res.data
							// 成功关闭刷新状态
							_this.$refs.mescrollRef.refreshFinished()
							console.log("1》》》", _this.page.distance)
							if (_this.page.distance == "") {
								console.log("2》》》》", _this.page.lat)
								if (_this.page.lat != -1) {
									console.log("point》》》》",_this.data.point)
									// let split = _this.data.point.split(",")
									// // 计算距离
									// _this.page.distance = "距您" + _this.getDistance(_this.page.lat, _this.page.lon, split[
									// 	1], split[0])
									// console.log("3》》》》", _this.page.distance)
									
									// 计算距离
									_this.page.distance = "距您" + _this.getDistance(_this.page.lat, _this.page.lon,
										_this.data.lat, _this.data.lng)
									console.log(_this.page.distance)	
									}
								}

							}, (err) => {
								// 关闭刷新状态
								_this.$refs.mescrollRef.refreshFinished()
							})
					},
					call() {
						uni.makePhoneCall({
							phoneNumber: this.data.linkerPhone,
							success(res) {
								console.log(res)
							},
							fail(err) {
								console.log(err)
							}
						})
					},
					getShort() {
						if (this.IsEmpty(this.data.summary)) {
							return "球馆管理员未录入简介"
						} else {
							return this.data.summary
						}
					},
					daoHang() {

					},
			},
		}
</script>

<style lang="scss">
	.short {
		margin-left: 40rpx;
		margin-right: 40rpx;

	}

	.bar-text {
		font-size: 32rpx;
		height: 100%;
		line-height: 92rpx;
		padding-left: 28rpx;
	}

	.name {
		font-size: 33rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		z-index: 9000;
		top: --window-top;
		margin-top: 300rpx;
		padding: 10rpx 15rpx;
		position: absolute;
		left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		line-height: 50rpx;
	}

	.area {
		font-size: 28rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		z-index: 9000;
		top: --window-top;
		margin-top: 350rpx;
		padding: 10rpx 15rpx;
		position: absolute;
		left: 20rpx;
	}

	.address {
		font-size: 25rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		z-index: 9000;
		top: --window-top;
		margin-top: 390rpx;
		padding: 10rpx 15rpx;
		position: absolute;
		left: 20rpx;
	}

	.type {
		font-size: 28rpx;
		border-radius: 15rpx;
		color: #2C405A;
		font-weight: bold;
		z-index: 9000;
		top: --window-top;
		margin-top: 410rpx;
		padding: 10rpx 15rpx;
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
	}


	.banner {
		height: 450rpx;
		width: 100%;
		box-sizing: border-box;

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

			.swiper-item {
				height: 100%;
				width: 100%;
.banner-image {
					width: 100%;
					height: 100%;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}
				
			}
		}
	}

	.nav-bar {
		min-height: 92rpx;
		width: 100%;
		display: flex;
		margin-top: 30rpx;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		margin-right: 35rpx;

		.bar-left-img {
			width: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
		}

		.bar-text {
			font-size: 28rpx;
			flex: 1;
			box-sizing: border-box;
			line-height: 40rpx;
		}

		.bar-img {
			width: 90rpx;
			height: 92rpx;
			padding-right: 28rpx;
		}
	}

	.line {
		width: 100%;
		height: 18rpx;
		background-color: #f5f4f9;
	}
</style>
