<template>
	<view style="padding-bottom: 60rpx;">
		<view class="whiteItem" v-if="type == 0">
			<view class="tt">培训费</view>
			<!-- <view class="pp">培训内容：{{form.kpExplain}}</view> -->
			<view class="pp">报到时间：{{form.reportDate?.substring(0, 10)}}</view>
			<view class="pp">培训时间：{{form.trainNum}}天</view>
			<view class="pp">培训周期：{{form.trainStart?.substring(0, 10)}} — {{form.trainEnd?.substring(0, 10)}}</view>
			<!-- <view class="pp">培训地点：{{form.address}}</view> -->
			
			<view class="foot">
				<view>金额小计</view>
				<view class="price">¥{{form.trainFee}}</view>
			</view>
		</view>

		<view class="whiteItem" v-if="type == 0||type == 1">
			<view class="tt">住宿费</view>
			<view class="pp">入住时间：{{form.trainStart?.substring(0, 10)}} — {{form.trainEnd?.substring(0, 10)}}</view>
			<view class="pp">房费：{{form.stayFee}}</view>
			
			<view class="foot">
				<view>金额小计</view>
				<view class="price">¥{{form.stayFee}}</view>
			</view>
		</view>

		<view class="whiteItem" v-if="type == 0||type == 2">
			<view class="tt">餐费</view>
			<view class="pp">就餐次数：{{form.repastNum}}次</view>
			<view class="pp">餐费：{{form.repastFee}}</view>
			
			<view class="foot">
				<view>金额小计</view>
				<view class="price">¥{{form.repastFee}}</view>
			</view>
		</view>

		<view class="fixedBottom" v-if="type == 0">
			<view>总金额：<text class="price">¥{{totalMoney}}</text></view>
			<button class="subBtn btn" @click="submit">费用缴纳</button>
		</view>
	</view>
	
</template>

<script setup>
	import {
		reactive,
		toRefs,ref,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,onPullDownRefresh
	} from '@dcloudio/uni-app';
	const app = getApp();
	const totalMoney = ref(0);
	const type = ref(0);
	const loading = ref(false);
	const data = reactive({
		id: null,
		form:{},
		allNow:false,
		isApply: '0'
	})
	const {
		id,form,allNow,isApply
	} = toRefs(data);
	onLoad(option => {
		if (option.id) {
			id.value = option.id
		}
		if(option.type) {
			type.value = option.type
		}
	})
	onShow(option => {
		if (app.globalData.isLogin) {
			getData()
		} else {
			app.firstLoadCallback = () => {
				getData()
			};
		}
	})
	
	function getData() {
		hotel.getTrainDetail(id.value).then(res => {
			form.value = res.data
			totalMoney.value = (Number(form.value.stayFee)+Number(form.value.repastFee)+Number(form.value.trainFee)).toFixed(2)
			uni.setNavigationBarTitle({
				title: form.value.name
			});
		})
	}

	function submit(){
		uni.showModal({
			title: '提示',
			content: '确定提交订单吗',
			success: function(res) {
				if (res.confirm) {
					hotel.submitOrder({trainId:id.value}).then(res=>{
						let path =
							`/pages_hotel/hotel/pay?money=${res.data.total}&orderId=${res.data.id}`;
						uni.redirectTo({
							url: path
						});
					})
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.price{color: orange;}
:deep(.uni-list-item__container){align-items: center;padding: 12rpx 30rpx;}
.foot{justify-content: space-between;
	display: flex;border-top: 1px dashed #e5e5e5;padding: 30rpx 0 0;
	font-size: 28rpx;
	.price{font-size: 34rpx;color: orange;}
}
.fixedBottom{padding: 30rpx;display: flex;align-items: center;justify-content: space-between;}
		.subBtn {
			font-size: 36rpx;
			color: #ffffff;
			background: #ff8124;
			margin: 0;
			padding: 0 30rpx;
		}
.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;
	.tt {line-height: 1;border-left: 4rpx solid #1EC886;color: #1EC886;padding-left: 14rpx;margin-bottom: 30rpx;}
		.m1 {
			width: 314rpx;
			height: 225rpx;
		}

		.m2 {
			width: 315rpx;
			height: 103rpx;
			float: right;
		}

		.m3 {
			width: 315rpx;
			height: 103rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.qbox {
		height: 225rpx;
		position: relative;
		width: 100%;
	}
	.slot-image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}
	.kfbtn{font-size: 30rpx;background: transparent;padding: 0 0 0 50%;    margin-right: -10rpx;}
	
	.kfbtn::after{
	  border: none;
	}
	.formore{border-top: 1px solid #eee;text-align: center;color: #1EC886;
font-size: 24rpx;padding: 20rpx 0 0;}
.autoHeight{height: auto;}
</style>