<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>