<template>
	<view class="container">
		<!-- deBug信息 -->
		<view v-if="merchant" class="web-debug web-text-success" style="display: none;">
			场馆ID：{{ merchant.merchantId }} 场馆编号：{{ merchant.merchantCode }} 场馆名称：{{ merchant.merchantName }} 
			日期：{{ dateTime }} 
			星期：{{ week }} 
			订单总金额：{{ totalPrice }}
			类型：{{ type }}
			场地信息：{{ orderInfo }}
		</view>
		<!-- <view class="merchant-name">{{ merchant.merchantName }}</view> -->
		<uv-tabs :list="next7day" :itemStyle="{height: '58px'}" :activeStyle="{ color: '#2ba91c'}" lineColor="#2ba91c"
			:inactiveStyle="{ color: '#808080' }" @change="onDateTime"></uv-tabs>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" activeColor="#2ba91c" inActiveColor="#ff0000"
				@clickItem="onType" />
		</view>
		<!-- 状态说明 -->
		<view class="uni-badge-wrap">
			<view class="badge-item">
				<uv-badge :isDot="true" type="blank"></uv-badge>
				<text class="web-text-secondary">可预约</text>
			</view>
			<view class="badge-item">
				<uv-badge :isDot="true" type="info"></uv-badge>
				<text class="web-text-secondary">已出售</text>
			</view>
			<view class="badge-item">
				<uv-badge :isDot="true" type="success"></uv-badge>
				<text class="web-text-secondary">我的选择</text>
			</view>
			<view class="badge-item">
				<uv-badge :isDot="true" type="warning"></uv-badge>
				<text class="web-text-secondary">已预定半场</text>
			</view>
		</view>
		<!-- 场地列表 -->
<!-- 		<uv-empty mode="data" v-if="periodList.length == 0"
			icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty> -->
		<view class="checkout-body web-text-primary" v-if="periodList.length > 0">
			<template v-for="(item,index) in periodList" :key="index">
				<view class="period-item">
					<view class="period">{{ item.timePeriod }}</view>
					<view class="field-list">
						<template v-for="(field,index2) in item.fieldList" :key="index2">
							<view class="field"
								:class="isActive(field)"
								@click="onField(field)">
								<text class="field-name">{{ field.fieldName }}</text>
								<text class="price">{{ item.price }}元</text>
							</view>
						</template>
					</view>
				</view>
			</template>
			<!-- 排版样式备份 -->
			<view class="period-item" style="display: none;">
				<view class="period">18:00 - 20:00</view>
				<view class="field-list">
					<view class="field web-bg-info">
						<text class="field-name">1号场地</text>
						<text class="price">580元</text>
					</view>
					<view class="field web-bg-success active">
						<text class="field-name">2号场地</text>
						<text class="price">580元</text>
					</view>
					<view class="field web-bg-warning">
						<text class="field-name">3号场地</text>
						<text class="price">580元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 支付按钮 -->
	<uv-gap height="50"></uv-gap>
	<view class="checkout-car">
		<view class="car-selected" @click="openCarInfo">
			<uv-icon name="shopping-cart" size="36" color="#ffffff"></uv-icon>
			<uv-badge type="error" max="99" :value="carNum"></uv-badge>
		</view>
		<view class="car-total">
			<text style="color: #ebcf00;">￥</text>
			<uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold
				:endVal="totalPrice"></uv-count-to>
		</view>
		<uv-button class="save-btn"
			:disabled="orderInfo.length == 0"
			:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '0 30px 30px 0',color: '#ffffff', border: 'none', padding: '22px 30px'}"
			text="下一步" @click="save"></uv-button>
	</view>
	<!-- 展示购物车 -->
	<uni-popup ref="popup" style="margin-bottom: 200px;">
		<uni-card :title="`购物车`" extra="关闭" :border="false" :is-shadow="false" :padding="0" @click="closeCarInfo">
			<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
				<block v-for="(item,index) in orderInfo" :key="index">
					<uv-cell :title="`${item.fieldName} ￥${item.price}`" :label="`${item.dateTime}`"
						:cellStyle="{padding: '10px 5px'}">
						<template v-slot:right-icon>
							<uni-icons type="trash" size="20" color="#f76b4e" @click="remove(item)"></uni-icons>
							<text class="web-text-secondary" style="font-size: 24rpx;" @click="remove(item)">移除</text>
						</template>
					</uv-cell>
				</block>
			</uv-cell-group>
		</uni-card>
		<uv-gap height="70"></uv-gap>
	</uni-popup>

	<!-- 登录组件 -->
	<ws-login ref="login" :logo="logo" @done="reload" />
</template>

<script>
	import * as Api from '@/api/layout';
	import * as MerchantApi from '@/api/shop/merchant';
	import * as FieldApi from '@/api/booking/field';
	import * as PeriodApi from '@/api/booking/period';
	import {
		storeToRefs
	} from 'pinia';
	import {
		useCarStore
	} from '@/store/modules/car';
	import {
		getWeek,
		getKey
	} from '@/utils/common';

	const carStore = useCarStore();
	const {
		orderInfo,
		totalPrice,
		carNum,
		merchant,
		type,
		dateTime
	} = storeToRefs(carStore)


	export default {
		data() {
			return {
				// 场馆ID
				merchantId: 0,
				// 场馆信息
				merchant,
				// 未来7天
				next7day: [],
				// 预定信息
				orderInfo,
				// 订单总金额
				totalPrice,
				// 预定日期
				dateTime: null,
				// 0全场 1半场
				type: 0,
				// 星期几
				week: 0,
				// 是否可以预定半场
				isHalf: 0,
				// 服务器时间
				serverTime: {},
				items: ['全场', '半场'],
				// 搜索条件
				where: {},
				// 时段
				periodList: [],
				// 场地
				fieldList: [],
				// 选中的场地
				selection: [],
				// 是否已登录
				isLogin: false,
				// 是否同意协议
				disabled: false,
				// 购物车信息
				showCarInfo: false
			}
		},
		onLoad(option) {
			this.merchantId = option.id
			this.reload();
		},
		onShow() {
			// 登录状态
			if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
				this.isLogin = true;
			}
		},
		computed: {
			totalPrice() {
				const app = this
				let totalPrice = 0;
				app.selection.map(d => {
					totalPrice = totalPrice + d.price
				})
				carStore.totalPrice = totalPrice
				console.log('totalPrice: ',totalPrice);
				return totalPrice;
			},
			carNum() {
				return this.selection.length;
			}
		},
		methods: {
			async reload() {
				const app = this

				// 请求数据
				uni.showLoading({
					title: '数据读取中.'
				})
				Promise.all([app.getServerTime(), app.getNext7day(), app.getMerchant()]).then(res => {
					const serverTime = res[0];
					const next7day = res[1];
					const merchant = res[2];
					app.serverTime = serverTime;
					app.next7day = next7day;
					app.merchant = merchant;

					// 修改标题
					uni.setNavigationBarTitle({
						title: merchant.merchantName
					})
					// 保存场馆信息
					carStore.setMerchant(merchant)

					// 加载预定日期
					app.next7day = next7day.map((d, i) => {
						if (!app.dateTime && i == 0) {
							app.dateTime = d.dateTime
							app.week = d.week
							carStore.dateTime = d.dateTime
						}
						d.name = getWeek(d.week);
						d.value = d.date;
						return d
					})
					// 加载时段列表
					app.getBookingPeriod();
					// 加载场地列表
					// app.getBookingField();
					// 关闭加载状态
				}).catch(() => {
					uni.showToast({
						title: '请检查您的网络.',
						icon: 'none'
					})
					uni.hideLoading()
				})

			},
			onDisabled() {
				this.disabled = !this.disabled;
			},
			onDateTime(e) {
				console.log('e: ', e);
				const {
					serverTime
				} = this
				this.week = e.week
				this.dateTime = e.dateTime
				carStore.dateTime = e.dateTime
				this.reload()
			},
			onType(e) {
				const index = e.currentIndex
				if (index == 0) {
					this.type = 0;
					this.isHalf = 0;
				}
				if (index == 1) {
					this.type = 1;
					this.isHalf = 1;
				}
				this.reload()
			},
			getMerchant() {
				return new Promise((resolve, reject) => {
					MerchantApi.getMerchant(this.merchantId).then(result => {
						resolve(result)
					}).catch(reject)
				})
			},
			getServerTime() {
				return new Promise((resolve, reject) => {
					Api.getServerTime()
						.then(result => {
							resolve(result)
						})
						.catch(reject)
				})
			},
			getNext7day() {
				return new Promise((resolve, reject) => {
					Api.getNext7day()
						.then(result => {
							resolve(result)
						})
						.catch(reject)
				})
			},
			// getBookingField() {
			// 	FieldApi.listField({
			// 		merchantId: this.merchantId,
			// 		isStatus: 1,
			// 		isHalf: this.isHalf,
			// 		dateTime: `${this.dateTime}`
			// 	}).then(list => {
			// 		this.fieldList = list;
			// 	})
			// },
			getBookingPeriod() {
				const {
					serverTime
				} = this
				const now = new Date();
				const hours = now.getHours();
				const minutes = now.getMinutes()
				const startTime = serverTime.today == this.dateTime ? String(hours) + String(minutes) : undefined
				const week = this.week == 0 ? 7 : this.week
				PeriodApi.listPeriod({
					merchantId: this.merchantId,
					isStatus: 0,
					week,
					dateTime: `${this.dateTime}`,
					startTime,
					half: this.isHalf
				}).then(list => {
					this.periodList = list;
					uni.hideLoading()
				}).catch(err => {
					this.periodList = [];
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
					uni.hideLoading()
					if(err.message == '您还有未支付订单，请先支付'){
						setTimeout(() => {
							return uni.switchTab({
								url: '/pages/order/order'
							});
						}, 1000)
					}
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			openCarInfo() {
				// this.showCarInfo = !this.showCarInfo;
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			closeCarInfo() {
				this.$refs.popup.close()
			},
			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');
							}
						});
					}
				});
			},
			onField(item) {
				console.log(item);
				// 已被预定
				if(item.sold){
					return
				}
				const app = this
				const { merchant } = this
				// 时段
				// const p = this.periodList[i]
				// 场地
				// const f = this.fieldList[i2]
				const key = getKey(`${this.dateTime}${item.timePeriod}${this.merchantId}${item.fieldId}`)
				const index = app.selection.findIndex(d => d.key == key)
				if (index >= 0) {
					app.selection.splice(index, 1)
				} else {
					if (app.selection.length > 1) {
						uni.showToast({
							title: '最多预定两个场地!',
							icon: 'none'
						})
						return false
					}
					// 计算订单总金额
					// let totalPrice = 0
					// app.selection.map(d => {
					// 	console.log(d);
					// 	totalPrice = totalPrice + d.totalPrice
					// })
					const split = item.timePeriod.split('-')
					// console.log('aaaaaaaaa',{
					// 	key,
					// 	merchantId: this.merchantId,
					// 	merchantCode: this.merchantCode,
					// 	fieldId: item.fieldId,
					// 	fieldName: item.fieldName,
					// 	price: item.price,
					// 	merchantName: this.merchantName,
					// 	isChildren: item.isChildren,
					// 	isHalf: this.type,
					// 	timePeriod: item.timePeriod,
					// 	periodId: item.periodId,
					// 	startTime: `${split[0].trim()}:00`,
					// 	endTime: `${split[1].trim()}:00`,
					// 	orderCode: key,
					// 	dateTime: `${this.dateTime}`,
					// 	comments: `${this.dateTime} (${getWeek(this.week)}) ${item.timePeriod}`,
					// });
					// 添加到购物车
					app.selection.push({
						key,
						merchantId: this.merchantId,
						merchantCode: merchant.merchantCode,
						fieldId: item.fieldId,
						fieldName: item.fieldName,
						price: item.price,
						merchantName: merchant.merchantName,
						isChildren: item.isChildren,
						isHalf: this.type,
						timePeriod: item.timePeriod,
						periodId: item.periodId,
						startTime: `${split[0].trim()}:00`,
						endTime: `${split[1].trim()}:00`,
						orderCode: key,
						dateTime: `${this.dateTime}`,
						comments: `${this.dateTime} (${getWeek(this.week)}) ${item.timePeriod}`,
					})
					console.log(app.selection);
					carStore.orderInfo = app.selection
					carStore.carNum = app.selection.length
					carStore.totalPrice = totalPrice

				}
			},
			getStratTime(value){
				const split = value.split('-')
				const timeText = split[0].replace(' ', '')
				const startTime = new Date(`${this.dateTime} ${timeText}:00`).getTime()
				return startTime / 1000 || 0;
			},
			
			isActive(item) {
				const index = this.selection.find(d => d.key == getKey(`${this.dateTime}${item.timePeriod}${this.merchantId}${item.fieldId}`))
				if(item.sold){
					if(item.isHalf == 1){
						return 'web-bg-warning'
					}
					return 'web-bg-info'
				}
				if (index) {
					return 'active web-bg-success'
				}
			},

			// isActive(text,item) {
			// 	const index = this.selection.find(d => d.key == getKey(text))
			// 	if(item.sold){
			// 		if(item.isHalf == 1){
			// 			return 'web-bg-warning'
			// 		}
			// 		return 'web-bg-info'
			// 	}
			// 	if (index) {
			// 		return 'active web-bg-success'
			// 	}
			// },
			remove(item) {
				const index = this.selection.findIndex(d => d.key == item.key)
				this.selection.splice(index, 1)
				carStore.orderInfo = this.selection
			},
			save() {
				const {
					selection
				} = this
				uni.$uv.route({
					url: '/package/booking/confirm'
				})
			}

		}
	}
</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;
	}

	.checkout-car {
		width: 700rpx;
		left: 25rpx;
		position: fixed;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		background-color: #000000;
		border-radius: 100px;
		align-items: center;

		.car-selected {
			color: #ccc;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			position: relative;
		}

		.car-total {
			display: flex;
			color: #ebcf00;
			align-items: center;

			.save-btn {}
		}
	}

	.popup-car-info {
		margin-bottom: 100px;
		padding: 20rpx;
		background-color: #ffffff;
		width: 660rpx;
		margin: 150rpx auto;
	}

	.uni-padding-wrap {
		width: 180rpx;
		margin: 20rpx auto;
	}

	.uni-badge-wrap {
		display: flex;
		justify-content: space-around;

		.badge-item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;

			text {
				padding: 2rpx;
			}

			.web-text-secondary {
				padding-left: 8rpx;
			}
		}
	}

	.checkout-body {
		padding: 24rpx;

		.period-item {
			margin: 12rpx 0;

			.period {
				line-height: 2rem;
				padding-left: 12rpx;
				font-size: 28rpx;
			}

			.field-list {
				display: flex;
				flex-wrap: wrap;

				.web-bg-info {
					background-color: #909399 !important;
					color: #ffffff !important;
				}

				.web-bg-success {
					color: #2ba91c !important;
					border: 1px solid #2ba91c !important;
				}

				.web-bg-warning {
					// background-color: #c9e294 !important;
				}

				.active {
					&:before {
						border-radius: 0 0 12rpx 0;
						content: "";
						position: absolute;
						right: 0;
						bottom: 0;
						border: 24rpx solid #2ba91c;
						border-top-color: transparent;
						border-left-color: transparent;
					}

					&:after {
						content: "";
						width: 5px;
						height: 10px;
						position: absolute;
						right: 3px;
						bottom: 4px;
						border: 1px solid #fff;
						border-top-color: transparent;
						border-left-color: transparent;
						transform: rotate(45deg);
						border-radius: 4rpx;
					}
				}

				.field {
					width: 118rpx;
					height: 118rpx;
					margin: 9rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 16rpx;
					line-height: 1.3rem;
					position: relative;
					color: #333333;
					background-color: #ffffff;
					border: 1px solid #808080;

					.field-name {
						font-size: 23rpx;
					}

					.price {
						font-size: 25rpx;
					}
				}
			}

		}
	}

	.xieyi {
		margin: 30rpx auto;
		padding: 20rpx 30rpx;

		.text {
			margin-left: 5rpx;

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