<template>
	<view :style="orderType=='all'?'':'height: calc(100vh - 200rpx);overflow: auto;'">
		<view class="colorfulBg">
			<view class="name">{{form.name}}</view>
			<view class="whiteItem" v-if="orderType==0||orderType=='all'">
				<view class="pp">报到时间：{{form.reportDate?.substring(0, 10)}}</view>
				<view class="pp">培训周期：{{form.trainStart?.substring(0, 10)}} — {{form.trainEnd?.substring(0, 10)}}</view>
				<!-- <view class="pp">培训地点：{{form.address}}</view> -->
			</view>

			<view class="whiteItem" v-if="orderType==1||orderType=='all'">
				<view class="pp">入住时间：{{form.trainStart?.substring(0, 10)}} — {{form.trainEnd?.substring(0, 10)}}</view>
				<view class="pp">房费：{{form.stayFee}}</view>

			</view>
			<view class="whiteItem" v-if="orderType==2||orderType=='all'">
				<view class="pp">就餐次数：{{form.repastNum}}次</view>
				<view class="pp">餐费：{{form.repastFee}}</view>

			</view>
		</view>

		<!-- 		<uni-forms>
			<view>
				<view class="t"> 培训人员信息 </view>
				<view class="whiteItem">
					<view class="pp">工号：<text>{{detail.userNo}}</text></view>
					<view class="pp">姓名：<text>{{detail.nickName}}</text></view>
					<view class="pp">性别：<text>{{detail.sex=='0'?'男':'女'}}</text></view>
					<view class="pp">身份证号码：<text>{{detail.card}}</text></view>
					<view class="pp">单位名称：<text>{{detail.companyName}}</text></view>
					<view class="pp">部门：<text>{{detail.deptName}}</text></view>
					<view class="pp">岗位：<text>{{detail.postName}}</text></view>
					<view class="pp">联系方式：<text>{{detail.phonenumber}}</text></view>
					<view class="pp">备注信息：<text>{{detail.userNo}}</text></view>
					
				</view>
			</view>
		</uni-forms> -->
	</view>
	<view class="bbfix" v-if="orderType!='all'">
		<!-- 底部提交 -->
		<view class="price">
			总价：
			<text v-if="orderType==0">￥{{ form.trainFee }}</text>
			<text v-if="orderType==1">￥{{ form.stayFee }}</text>
			<text v-if="orderType==2">￥{{ form.repastFee }}</text>
		</view>

		<view class="subBtn" @click="unsubscribe" v-if="status == '1'"> 退订</view>

	</view>
	<uni-popup ref="tdpopup" background-color="#fff" class="popupMation" type="bottom">
		<view class="popup-content">
			<view class="centertitle">退订说明</view>

			<view>
				<view class="pp">
					退订联系人：<text>{{info.name}}</text>
				</view>
				<view class="pp" @click="callphone(info.tel)">
					联系电话：<text>{{info.tel}}</text>
				</view>
				<view class="pp">
					邮箱：<text>{{info.email}}</text>
				</view>
			</view>
		</view>

	</uni-popup>

</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import * as api from '@/common/api.js';
	import * as hotel from '@/common/hotel.js';
	const data = reactive({
		form: {},
		status: null,
		tdpopup: null,
		detail: {},
		info: {},
		orderType: ''
	})
	const {
		form,
		detail,
		orderType,
		info,
		status,
		tdpopup
	} = toRefs(data);

	let trainId = ''
	onLoad((options) => {
		trainId = options.trainId
		orderType.value = options.orderType
		console.log(orderType.value)
		status.value = options.status
		init()
	})

	function init() {
		getData()
	}

	function getData() {
		// 培训详情
		hotel.getTrainDetail(trainId).then(res => {
			form.value = res.data
		})
		// 用户信息
		// api.checkReport().then((res)=>{
		// 	detail.value = res.data
		// })
	}

	function unsubscribe() {
		hotel.cancelOrder().then(res => {
			info.value = res.data
			tdpopup.value.open()
		})
	}

	function callphone(number) {
		uni.makePhoneCall({
			phoneNumber: number
		});
	}
</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: center;
		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>