<template>
	<view class="">
		<view class="goods-info">
			<uv-swiper :list="photo" indicator indicatorMode="line" circular height="750rpx" radius="0"></uv-swiper>
		</view>
		<!-- <view class="merchant-name">{{ form.merchantName }}</view> -->
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
				<uv-cell :cellStyle="{padding: '10px 5px'}">
					<template v-slot:title>
						<view class="pirce-bar" style="display: flex;">
							<view class="web-text-danger">￥</view>
							<view class="web-text-danger" style="font-size: 40rpx;">{{ form.price }}</view>
						</view>
					</template>
					<template v-slot:right-icon>
						<text class="web-text-secondary" style="text-decoration: line-through">划线价￥{{ form.price*2 }}</text>
					</template>
				</uv-cell>
				<uv-cell :title="form.goodsName" label="商品名称" :cellStyle="{padding: '10px 5px'}">
				</uv-cell>
				<uv-cell title="选择款式" :label="`100zz【藏青色】、100zz【古红色】`" isLink
					:cellStyle="{padding: '10px 5px'}">
					<template v-slot:right-icon>
						<!-- <uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000;"></uv-icon> -->
					</template>
				</uv-cell>
				<uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">
				</uv-cell>
				<uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"
					@click="callPhone('0771-8888888')">

				</uv-cell>
			</uv-cell-group>
		</uni-card>

		<uni-card title="商品详情" :is-shadow="false" :border="false" :padding="0">
			<view class="web-text-heading booking-content">
				<view v-html="form.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>

		<uv-gap height="50"></uv-gap>
		<view class="save-btn">
			<uv-button
				:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
				text="立即购买" @click="save"></uv-button>
		</view>
		<!-- <view class="goods-nav-btn">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view> -->

	</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 GoodsApi from '@/api/shop/goods';
	import {
		useCarStore
	} from '@/store/modules/car';
	const carStore = useCarStore();
	const {
		goodsList,
		orderInfo,
		totalPrice,
		carNum,
		merchantId,
		merchantName,
		merchantCode,
		type,
		dateTime
	} = storeToRefs(carStore)

	export default {
		data() {
			return {
				id: 0,
				form: {},
				// 场馆相册
				photo: [],
				isLogin: false,
				disabled: true,
				orderInfo,
				goodsList,
				totalPrice,
				carNum,
				merchantId,
				merchantName,
				merchantCode,
				type,
				dateTime,
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
					color: '#fff'
				}]
			}
		},
		onLoad(option) {
			this.id = 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.getGoods()]).then(data => {
					console.log('data: ', data);
					const form = data[0]
					app.form = form;
					carStore.merchantId = form.merchantId
					carStore.merchantName = form.merchantName
					carStore.merchantCode = form.merchantCode

					// 修改标题
					uni.setNavigationBarTitle({
						title: form.goodsName
					})
					// 加载场馆相册
					if (form.files) {
						app.photo = JSON.parse(form.files)
					}
				})
			},
			getGoods() {
				return new Promise((resolve, reject) => {
					GoodsApi.getGoods(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
				}
				const app = this
				const { form } = this
				carStore.totalPrice = form.price
				app.goodsList = []
				form.image = JSON.parse(form.image)[0]
				app.goodsList.push(form)
				carStore.goodsList = app.goodsList
				
				// 跳转页面
				uni.navigateTo({
					url: '/package/goods/checkout?goodsId=' + 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 {}

	.goods-info {
		width: 750rpx;
		height: 750rpx;
		background-color: #fff;
	}

	.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;
			}
		}
	}
	.goods-nav-btn {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}
</style>