<template>
	<view class="content" :style="[theme]">
		<view class="onecontent">
			<view class="onecontentone flex-start">
				<view class="onecontent_one">
					预约项目
				</view>
				<view class="onecontent_tow">
					{{elist.title}}
				</view>
			</view>
			<view class="onecontenttow flex-start">
				<view class="onecontenttow_one">
					预约时间
				</view>
				<view class="onecontenttow_tow">
					{{elist.time}}
				</view>
			</view>
			<view class="onecontenttow flex-start" style="padding-bottom: 24rpx; border-bottom: 1px solid #F7F7F7;">
				<view class="onecontenttow_one">
					发型师
				</view>
				<view class="onecontenttow_tow">
					{{elist.people.nickname != ''?elist.people.nickname:'无'}}
				</view>
			</view>

		</view>
		<view class="towcontent" v-if="datalist.sec.is_store_vip ==1">
			<view class="towcontentone">
				商家会员卡
			</view>
			<view class="towcontenttow">
				享更多优惠
			</view>
			<view class="towcontentthere flex-between" @click="clickselects()">
				<view class="towcontentthere_one" v-if="datalist.sec.text_title">
					<text>{{datalist.sec.text_title}}</text>
				</view>
				<view class="towcontentthere_one" v-else>
					开通后享<text>更多优惠</text>
				</view>
				<view class="towcontentthere_tow flex-start">
					<text class="towcontentthere_towtext">{{datalist.sec.text}}</text>
					<u-icon v-if="is_sec == 1" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
					<view v-else class="towcontentthere_towview"></view>
				</view>
			</view>
		</view>
		<view class="towcontent" v-if="datalist.sec.is_user_vip ==1 && user_y_frequshow">
			<view class="towcontentone">
				商家会员卡
			</view>
			<view class="towcontenttow">
				享更多优惠
			</view>
			<view class="towcontentthere flex-between" @click="clickselectss()">
				<view class="towcontentthere_one" v-if="datalist.sec.text_title">
					<text>{{datalist.sec.text_title}}</text>
				</view>
				<view class="towcontentthere_one" v-else>
					开通后享<text>更多优惠</text>
				</view>
				<view class="towcontentthere_tow flex-start">
					<text v-if="pay_type != 3"
						class="towcontentthere_towtext">{{datalist.sec.user_y_frequ}}/{{datalist.sec.user_z_frequ}}次</text>
					<text v-if="pay_type == 3"
						class="towcontentthere_towtext">{{Number(datalist.sec.user_y_frequ) - Number(elist.number)}}/{{datalist.sec.user_z_frequ}}次</text>
					<u-icon v-if="pay_type == 3" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
					<view v-else class="towcontentthere_towview"></view>
				</view>
			</view>
		</view>
		<view class="therecontent">
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					预约人数
				</view>
				<view class="therecontenttow_tow">
					{{elist.number}}
				</view>
			</view>
			<view class="therecontenttow flex-between" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
				<view class="therecontenttow_one">
					会员折扣
				</view>
				<view class="therecontenttow_tow">
					-{{datalist.sec.pre_price || '0'}}
				</view>
			</view>
			<view class="therecontenttow flex-between" v-else>
				<view class="therecontenttow_one">
					会员折扣
				</view>
				<view class="therecontenttow_tow">
					￥{{datalist.balance.pre_price || '0'}}
				</view>
			</view>
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					原价
				</view>
				<view class="therecontenttow_tow">
					￥{{datalist.total_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;"
					v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
					￥{{datalist.sec.price}}
				</view>
				<view class="therecontenttow_tow" style="color:#FC5F69;" v-else>
					￥{{datalist.total_price}}
				</view>
			</view>
		</view>
		<view class="fivecontent">
			<view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					手机号码
				</view>
				<view class="fivecontentitem_tow">
					{{mobile}}
				</view>
			</view>
			<!-- <view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					姓名
				</view>
				<view class="fivecontentitem_tow">
					张雪
				</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="datalist.is_balance == 1 || datalist.balance_money<0 || datalist.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.details">

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

		</view>
		<view class="fixedview flex-between">
			<view class="fixedview_one flex-start" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
				<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>{{datalist.sec.price}}
				</view>
			</view>
			<!-- <view v-else> -->
			<view class="fixedview_one flex-start" v-if="pay_type == 1 && is_sec ==0">
				<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>￥{{datalist.wechat.wechat_money.money_str}}

				</view>
			</view>
			<view class="fixedview_one flex-start" v-if="pay_type == 2 && is_sec ==0">
				<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow flex-colum-start">
					<text>¥合计{{Number(datalist.balance.balance_money.money_str)+Number(datalist.balance.wechat_money)}}</text>
					<text style="font-size: 20rpx;">余额：{{datalist.balance.balance_money.money_str}}
						微信：{{datalist.balance.wechat_money}}</text>
				</view>
			</view>
			<view class="fixedview_one flex-start" v-if="is_sec == 1">
				<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>{{datalist.sec.price}}

				</view>
			</view>
			<!-- </view> -->
			<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
				立即付款
			</view>
		</view>


		<u-popup :show="showpopup" @close="closepopup" @open="openpopup" 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>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showpopup: false,
				user_y_frequshow: true,
				ucodeinputvalue: '',
				textareavalue: '',
				height: '',
				upperlist: {},
				order_id: '',
				is_sec: 0,
				elist: {
					people: {
						nickname: '',
						id: ''
					}
				},
				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
			}
		},
		async onLoad(e) {
			// this.elist = JSON.parse(optionItem)
			this.order_id = e.order_id
			let res = await this.api.reservationorderecho({
				order_id: e.order_id
			})
			if (res) {
				this.elist = res
				if (!this.elist.people) {
					this.elist.people = {
						nickname: '',
						id: ''
					}
				}
				if (Number(this.datalist.sec.user_y_frequ) + Number(this.elist.number) > this.datalist.sec
					.user_z_frequ) {
					this.user_y_frequshow == false
				} else {
					this.user_y_frequshow == true
				}
				this.okmakenowreservation()
			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		methods: {
			openpopup() {
				console.log('open');
			},
			closepopup() {
				this.showpopup = false
			},

			finish(e) {
				console.log(e)
				this.reservationmakenowsub()
			},
			showpopupclick() {
				if (this.pay_type == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.reservationmakenowsub()
					return false;
				} else {
					if (this.pay_type == 2 || this.datalist.sec.is_user_vip == 1) {
						if (this.datalist.is_vip_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.reservationmakenowsub({
					service_id: this.elist.store_service_id,
					number: this.elist.number,
					mobile: this.elist.mobile,
					remark: this.elist.remark,
					pay_type: this.pay_type,
					time: this.elist.time,
					people_id: this.elist.people.id != '' ? this.elist.people.id : 0,
					order_id: this.order_id,
					is_sec: this.is_sec
				})
				console.log(datareslane)
				if (datareslane.data) {
					let res = await this.api.paygetpayparams({
						order_id: datareslane.data.order_id,
						password: this.ucodeinputvalue
					}) //判断是否支付成功
					this.ucodeinputvalue = ''
					if (res.data.pay_status == 0) {
						this.showpopup = false
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							partnerid: res.data.pay_data.payAppId, // 微信支付商户号
							timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
							package: res.data.pay_data.payPackage, // 固定值
							signType: res.data.pay_data.paySignType, //固定值
							paySign: res.data.pay_data.paySign, //签名
							success: (res) => {
								uni.showToast({
									title: "支付成功"
								})
								uni.redirectTo({
									url: "/pages/order/ordersuccess?id=" + datareslane.data
										.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.data.order_id,
						});
					}
				} else {
					uni.showToast({
						title: res.message || res.msg,
						icon: "none",
						success() {
							setTimeout(res => {
								// if (options.toast) {
								uni.hideLoading()
								// }
							}, 2000)
						}
					})
				}

			},
			clickselects() {
				this.is_sec = this.is_sec == 1 ? 0 : 1
				console.log(this.is_sec)
				this.okmakenowreservation()
			},
			clickselectss() {
				this.pay_type = this.pay_type == 3 ? 1 : 3
			},
			clickselect(b) {
				this.pay_type = b
				this.okmakenowreservation()
			},
			async okmakenowreservation() {
				let res = await this.api.okmakenowreservation({
					service_id: this.elist.store_service_id,
					number: this.elist.number,
					order_id: this.order_id
				})
				if (res) {
					this.datalist = res.vip
					this.datalist.details = res.vip.details.replace(/\<img/g,
						'<img style="max-width:100%;height:auto" ');

				}
			}
		},
		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: 32rpx;
			border-radius: 12rpx;

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

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

				.onecontent_tow {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-left: 32rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.onecontenttow {
				margin-top: 24rpx;

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

				.onecontenttow_tow {
					margin-left: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.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%;
			background: #FFFFFF;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-top: 32rpx;

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

			.fivecontentitem {
				padding: 18rpx 0;
				border-bottom: 1px solid #F7F7F7;

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

				.fivecontentitem_tow {
					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;
			}
		}

		.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>