<template>
	<view style="height: calc(100vh - 160rpx);overflow: auto;">
		<uni-forms>
			<view class="colorfulBg">
				<view>
					<label>接站地点</label>
					<text>{{detail.name?.split('——')[0]}}</text>
				</view>
				<view><image src="./img/cargo.png" style="width: 100rpx;height: 100rpx;"></image></view>
				<view>
					<label>送站地点</label>
					<text>{{detail.name?.split('——')[1]}}</text>
				</view>
			</view>
			<view class="whiteItem" v-if="form.pickUpBo?.carsList&&form.pickUpBo.carsList.length>0&&form.pickUpBo.total>0">
				<uni-forms-item label="接站时间">
					{{form.pickUpBo.revTime}}
				</uni-forms-item>
			
				<view class="carLine"  v-for="(car,index) in form.pickUpBo.carsList" :key="index">
					<view v-if="car.num > 0">
						<label>{{car.name}}</label>
						<view class="tagline">
							<text class="tag" v-if="car.carSeat == '0'">四座以下</text>
							<text class="tag" v-if="car.carSeat == '1'">4-5座</text>
							<text class="tag" v-if="car.carSeat == '2'">6-7座</text>
							<text class="tag" v-if="car.carSeat == '3'">其他</text>
							<text class="tag">{{car.carColor}}  </text>
							<text class="tag" v-if="car.checkOut==1">可送站  </text>
							<text class="tag" v-if="car.checkIn==1">可接站 </text>
						</view>
					</view>
			
					<text v-if="car.num > 0">{{car.num}}辆 * ¥{{car.price}}</text>
				</view>
				
				<uni-forms-item label="联系人">
					{{form.pickUpBo.contacts}}
				</uni-forms-item>
				<uni-forms-item label="联系电话" >
					{{form.pickUpBo.phone}}
				</uni-forms-item>
				<uni-forms-item label="人数" >
					{{form.pickUpBo.count}}
				</uni-forms-item>
				<uni-forms-item label="航班/火车班次" >
					{{form.pickUpBo.no}}
				</uni-forms-item>
				<uni-forms-item label="接机/接站地点" >
					{{form.pickUpBo.noAddress}}
				</uni-forms-item>
				<uni-forms-item label="送达地点" >
					{{form.pickUpBo.deliveryAddress}}
				</uni-forms-item>
				
				<uni-forms-item label="备注" v-if="form.pickUpBo.remarks">
					{{form.pickUpBo.remarks}}
				</uni-forms-item>
			</view>
			
			<view class="whiteItem" v-if="form.dropOffBo?.carsList&&form.dropOffBo.carsList.length>0&&form.dropOffBo.total>0">
				<uni-forms-item label="用车时间">
					{{form.dropOffBo.revTime}}
				</uni-forms-item>
				
				<view class="carLine"  v-for="(car,index) in form.dropOffBo.carsList" :key="index">
					<view v-if="car.num > 0">
						<label>{{car.name}}</label>
						<view class="tagline">
							<text class="tag">{{car.carSeat}}</text>
							<text class="tag">{{car.carColor}}</text>
							<text class="tag" v-if="car.checkOut==1">可送站  </text>
							<text class="tag" v-if="car.checkIn==1">可接站 </text>
						</view>
					</view>
				
					<text v-if="car.num > 0">	{{car.num}}辆 * ¥{{car.price}}</text>
				</view>
				<uni-forms-item label="联系人" >
					{{form.dropOffBo.contacts}}
				</uni-forms-item>
				<uni-forms-item label="联系电话" >
					{{form.dropOffBo.phone}}
				</uni-forms-item>
				<uni-forms-item label="备注" v-if="form.dropOffBo.remarks">
					{{form.dropOffBo.remarks}}
				</uni-forms-item>
			</view>
			
			<view style="height: 80rpx;"></view>

		</uni-forms>
	</view>
	<view class="bbfix">
		<!-- 底部提交 -->
		<view class="price">
			总价：
			<text>￥{{ detail.total }}</text>
		</view>
		<!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
		<view class="subBtn" @click="cancel" v-if="form.viewStatus == '5'"> 退订</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:{},
			pickUpBo: {
				total:0,
				carsList:[]
			},
			dropOffBo: {
				total:0,
				carsList:[]
			}
		},
		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.getCarBilldetailbyId(orderId).then(res=>{
		form.value = res.data
		// form.value.messageObj = JSON.parse(form.value.message)
		var m1 = 0
		var m2 = 0
		if(form.value.pickUpBo){
			for(var car of form.value.pickUpBo.carsList){
				car.total = car.num*car.price
				m1 += car.total
			}
		}
		if(form.value.dropOffBo){
			for(var car of form.value.dropOffBo.carsList){
				car.total = car.num*car.price
				m2 += car.total
			}
		}
		form.value.pickUpBo.total = m1
		form.value.dropOffBo.total = m2
	})
}
function cancel(){
	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
						})
					}
				})
			}
		}
	})
	

}
</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 {display: flex;justify-content: space-around;align-items: center;
		background: #1EC886;
		padding: 30rpx 10rpx 20rpx;
		color: #fff;text-align: center;
		label{display: block;font-size: 26rpx;margin: 0 0 10rpx;}
		margin: 0 0 30rpx;
	}
	.carLine{display: flex;justify-content: space-between;margin:0 0 20rpx;align-items: top;
	    background: #f8f8f8; padding: 20rpx 0 20rpx 20rpx;
		&>text{font-size: 26rpx;color: #333;}
		label{font-size: 28rpx;}
		.tagline{margin: 0;
			.tag{font-size: 20rpx;display: inline-block;padding: 2rpx 8rpx;}
		}
		// text{font-size: 30rpx;}
	}
</style>