<template>
	<view style="height: calc(100vh - 160rpx);overflow: auto;">
		<view class="ttname">{{form.orderName}}{{`（ ${address} ）`}}</view>
		<uni-forms label-width="120">
			<view class="whiteItem">
				<view class="flexline" @click="goback">
					食品 <uni-icons class="fr" type="right" size="16"></uni-icons>
				</view>
				<view v-for="(f,index) in foodsList" :key="index">
					<view class="flexFood">
						<label>{{f.name}} ({{f.categoryName}})</label>
						<uni-number-box @change="changeNum" :min="0" v-model="f.num" :max="9999">
						</uni-number-box>
					</view>
				</view>
			</view>
			<view class="whiteItem">
				<uni-forms-item label="送餐时间" required>
					<uni-datetime-picker ref="rzRangeForm" v-model="form.deliveryTime" type="datetime"
						return-type="string" @change="getTime" placeholder="选择时间"  :start="startTime" :end="endTime"/>
				</uni-forms-item>
				<uni-forms-item label="送餐地址" required>
					<uni-easyinput type="text" v-model="form.deliveryAddress" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required>
					<uni-easyinput type="number" v-model="form.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput type="textarea" v-model="form.remarks" />
				</uni-forms-item>
			</view>


			<view style="height: 80rpx;"></view>

		</uni-forms>
	</view>
	<view class="bbfix">
		<!-- 底部提交 -->
		<view class="price">
			总价：
			<text>￥{{form.total}}</text>
		</view>
		<view class="chooseNum" @click="popChoose">
			<uni-icons type="bottom" size="20"></uni-icons>
		</view>
		<view class="subBtn" @click="submit">提交订单</view>
	</view>


	<uni-popup ref="popup" background-color="#fff" type="bottom">
		<view class="popup-content ccitemBox">
			<label> 餐饮费</label>
			<view class="ccitem" v-for="(f, index) in foodsList" :key="index">
				<view v-show="f.num>0">{{f.name}}</view>
				<text v-show="f.num>0">{{f.num}} * ¥{{f.price}}</text>
			</view>


			<label>共计<text style="float: right;">¥{{form.total}}</text></label>


		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import dayjs from 'dayjs'
	import {
		checkUserAuth
	} from '@/common/login';
	const {
		proxy
	} = getCurrentInstance()
	const app = getApp();
	const data = reactive({
		form: {
			total: 0,
			orderName: '',
			activeId: '',
			larId: '',
			orderName: '',
			foodsList: []
		},
		popup: null,
		foodsList: [],
		money: '',
		address: '',
		startTime:'',
		endTime:''
	})
	const {
		form,
		foodsList,
		money,
		popup,
		address,startTime,endTime
	} = toRefs(data);

	onLoad((options) => {
		if ('list' in options) {
			foodsList.value = JSON.parse(decodeURIComponent(options.list));
		}
		address.value = options.address
		form.value.total = options.money
		form.value.activeId = options.activeId
		form.value.larId = options.menuId
		form.value.orderName = options.orderName
		const currUser = uni.getStorageSync('currUser')
		if (currUser.realTelno) {
			form.value.phone = currUser.realTelno
		}
		endTime.value = app.globalData.foodEnd
		const today = dayjs()
		const start = app.globalData.foodStart
		if (start < today) {
			startTime.value = today
		} else {
			startTime.value = start
		}
		
	})

	function changeNum() {
		let moneyAll = 0
		for (let m of foodsList.value) {
			m.total = m.price * m.num
			moneyAll += m.total
		}
		form.value.total = moneyAll.toFixed(2)
	}

	function submit() {
		if (form.value.total == 0) {
			uni.showToast({
				title: '请选择菜品',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!form.value.deliveryTime) {
			uni.showToast({
				title: '请选择送餐时间',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!form.value.deliveryAddress) {
			uni.showToast({
				title: '请填写送餐地址',
				icon: 'none',
				duration: 2000
			})
			return
		}
		var pattern = /^1[345789]\d{9}$/;
		if (!pattern.test(form.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				duration: 2000,
				icon: 'none'
			})
			return
		}

		form.value.foodsList = foodsList.value

		console.log(form.value)
		uni.showModal({
			title: '提示',
			content: '确定提交订单吗',
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '提交中'
					});
					hotel.submitOrderFood(form.value).then(res => {
						uni.hideLoading();
						// 去付钱
						if (res.data) {
							if (res.data.total == -100) {
								uni.showToast({
									title: '挤爆了,请稍后下单',
									icon: 'none',
									duration: 2000
								})
							} else {
								let path =
									`/pages_hotel/hotel/pay?money=${res.data.total}&orderId=${res.data.orderId}`;
								uni.redirectTo({
									url: path
								});
							}

						} else {
							uni.showToast({
								title: '挤爆了,请稍后下单',
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}

	function popChoose() {
		popup.value.open()
	}

	function goback() {
		uni.navigateBack()
	}

	function getTime(e) {
		console.log(e)
	}
</script>

<style lang="scss" scoped>
	.fr {
		float: right;
	}

	.ttname {
		padding: 30rpx;
		font-size: 30rpx;
	}

	.flexFood {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		label {
			font-size: 28rpx;
		}
	}

	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;
	}

	.roomType {
		color: #4C5359;
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.roomInfo {
		color: #4C5359;
		font-size: 28rpx;

		text {
			position: relative;
			font-weight: 300;

			&:after {
				content: '|';
				color: #D2D7D9;
				margin: 0 8rpx;
			}

			&:last-child:after {
				display: none;
			}
		}

	}

	.tip {
		font-size: 28rpx;
		color: #E60012;
		padding: 0 30rpx;
	}

	.bbfix {
		background: #fff;
		height: 150rpx;
		display: flex;
		position: fixed;
		z-index: 89;
		width: 100%;
		bottom: 0;
		align-items: baseline;
		justify-content: space-between;
		border-top: 1rpx solid #dcdcdc;

		.price {
			padding-left: 20rpx;

			text {
				font-weight: bold;
				font-size: 45rpx;
				color: #ff8124;
			}
		}

		.subBtn {
			font-size: 36rpx;
			color: #ffffff;
			background: #ff8124;
			height: 120rpx;
			line-height: 100rpx;
			padding: 0 30rpx;
		}
	}

	.ccitemBox {
		height: 60vh;
		overflow: auto;

		label {
			margin: 10rpx 0;
			display: block;

			text {
				color: #1EC886;
				font-size: 32rpx;
			}
		}
	}

	.ccitem {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
		margin: 10rpx 0;

		label {
			font-size: 32rpx;
			color: #000;
		}

		text {
			font-size: 26rpx;
		}
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 30rpx;
	}

	.nopadding :deep(.uni-forms-item__inner) {
		padding: 0;
	}

	.colorfulBg {
		background: #1EC886;
		padding: 20rpx 10rpx 10rpx;

		.whiteItem {
			border-radius: 0;
			margin: 0;
			width: 730rpx;
		}

		.name {
			color: #fff;
			margin: 0 0 20rpx;
		}
	}
</style>