<template>
	<view class="page">
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar" :custom-back="btns">
		</u-navbar>
         <image src="https://api.ccttiot.com/smartmeter/img/static/u3lZnmhqSqkMd7gHKtMD" mode="" class="imgbj"></image>
         <view class="boxda">
         	<view class="timeduan">
         		<view class="one">
         			<view class="top">
         				{{orderobj.reserveStartTime == null ? '--' : orderobj.reserveStartTime.slice(10,16)}}
         			</view>
         			<view class="bot">
         				{{orderobj.reserveStartTime == null ? '--' : orderobj.reserveStartTime.slice(0, -8)}}
         			</view>
         		</view>
         		<view class="two">
         			<view class="top">
         				共{{orderobj.hours == null ? '--' : orderobj.hours}}小时
         			</view>
         			<view class="bot">
         				<image src="https://api.ccttiot.com/smartmeter/img/static/u6L1mhUywZHY1lwqntik" mode=""></image>
         			</view>
         		</view>
         		<view class="one">
         			<view class="top">
         				{{orderobj.reserveEndTime == null ? '--' : orderobj.reserveEndTime.slice(10,16)}}
         			</view>
         			<view class="bot">
         				{{orderobj.reserveEndTime == null ? '--' : orderobj.reserveEndTime.slice(0, -8)}}
         			</view>
         		</view>
         	</view>
         	<view class="dianpu">
         		<view class="top">
         			<view class="lt">
         				【{{orderobj.storeName == null ? '--' : orderobj.storeName}}】
         			</view>
         			<view class="rt" @click="btndaohang">
         				<image src="https://api.ccttiot.com/smartmeter/img/static/u5yJpwCHAhqWlEwpbRsu" mode=""></image>
         			</view>
         		</view>
         		<view class="bd">
         		    <image :src="orderobj.picture" mode=""></image>
         			<view class="rts">
         				<view class="" style="margin-top: 0;">
         					预定包厢：{{orderobj.roomName == null ? '--' : orderobj.roomName}}
         				</view>
         				<view class="">
         					下单时间：{{orderobj.createTime == null ? '--' : orderobj.createTime}}
         				</view>
         				<view class="">
         					开始时间：{{orderobj.reserveStartTime == null ? '--' : orderobj.reserveStartTime}}
         				</view>
         				<view class="">
         					结束时间：{{orderobj.reserveEndTime == null ? '--' : orderobj.reserveEndTime}}
         				</view>
         			</view>
         		</view>
         		<view class="bianh">
         			<view class="bianh_val">
         				<text>订单编号：</text>
         				<text>{{orderobj.orderNo == null ? '--' : orderobj.orderNo}}</text>
         			</view>
         			<view class="bianh_val">
         				<text>支付类型：</text>
         				<text v-if="orderobj.payType == 'wx'">微信支付</text>
         				<text v-if="orderobj.payType == 'ye'">门店余额</text>
         			</view>
         			<view class="bianh_val">
         				<text>付款金额：</text>
         				<text>￥{{orderobj.price == null ? '--' : orderobj.price}}({{orderobj.hours == null ? '--' : orderobj.hours}}小时套餐)</text>
         			</view>
         		</view>
         	</view>
         	<view class="zizhu" v-if="orderobj.status == 2 || orderobj.status == 3">
         		<view class="top">
         			<view class="lt">
         				自助操作
         			</view>
         		</view>
         		<view class="ckwifi">
         			<view class="lt">
         				<image src="https://api.ccttiot.com/smartmeter/img/static/uG0ADmcyhSCuOTSFZtKC" mode=""></image> 门店	WIFI
         			</view>
         			<view class="rt" @click="btnwifi">
         				查看
         			</view>
         		</view>
         		<view class="imglist">
         			<image @click="btnkdm" src="https://api.ccttiot.com/smartmeter/img/static/uk2rqBfNYDmDwcEPdojx" mode=""></image>
         			<image @click="btnkbxm" src="https://api.ccttiot.com/smartmeter/img/static/usV5AH49VApLz92J1w19" mode=""></image>
         			<!-- <image v-if="flag" @click="btnhuanzuo" src="https://api.ccttiot.com/smartmeter/img/static/uv6wjMeqhbc07ZWGkdS7" mode=""></image> -->
         			<image v-if="orderobj.userId == user.userId" @click="btnxudan" src="https://api.ccttiot.com/smartmeter/img/static/utXKDITJDghq6PRyLWTA" mode=""></image>
         			<button v-if="orderobj.userId == user.userId" open-type="share"><image src="https://api.ccttiot.com/smartmeter/img/static/uJrkufnmzJju3xpmxqFE" mode=""></image></button>
         		</view>
				<!-- <view class="top">
					<view class="lt">
						设备控制
					</view>
					<view class="kz">
						<view class="lt">
							房间灯 <text>已开启</text>
						</view>
						<view class="rt">
							<u-switch v-model="checked"></u-switch>
						</view>
					</view>
				</view> -->
         	</view>
         	<view class="tishi" v-if="orderobj.status == 2 || orderobj.status == 3">
         		<view class="top">
         			温馨提示
         		</view>
         		<view class="wenzi">
         			1、订单转发好友后，好友也可直接自助开门进入 门店、包厢；
         		</view>
         		<view class="wenzi">
         			2、订单续单可能碰到后续时间段被人预定而无法 续单的情况，请提前规划好预约时间段；
         		</view>
         		<view class="wenzi">
         			3、如果临时有事无法到店消费，请在订单开始前 进行取消订单操作，开始后，不支持退款，请合 理规划您的时间；
         		</view>
         		<view class="wenzi">
         			4、若您迟到，订单仍按预定开始时间计费，迟到 部分时长不进行退款，不进行延期，请合理规划 预定时间段；
         		</view>
         		<view class="wenzi">
         			5、请勿大声喧哗，订单结束离店请爱护财务。
         		</view>
         	</view>
         </view>
		<view class="ljwifi" v-if="wififlag">
			<view class="cuo" @click="wififlag = false">
				×
			</view>
			<view class="name">
				WIFI连接
			</view>
			<view class="tanx">
				<view class="one">
					{{orderobj.wifi == null ? '--' : orderobj.wifi}}
					 <view class="" style="font-size: 16rpx;">
					 	{{orderobj.wifiPassword == null ? '--' : orderobj.wifiPassword}}
					 </view>
				</view>
				<view class="two">
					<text class="fz" @click="copy">复制密码</text>
					<text class="lj" @click="onAutolink">一键连接</text>
				</view>
			</view>
		</view>
		<view class="mask" v-if="wififlag" @click="wififlag = false"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				wififlag:false,
				orderNo:'',
				orderobj:{},
				flag:true,
				user:{},
				checked:false,
				viewType:''
			}
		},
		onLoad(option) {
			if(option.orderNo){
				this.orderNo = option.orderNo
				this.viewType =  option.viewType
				this.getxq()
			}else{
				this.orderNo = option.orderNowx
				this.getxqs()
			}
		},
		onShow() {
            this.getinfo()
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '共享时光屋',
			  imageUrl:'https://api.ccttiot.com/smartmeter/img/static/uS8TEdeETwvOdHDswc9c',
		      path: '/page_user/dingdanxq?orderNowx=' + this.orderNo
		    }
		},
		methods: {
			// 查询个人信息
			getinfo() {
				this.$u.get(`/getAppInfo`).then(res => {
					if (res.code == 200) {
						this.user = res.user
					}
				})
			},
			
			// 自定义导航栏返回
			btns(){
				uni.reLaunch({
					url:'/pages/tj'
				})
			},
			// 点击开店门
			btnkdm(){
				this.$u.get(`app/store/openGate/${this.orderobj.storeId}`).then(res => {
					if (res.code == 200) {
						uni.showToast({
						  title: '开启店门成功',
						  icon: 'success',
						  duration: 2000
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击开包厢门
			btnkbxm(){
				this.$u.get(`app/room/openRoomGate/${this.orderobj.roomId}`).then(res => {
					if (res.code == 200) {
						uni.showToast({
						  title: '开启包厢门成功',
						  icon: 'success',
						  duration: 2000
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 请求订单详情(被分享人)
			getxqs(){
				let data = {
					orderNo:this.orderNo
				}
				this.$u.get(`/app/shareOrder?orderNo=${this.orderNo}`,data).then(res => {
					if (res.code == 200) {
						this.orderobj = res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 请求订单详情
			getxq(){
				let data = {
					orderNo:this.orderNo
				}
				this.$u.get(`/appVerify/orderInfo?orderNo=${this.orderNo}`,data).then(res => {
					if (res.code == 200) {
						this.orderobj = res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击进行导航
			btndaohang(){
				uni.openLocation({
				   latitude:this.orderobj.lat,//纬度-目的地/坐标点
				   longitude:this.orderobj.lng,//经度-目的地/坐标点
				   name:this.orderobj.storeName,//地点名称
				   address:this.orderobj.storeAddress//详细地点名称
				})
			},
			// 点击复制wifi密码
			copy() {
			 	uni.setClipboardData({
			 	    data: this.orderobj.wifiPassword,
			    	success: function () {
			        	uni.showToast({
			        		title: '复制成功',
			        		icon: 'success',
							duration:2000
			        	})
			    	}
			 	})
			 },
			 // 点击一键连接wifi
			 onAutolink(){
			     let wifiName = this.orderobj.wifi
			     let wifiPassword = this.orderobj.wifiPassword
			 	uni.startWifi({
			 		success:e=>{
			 			uni.connectWifi({
			 				SSID:wifiName,  // SSID就是账号
			 				password:wifiPassword, // 密码
			 				complete:complete=>{
			 					console.log("complete",complete)
								uni.showToast({
									title: '连接成功',
									icon: 'success',
									duration:2000
								})
			 				}
			 			})
			 	    },
			 	})
			},
			// 点击查看wifi
			btnwifi(){
				this.wififlag = true
			},
			// 换座
			btnhuanzuo(){
				uni.navigateTo({
					url:'/page_user/huanzuo'
				})
			},
		    // 续单
			btnxudan(){
				uni.navigateTo({
					url:'/page_user/xudan?roomId=' + this.orderobj.roomId + '&orderNo=' + this.orderNo + '&viewType=' + this.viewType
				})
			}
		}
	}
</script>

<style lang="scss">
	.boxda{
		overflow: scroll;
		width: 100%;
		height: 88vh;
		padding-bottom: 200rpx;
		box-sizing: border-box;
	}
	page {
		background: #fff;
		padding-bottom: 64rpx;
		box-sizing: border-box;
		.mask{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #000;
			opacity: .5;
		}
		.ljwifi{
			width: 660rpx;
			height: 240rpx;
			// line-height: 120rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			border-radius: 10rpx;
			padding-top: 20rpx;
			.cuo{
				font-size: 46rpx;
				position: fixed;
				top: 0;
				right: 20rpx;
			}
			.name{
				width: 100%;
				height: 60rpx;
				text-align: center;
				font-size: 36rpx;
			}
			.tanx{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #eee;
				height: 110rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				border-radius: 10rpx;
				.one{
					text-align: center;
				}
				.two{
					.fz{
						padding: 10rpx 20rpx;
						border: 1px solid #000;
						text-align: center;
						border-radius: 50rpx;
						margin-left: 10rpx;
					}
					.lj{
						padding: 10rpx 20rpx;
						border: 1px solid #48893B;
						background-color: #48893B;
						text-align: center;
						border-radius: 50rpx;
						margin-left: 10rpx;
						color: #fff;
					}
				}
			}
		}
		.tishi{
			width: 674rpx;
			height: 642rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: auto;
			margin-top: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.top{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				border-left: 8rpx solid #48893B;
				padding-left: 14rpx;
				box-sizing: border-box;
				border-radius: 4rpx;
			}
			.wenzi{
				font-size: 28rpx;
				color: #3D3D3D;
				margin-top: 24rpx;
			}
		}
		.zizhu{
			width: 674rpx;
			max-height: 572rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: auto;
			margin-top: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.imglist{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				image{
					width: 288rpx;
					height: 78rpx;
					margin-top: 20rpx;
				}
				button{
					width: 288rpx;
					height: 78rpx;
					margin-top: 20rpx;
					margin-left: 34rpx;
					position: relative;
					border-radius: 50rpx;
					image{
						margin-top: 0;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			.ckwifi{
				width: 614rpx;
				height: 104rpx;
				background: #F1F1F1;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:  0 28rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				.lt{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
					image{
						width: 60rpx;
						height: 60rpx;
						margin-right: 36rpx;
					}
				}
				.rt{
					width: 158rpx;
					height: 64rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #48893B;
					font-size: 36rpx;
					color: #48893B;
					text-align: center;
					line-height: 64rpx;
				}
			}
			.top{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				border-left: 8rpx solid #48893B;
				border-radius: 4rpx;
				padding-left: 12rpx;
			}
		}
		.dianpu{
			width: 674rpx;
			max-height: 526rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding:30rpx;
			box-sizing: border-box;
			margin: auto;
			margin-top: 24rpx;
			.bianh{
				margin-top: 36rpx;
				.bianh_val{
					font-size: 26rpx;
					color: #272536;
					margin-top: 18rpx;
					display: flex;
					justify-content: space-between;
				}
			}
			.bd{
				display: flex;
				margin-top: 40rpx;
				image{
					width: 176rpx;
					height: 176rpx;
					border-radius: 10rpx;
					margin-right: 28rpx;
				}
				.rts{
					view{
						font-size: 26rpx;
						color: #3D3D3D;
						margin-top: 16rpx;
					}
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lt{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					border-left: 8rpx solid #48893B;
					border-radius: 4rpx;
				}
				.rt{
					image{
						width: 200rpx;
						height: 50rpx;
					}
				}
			}
		}
		.timeduan{
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;
			padding: 0 38rpx;
			box-sizing: border-box;	
			.two{
				text-align: center;
				.top{
					font-weight: 600;
					font-size: 40rpx;
					color: #3D3D3D;
				}
				.bot{
					image{
						width: 208rpx;
						height: 8rpx;
					}
				}
			}
			.one{
				text-align: center;
				.top{
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
				.bot{
					font-size: 28rpx;
					color: #3D3D3D;
					margin-top: 4rpx;
				}
			}
		}
		.imgbj{
			width: 750rpx;
			height: 424rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

</style>