<template>
	<view class="content" :style="[theme]">
		<view class="onecontent">
			<view class="onecontentone flex-start">
				<view class="onecontent_one">
					<view class="onecontenttowthere flex-start">
						<view class="positionfixedbox flex-between">
							<view class="positionfixedbox_one flex-between">
								<view class="positionfixedbox_onebox flex-start">
									<text>{{lists.start}}</text>
									<text>周{{lists.weekstart}}</text>
								</view>
								<view class="positionfixedbox_onebox_box">
									{{lists.long}}晚
								</view>
								<view class="positionfixedbox_onebox flex-start" style="margin-right: 28rpx;">
									<text>{{lists.end}}</text>
									<text>周{{lists.weekend}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="onecontenttow">
				{{elist.title}}
			</view>
			<view class="towindex_box_bouttn">
				<text style="margin-left: 10rpx;" v-for="(item,index) in elist.label" :key="index">{{item.name}}</text>
			</view>
			<view class="towcontentitemtow_one_there flex-start">
				<u-icon name="checkmark-circle" color="#76903C" size="14"></u-icon>
				<text class="towcontentitemtow_one_theretext">{{elist.cancel_time}}</text>
			</view>
		</view>
		<view class="fivecontent">
			<view class="fivecontentitem flex-between" @click="popupshow = true">
				<view class="fivecontentitem_one">
					房间数量
				</view>
				<view class="fivecontentitem_tow flex-between">
					<view class="">
						{{among}}间（每间最多住{{elist.capacity_people}}人）
					</view>
					<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
				</view>
			</view>
			<view class="fivecontentitem flex-between" v-for="(item,index1) in fullname" :key="index1">
				<view class="fivecontentitem_one">
					姓名
				</view>
				<view class="fivecontentitem_tow">
					<input type="text" v-model="item.name" placeholder="每间填1位住客姓名" />
				</view>
			</view>
			<view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					手机号码
				</view>
				<view class="fivecontentitem_tow">
					<input type="number" v-model="mobile" placeholder="请输入手机号码" />
				</view>
			</view>
			<!-- <view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					预计到店
				</view>
				<view class="fivecontentitem_tow">
					<input type="number" v-model="checkin_time" placeholder="房间将整晚保留" />
				</view>
			</view> -->
		</view>
		<view class="therecontent">
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					会员折扣
				</view>
				<view class="therecontenttow_tow">
					-{{allamounts.price.pre_price || '0'}}
				</view>
			</view>
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					原价
				</view>
				<view class="therecontenttow_tow">
					￥{{allamounts.price.meet_price}}
				</view>
			</view>
			<!-- 	<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					优惠券
				</view>
				<view class="therecontenttow_tow">
					暂无可用
				</view>
			</view> -->
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					合计
				</view>
				<view class="therecontenttow_tow" style="color:#FC5F69;">
					￥{{allamounts.price.meet_price}}
				</view>

			</view>
		</view>
		<view class="sixcontent" v-if="pay_type != 3">
			<view class="sixcontentone flex-between">
				<view class="sixcontent_one">
					支付方式
				</view>
			</view>
			<view class="sixcontenttow">
				<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
					<view class="sixcontenttowitemone flex-start">
						<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill">
						</image>
						<text class="sixcontenttowitemonetext">微信支付</text>
					</view>
					<view class="flex-start">
						<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>

					</view>
				</view>
				<view class="sixcontenttowitem flex-between" @click="clickselect(2)"
					v-if="allamounts.balance.money != '0.00'">
					<view class="sixcontenttowitemone flex-start">

						<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill">
						</image>
						<text class="sixcontenttowitemonetext">余额支付</text>
					</view>
					<view class="flex-start">
						<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="fourcontent">
			<view class="fourcontentone flex-start">
				<view class="fourcontent_one">
					购买须知：
				</view>
			</view>
			<view class="fourcontenttow flex-colum-start">
				<view class="" v-html="datalist.purchase">

				</view>
			</view>
		</view>
		<view :style="{height:height}">

		</view>
		<view class="fixedview flex-between">
			<view class="fixedview_one flex-start">
				<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>{{allamounts.price.meet_price}}
				</view>
			</view>
			<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
				立即付款
			</view>
		</view>
		<u-popup :show="showpopup" @close="closepopup" mode="center" :round="10">
			<view class="u-popupflex-colum flex-colum">
				<view class="u-popupflex-columview">
					请输入支付密码
				</view>
				<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
			</view>
		</u-popup>
		<u-popup :show="popupshow" @close="popupclose" :round="10">
			<view class="classpopupshow flex-colum">
				<view class="classpopupshowbox flex-between">
					<view class="flex-colum-start">
						<text class="classpopupshowboxflex-colum_one">房间数量</text>
					</view>
					<view class="classpopupshowboxnumber">
						<u-number-box v-model="among" :min="0" :max="10">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 50px;text-align: center;" class="input">{{among}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkin_time:'14:00',
				adult: 1, //可住成人
				children: 0, //可住儿童
				bed: 1, //床位
				among: 1, //间数
				showpopup: false,
				popupshow: false, //选择人数
				user_y_frequshow: true,
				ucodeinputvalue: '',
				textareavalue: '',
				height: '',
				upperlist: {},
				hotel_id: '',
				is_sec: 0,
				fullname: [{
					name: ""
				}],
				elist: {
					people: {
						nickname: '',
						id: ''
					}
				},
				lists: {
					long: '', //多少天
					start: '',
					end: '',
					weekstart: '',
					weekend: '',
				},
				mobile: uni.cache.get('loginuser').userinfo.mobile,
				datalist: {
					sec: {
						is_store_vip: '',
						is_user_vip: '',
						user_y_frequ: '',
						user_z_frequ: ''
					},
					balance: {
						pre_price: ''
					},
					wechat: {
						wechat_money: {
							money_str: ""
						}
					},
					balance: {
						balance_money: {
							money_str: ""
						}
					}
				},
				pay_type: 1,
				allamounts: {
					price: {},
					balance: {}
				},
			}
		},
		async onLoad(e) {
			this.hotel_id = e.hotel_id
			this.lists.start = e.start_time
			this.lists.end = e.end_time
			this.lists.long = e.long
			this.lists.weekstart = this.getweekday(this.lists.start)
			this.lists.weekend = this.getweekday(this.lists.end)
			this.among = e.number //间数
			this.adult = e.adult, //可住成人
				this.children = e.children //可住儿童
			this.add()
			this.reservationhoteldetial()
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		methods: {
			add() {
				this.fullname = []
				for (let i = 0; i < this.among; i++) {
					this.fullname.push({
						"name": '',
					})
				}
			},
			async reservationhotelconfirm(e) { //获取他的价格
				let res = await this.api.reservationhotelconfirm({
					hotel_id: this.hotel_id,
					number: this.among,
					start_time: this.lists.start, //开始时间
					end_time: this.lists.end, //结束时间
				})
				this.allamounts = res
			},
			getweekday(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return week;
			},
			closepopup() {
				this.showpopup = false
			},
			popupclose() {
				this.reservationhoteldetial()
				this.popupshow = false
				this.add()
			},
			finish(e) {
				console.log(e)
				this.reservationmakenowsub()
			},
			async reservationhoteldetial() {
				let res = await this.api.reservationhoteldetial({
					hotel_id: this.hotel_id,
					start_time: this.lists.start, //开始时间
					end_time: this.lists.end, //结束时间
					among: this.among //
				})
				try {
					if (res) {
						this.elist = res
						this.elist.house_details = res.house_details.replace(/\<img/g,
							'<img style="max-width:100%;height:auto" ');
						this.reservationhotelconfirm()
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			showpopupclick() {
				if (this.pay_type == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.fullname = this.fullname.map(user => user.name)
					this.reservationmakenowsub()
					return false;
				} else {
					if (this.pay_type == 2) {
						if (this.elist.sec_password == 0) {
							uni.showModal({
								title: '提示',
								content: '您目前没有设置密码，请先设置支付密码',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/my/setup/repairpassword'
										});
									} else if (res.cancel) {}
								}
							});
						} else {
							this.showpopup = true
						}
					}
				}
			},
			async reservationmakenowsub() {
				var datareslane = await this.api.reservationhotelsub({
					hotel_id: this.hotel_id,
					number: this.among, //房间数量
					checkin_number: this.adult + this.children, //入住人数
					checkin_username: this.fullname.toString(), //入住人姓名
					checkin_mobile: this.mobile, //入住人联系电话
					checkin_time: this.checkin_time, //入住人到店时间
					start_time: this.lists.start, //开始时间
					end_time: this.lists.end, //离店时间
					notes: '', //备注
					pay_type: this.pay_type, //1 微信 2余额卡
				})
				console.log(datareslane)
				this.fullname = [{
					name: ""
				}]
				if (datareslane.order_id) {
					let res = await this.api.reservationhotelgetpay({
						order_id: datareslane.order_id,
						password: this.ucodeinputvalue
					}) //判断是否支付成功
					this.ucodeinputvalue = ''
					if (res.pay_status == 0) {
						this.showpopup = false
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							partnerid: res.pay_data.payAppId, // 微信支付商户号
							timeStamp: res.pay_data.payTimeStamp, // 时间戳（单位：秒）
							nonceStr: res.pay_data.paynonceStr, // 随机字符串
							package: res.pay_data.payPackage, // 固定值
							signType: res.pay_data.paySignType, //固定值
							paySign: res.pay_data.paySign, //签名
							success: (res) => {
								uni.showToast({
									title: "支付成功"
								})
								uni.redirectTo({
									url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
								});
							},
							fail: (err) => {
								setTimeout(res => {
									uni.showToast({
										icon: 'none',
										title: '支付失败'
									})
									uni.hideLoading()
								}, 2000)
								uni.redirectTo({
									url: "/pages/my/order/index?e=" + 1,
								});
							}
						});
						// #endif	
					} else {
						uni.redirectTo({
							url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
						});
					}
				} else {
					uni.showToast({
						title: res.message || res.msg,
						icon: "none",
						success() {
							setTimeout(res => {
								// if (options.toast) {
								uni.hideLoading()
								// }
							}, 2000)
						}
					})
				}

			},
			clickselect(b) {
				this.pay_type = b
			},
		},
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.fixedview')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = (ele.height) + "px";
						that = null;
					}
				})
			}).exec();
		},
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.content {
		padding: 32rpx 28rpx;

		.onecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 16rpx;
			border-radius: 12rpx;

			.onecontentone {
				.onecontent_one {
					.onecontenttowthere {
						.positionfixedbox {
							width: 100%;
							background: #ffffff;
							border-radius: 22rpx;

							.positionfixedbox_one {
								flex: auto;

								.positionfixedbox_onebox_box::before {
									position: absolute;
									content: '';
									display: inline-block;
									width: 10rpx;
									left: -10rpx;
									top: 50%;
									transform: translateY(-50%);
									height: 1rpx;
									background: #76903C;
								}

								.positionfixedbox_onebox_box::after {
									position: absolute;
									right: -10rpx;
									top: 50%;
									transform: translateY(-50%);
									content: '';
									display: inline-block;
									width: 10rpx;
									height: 1rpx;
									background: #76903C;
								}

								.positionfixedbox_onebox_box {
									margin: 0 40rpx;
									position: relative;
									width: 50rpx;
									height: 40rpx;
									background: #F6FAF2;
									border-radius: 14rpx;
									border: 2rpx solid #76903C;
									font-size: 28rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: bold;
									color: #76903C;
									text-align: center;
									line-height: 40rpx;
								}

								.positionfixedbox_onebox {
									text:nth-child(1) {
										font-size: 28rpx;
										height: 40rpx;
										line-height: 40rpx;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										color: #333333;
									}

									text:nth-child(2) {
										margin-left: 10rpx;
										height: 40rpx;
										line-height: 40rpx;
										font-size: 24rpx;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										color: #666666;
									}
								}
							}

							.positionfixedbox_tow::before {
								content: '';
								margin-right: 26rpx;
								display: inline-block;
								width: 0rpx;
								height: 40rpx;
								opacity: 1;
								border: 2rpx solid #707070;
							}

							.positionfixedbox_tow {
								height: 48rpx;
								line-height: 48rpx;
								font-size: 28rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								color: #333333;
							}
						}
					}
				}
			}

			.onecontenttow {
				width: 100%;
				margin-top: 16rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.towindex_box_bouttn {
				width: 100%;
				margin-top: 16rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			.towcontentitemtow_one_there {
				width: 100%;
				margin-top: 16rpx;

				.towcontentitemtow_one_theretext {
					margin-left: 18rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #76903C;
				}
			}
		}

		.towcontent {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;
			margin-top: 32rpx;

			.towcontentone {
				padding: 8rpx 0;
				position: absolute;
				top: 0;
				left: 0;
				width: 150rpx;
				text-align: center;
				background: #333333;
				border-radius: 18rpx 0 0 0;
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #BFAB8D;
			}

			.towcontenttow {
				padding: 8rpx 0;
				position: absolute;
				top: 0;
				left: 136rpx;
				width: 142rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #432805;
				border-radius: 18rpx 0px 18rpx 0px;
				background: #E7C898;
			}

			.towcontentthere {
				padding: 80rpx 32rpx 32rpx 32rpx;

				.towcontentthere_tow {
					.towcontentthere_towtext {
						margin-left: 10rpx;
					}

					.towcontentthere_towview {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						border: 1px solid #000;
					}
				}

				.towcontentthere_one {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FC5F69;
					}
				}

			}
		}

		.fivecontent {
			width: 100%;
			border-radius: 12rpx;
			margin-top: 32rpx;

			.fivecontentitem:nth-child(2) {
				border: none !important;
			}

			.fivecontentitem {
				background: #FFFFFF;
				padding: 16rpx;
				border-bottom: 1px solid #F7F7F7;

				.fivecontentitem_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}

				.fivecontentitem_tow {
					width: 70%;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.therecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-top: 32rpx;

			.therecontenttow:nth-child(1) {
				margin-top: 0 !important;
			}

			.therecontenttow {
				margin-top: 32rpx;

				.therecontenttow_one {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.therecontenttow_tow {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.sixcontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.sixcontentone {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #F7F7F7;

				.sixcontent_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}

			.sixcontenttow {
				.sixcontenttowitem {
					margin-top: 16rpx;

					.sixcontenttowitemone {
						image {
							margin-left: 24rpx;
							width: 31.37rpx;
							height: 27.34rpx;
						}

						.sixcontenttowitemonetext {
							margin-left: 14rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}

		.fourcontent {

			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.fourcontentone {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #F7F7F7;

				.fourcontent_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

			}

			.fourcontenttow {
				margin-top: 16rpx;
				width: 100%;

				/deep/ img {
					width: 100%;
				}
			}
		}

		.u-popupflex-colum {
			padding: 80rpx 40rpx;
			border-radius: 50rpx;
			background: #FFFFFF;

			.u-popupflex-columview {
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #000;
				font-weight: bold;
				margin-bottom: 50rpx;
			}
		}

		.classpopupshow {
			padding-bottom: 60rpx;

			.classpopupshowbox {
				width: 100%;
				padding: 16rpx 60rpx;
				border-bottom: 2rpx solid #F0F0F0;

				.flex-colum-start {
					.classpopupshowboxflex-colum_one {
						font-size: 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.classpopupshowboxflex-colum_tow {
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
				}

				.classpopupshowboxnumber {
					.minus {
						padding: 20rpx;
						width: 24rpx;
						height: 24rpx;
						border-width: 1px;
						border-color: #CDCDCD;
						border-style: solid;
						border-top-left-radius: 100px;
						border-top-right-radius: 100px;
						border-bottom-left-radius: 100px;
						border-bottom-right-radius: 100px;
						@include flex;
						justify-content: center;
						align-items: center;
					}

					.input {
						padding: 0 10rpx;
					}

					.plus {
						padding: 20rpx;
						width: 24rpx;
						height: 24rpx;
						background-color: #555656;
						border-radius: 50%;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;
					}
				}

			}
		}

		.fixedview {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 24rpx 28rpx;
			background: #FFFFFF;

			.fixedview_one {
				.fixedview_oneone {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #333333;
				}

				.fixedview_onetow {
					font-size: 44rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #F45C4C;
					font-weight: bold;

					text {
						font-size: 28rpx;
					}
				}
			}

			.fixedview_tow {
				background: var(--bg-color-button);
				border-radius: 34rpx;
				padding: 10rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

		}
	}
</style>