<template>
	<view style="height: calc(100vh - 200rpx);overflow: auto;">
		<view class="colorfulBg">
			<view class="name">{{detail.name}}({{form.address}})</view>
			<view class="whiteItem">
				<view class="roomType">{{detail.messageObj?.roomName}}</view>
				<view class="roomInfo">
					<text>{{detail.messageObj.roomInfo}}</text>
				</view>
			</view>
		</view>

		<uni-forms>
			<view>
				<view class="t"> 入住时间 </view>
				<view class="whiteItem">
					<uni-forms-item label="入住时间">
						{{form.messageObj?.roomStayDate}}
					</uni-forms-item>
				</view>
			</view>
			<view>
				<view class="t"> 预订信息 </view>
				<view class="whiteItem">
					<uni-forms-item label="房间数">
						{{form.roomNum}}
					</uni-forms-item>
					
					<view v-for="(n,index) in form.rzUsers?.split(',')" :key="index">
						<uni-forms-item :label="`入住人${index+1}`">
							{{n}}
						</uni-forms-item>
					</view>
					<uni-forms-item label="预计到店">
							{{form.ddDate}}
					</uni-forms-item>
					<uni-forms-item label="联系电话">
						{{form.phone}}
					</uni-forms-item>
				</view>
				<view class="whiteItem" v-if="form.addNum>0">
					<uni-forms-item label="加床张数">
						{{form.addNum}}
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>
	</view>
	<view class="bbfix">
		<!-- 底部提交 -->
		<view class="price">
			 总价：
			<text>￥{{ detail.total }}</text>
		</view>
			<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
		<view class="subBtn" @click="unsubscribe" v-if="form.viewStatus == '5'"> 退订</view>
		<view class="subBtn gray" v-else-if="form.viewStatus == '4'" disabled> 已退订</view>
		<view class="subBtn gray" v-else-if="form.viewStatus == '2'" disabled> 已取消</view>
		<view class="subBtn gray" v-else-if="form.viewStatus == '7'" disabled> 退款审核中</view>	
		<view class="subBtn gray" @click="cancel" v-else-if="form.viewStatus == '0'" disabled> 取消订单</view>	
		<view class="subBtn gray" v-else disabled> 退订</view>	
		
	</view>
	

</template>

<script setup>
import {reactive,toRefs} from 'vue';
import {onLoad,onShow} from '@dcloudio/uni-app';
import * as hotel from '@/common/hotel.js';
	const data = reactive({
		form: {
			messageObj:{}
		},
		detail:{}
	})
	const {
		form,detail
	} = toRefs(data);
	
let orderId = ''
	onLoad((options)=>{
		if('detail' in options){
			detail.value = JSON.parse(decodeURIComponent(options.detail));
		}
		console.log(detail.value)
		orderId = options.orderId
		init()
	})	
function init(){
	getData()
}
function getData(){
	// hotel.getbilldetailbyId(orderId).then(res=>{
	hotel.getRoomBilldetailbyId(orderId).then(res=>{
		form.value = res.data
		form.value.messageObj = JSON.parse(form.value.message)
	})
}
function unsubscribe(){
	uni.showModal({
		title: '提示',
		content: ' 确定退订吗？',
		showCancel: true,
		success: function(res) {
			if (res.confirm) {
				uni.showLoading({
					title: '退订中...'
				});
				hotel.cancelOrder(orderId).then(respon=>{
					uni.hideLoading()
					if(respon.data){
						uni.showToast({
							title: '已退订',
							icon: 'none',
							duration: 2000
						})
						init()
					} else {
						uni.showToast({
							title: '退订失败，请稍候重试',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	})
}
function cancel(){
	uni.showModal({
		title: '提示',
		content: ' 确定取消订单吗？',
		showCancel: true,
		success: function(res) {
			if (res.confirm) {
				uni.showLoading({
					title: '操作中...'
				});
				hotel.cancelOrder2(orderId).then(respon=>{
					uni.hideLoading()
					if(respon.data){
						uni.showToast({
							title: '已取消',
							icon: 'none',
							duration: 2000
						})
						init()
					} else {
						uni.showToast({
							title: '取消失败，请稍候重试',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	})
}
</script>

<style lang="scss" scoped>
	:deep(.uni-forms-item__inner){padding-bottom: 10rpx;}
	:deep(.uni-forms-item__content){line-height: 36px;}
	.t{padding: 20rpx;}
	.hotel {
	}
	.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;}
		.tip{font-size: 28rpx;color: #E60012;}

	.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: 32rpx;
			color: #1EC886;border: 1px solid #1EC886;
			background: transparent;
			height: 60rpx;margin: 15rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
		}
		.subBtn.gray{color: #999;border: 1px solid #999;}
	}
	.ccitem{display: flex;justify-content: space-between;font-size: 28rpx;
	color: #666;margin: 0 0 10rpx;
		label{font-size: 32rpx;color: #000;}
		text{color: #1EC886;}
	}
	.colorfulBg{background:#1EC886;padding: 20rpx 10rpx 10rpx;
		.whiteItem{border-radius: 0;margin: 0;width: 730rpx;}
		.name{color: #fff;margin: 0 0 20rpx;}
	}
</style>