<template>
	<view class="container">
		<view class="uv-demo-block">
			<uv-swiper :list="photo" indicator indicatorMode="line" circular height="200" radius="0"></uv-swiper>
		</view>
		<!-- <view class="merchant-name">{{ merchant.merchantName }}</view> -->
		<uni-card :title="merchant.merchantName" :border="false" :is-shadow="false" :padding="0">
			<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
				<uv-cell title="营业时间" :label="merchant.businessTime" :cellStyle="{padding: '10px 5px'}">
					<!-- <template v-slot:label>
						<view class="web-text-secondary">{{ merchant.businessTime }}</view>
					</template>
					<template v-slot:right-icon>
						<text class="web-text-success"></text>
					</template> -->
				</uv-cell>
				<uv-cell title="场馆地址" :label="merchant.address" :cellStyle="{padding: '10px 5px'}">
				</uv-cell>
				<uv-cell title="场馆位置" :label="`距离【${merchant.merchantName}】3.8公里·约7分钟`" isLink :cellStyle="{padding: '10px 5px'}">
					<template v-slot:right-icon>
						<uv-icon size="50rpx" name="map-fill" color="#cccccc" style="color: #ff0000;"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell title="服务前台电话" :label="merchant.phone" :border="false" :cellStyle="{padding: '10px 5px'}" @click="callPhone(merchant.phone)">
					
				</uv-cell>
			</uv-cell-group>
		</uni-card>

		<uni-card title="场地介绍" extra="About" :is-shadow="false" :border="false" :padding="0">
			<view class="web-text-heading booking-content">
				<view v-html="merchant.content"></view>
			</view>
		</uni-card>

		<view class="xieyi web-cell web-text-secondary web-cell-align-top">
			<view class="web-cell web-cell-content web-cell-align-top">
				<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
				<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
				<view class="text" @click="onDisabled">
					<text>我已阅读并同意</text>
					<text class="link"
						@click.stop="navTo('/package/article-detail/article-detail?articleId=503')">《会员协议》</text>
				</view>
			</view>
		</view>
		<view class="save-btn">
			<uv-button
				:customStyle="{background: 'linear-gradient(to right, #36f8fa, #00a2ff)',borderRadius: '30px',color: '#ffffff'}"
				text="申请加入" @click="save"></uv-button>
		</view>
		
	</view>
	<uv-gap height="50"></uv-gap>

	<!-- <view class="booking-tel" @click="openBookingTel">活动订场</view> -->
	<!-- 活动订场弹窗 -->
	<uni-popup ref="popup" type="center">
		<view class="popup-booking-tel">
			<text class="title">场馆热线</text>
			<text class="desc">主体育场、足球训练场：0771-4953380</text>
			<text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>
			<text class="desc">游泳跳水馆：0771-4736008</text>

			<text class="title">参观接待</text>
			<text class="desc">预约电话：0771-4736955</text>
			<text class="desc">传真号码：0771-4736955</text>

			<text class="title">大型活动订场</text>
			<text class="desc">预约电话：0771-4736970、0771-4736994</text>

			<text class="title">威拓普健身馆</text>
			<text class="desc">联系电话：0771-5588699</text>
		</view>
		<view class="web-cell popup-close" @click="closeBookingTel">
			<uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>
		</view>
	</uni-popup>
	<!-- 登录组件 -->
	<ws-login ref="login" :logo="logo" @done="reload" />
</template>

<script>
	import {
		storeToRefs
	} from 'pinia';
	import * as MerchantApi from '@/api/shop/merchant';
	import {
		useCarStore
	} from '@/store/modules/car';
	const carStore = useCarStore();

	export default {
		data() {
			return {
				id: 0,
				// 场馆信息
				merchant: {},
				// 场馆相册
				photo: [],
				isLogin: false,
				disabled: true
			}
		},
		onLoad(option) {
			this.id = option.id
			carStore.merchantId = option.id
			this.reload();
		},
		onShow() {
			// 登录状态
			if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
				this.isLogin = true;
			}
		},
		methods: {
			async reload() {
				const app = this

				// 请求数据
				Promise.all([app.getMerchant()]).then(res => {
					const merchant = res[0];
					app.merchant = merchant;

					// 修改标题
					uni.setNavigationBarTitle({
						title: merchant.merchantName
					})
					// 加载场馆相册
					if (merchant.files) {
						app.photo = JSON.parse(merchant.files)
					}
					// 更新购物车状态
					carStore.setMerchant(merchant)
					carStore.merchantId = merchant.merchantId
					carStore.merchantName = merchant.merchantName
					carStore.merchantCode = merchant.merchantCode
				})
			},
			getMerchant() {
				return new Promise((resolve, reject) => {
					MerchantApi.getMerchant(this.id).then(result => {
						resolve(result)
					}).catch(reject)
				})
			},
			onDisabled() {
				this.disabled = !this.disabled;
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			openBookingTel() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			closeBookingTel() {
				this.$refs.popup.close()
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			onMap() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log('返回可以用于uni.openLocation的经纬度: ', res);
						const latitude = this.merchant.latitude;
						const longitude = this.merchant.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			save() {
				if (!this.disabled) {
					uni.showToast({
						title: '请先阅读并同意订票协议',
						icon: 'none'
					})
					return false
				}
				return false
				uni.navigateTo({
					url: '/package/booking/checkout?id=' + this.id
				})
			}
		}
	}
</script>
<style>
	page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #f0f2f5;
		width: 750rpx;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped>
	.container {}

	.merchant-name {
		padding: 30rpx;
		font-weight: 500;
		font-size: 42rpx;
		background-color: #ffffff;
	}

	.save-btn {
		width: 700rpx;
		left: 25rpx;
		height: 80rpx;
		position: fixed;
		bottom: 30rpx;
	}

	.booking-tel {
		position: fixed;
		z-index: 1;
		top: 270px;
		right: 0;
		width: 80px;
		height: 38px;
		border-radius: 50px 0 0 50px;
		background: linear-gradient(to right, #ccff66, #008e04);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 13px;
	}

	.popup-booking-tel {
		background-color: #ffffff;
		width: 560rpx;
		min-height: 400rpx;
		border-radius: 20rpx;
		margin: auto;
		padding: 20px;
		z-index: 9999;
		display: flex;
		flex-direction: column;

		.title {
			font-weight: bold;
			font-size: 38rpx;
			text-align: center;
			padding: 10px 0;
		}

		.desc {
			line-height: 2rem;
		}
	}

	.popup-close {
		display: flex;
		margin-top: 24rpx;
		justify-content: center;
	}
	.booking-content{
		padding: 10px;
		font-size: 30rpx;
		line-height: 1.5rem;
	}
	.xieyi {
		margin-bottom: 80rpx;
		padding: 0 30rpx;

		.text {
			margin-left: 5rpx;

			.link {
				color: #0f80ff;
			}
		}
	}
</style>