<template>
	<view class="graybg">
		<uni-collapse :accordion="true" @change="changeCollapse">
			<uni-collapse-item v-for="b in billsList" :name="b.id" :open="b.open">
				<template v-slot:title>
					<view class="collapseTitle">
						<label style="color: #999;">培训项目：</label>{{b.name}}
					</view>
				</template>
				<view class="sonArea">
					<view class="billItem" v-for="s in sonList">
						<view>
							<label v-if="s.orderType==0" class="blueTag"> 培训订单</label>
							<label v-if="s.orderType==1" class="purpleTag"> 住宿订单</label>
							<label v-if="s.orderType==2" class="orangeTag">餐饮订单</label>
						</view>
						<view class="pp">
							订单编号：{{ s.id }}
						</view>
						<view class="pp" v-if="s.orderType==1">地点：{{s.address}}</view>
						<view class="pp" v-if="s.orderType==1">房间号：{{s.roomNum||'--'}}</view>
						<view class="pp" v-if="s.orderType==0">培训时间：{{s.trainStart?.substring(0, 10)}} —
							{{s.trainEnd?.substring(0, 10)}}</view>

						<view class="pp" v-if="s.orderType==2">就餐次数：{{s.repastNum}}次</view>
						<!-- 0:代付款  1:已付款  2:取消支付 -->
						<view class="status">
							<text class="gary" v-if="s.status == '0'&&s.surplus!='0,0'&&s.surplus!='0'"
								style="margin-right: 48rpx;"> 待支付
							</text>
							<text class="success" v-if="s.status == '1'">已付款</text>
							<text class="warning" v-if="s.status == '2'">取消支付</text>
						</view>
						<view class="time" v-if="s.status == '0'&&(s.surplus&&s.surplus!='0,0'&&s.surplus!='0')">
							（<uni-countdown style="display: inline-block;" :font-size="12" color="#999"
								splitorColor="#999" @timeup="timeup" :show-day="false" :show-hour="false" :start="true"
								:minute="Number(s.surplus?.split(',')[0])"
								:second="Number(s.surplus?.split(',')[1])"></uni-countdown>)
						</view>

						<view class="billFoot">
							<view class="price">
								<text> 共计 ¥{{s.total}}</text>


								<view style="display: flex;">
									<button class="billbtn" @click.stop="showDetail(s,s.orderType)">详情</button>
									<button class="billbtn sxbtn" v-if="s.status == '0'" @click="goPay(b)">
										支付</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>

		</uni-collapse>

		<view class="nodata" v-if="billsList.length==0">
			<image mode="aspectFit" src="@/static/nodata.png"></image>
			<text> 还没有订单</text>
		</view>
		<uni-popup ref="payPopup" background-color="#fff" class="popupMation" type="center">
			<view class="popup-content" style="height: 600rpx;">
				<view class="centertitle" style="margin-bottom: 60rpx;">
					《{{form.name}}》下的订单，只支持合并付款，请确认是否继续？
				</view>
				<view v-for="s in sonList">
					<view class="pp" v-if="s.orderType==0">
						培训订单编号：{{ s.id }}
					</view>
					<view class="pp" v-if="s.orderType==1">
						住宿订单编号：{{ s.id }}
					</view>
					<view class="pp" v-if="s.orderType==2">
						餐饮订单编号：{{ s.id }}
					</view>
				</view>

				<view class="foot">
					<button size="mini" class="billbtn" @click="closePop">取消</button>
					<button size="mini" class="billbtn" @click="goPayPage(form)">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	const app = getApp();
	const billsList = ref([]);
	const sonList = ref([]);
	const current = ref(null);
	const payPopup = ref(null);
	const form = ref({});
	const countdown = ref({
		start: true,
		minute: 0,
		second: 0
	})
	const currUser = uni.getStorageSync('currUser');
	onShow(() => {
		billsList.value = []
		getBills()
	});

	function timeup() {
		// getBills()
	}

	function getBills() {
		uni.showLoading({
			title: '加载中'
		});
		hotel.newbilllist().then(res => {
			uni.hideLoading()
			billsList.value = res.rows;
			if (billsList.value.length > 0) {
				getSon(billsList.value[0].id)
				billsList.value[0].open = true
				console.log(current.value)
				
			}
		});
	}

	function getSon(id) {
		current.value = id
		hotel.getOrderInfoByOrderId(id).then(res => {
			sonList.value = res.data
			uni.hideLoading();
		})
	}

	function showDetail(b, orderType) {
		let path = `/pages_hotel/hotel/billDetail?orderType=${orderType}&trainId=${b.trainId}&status=${b.status}`;
		uni.navigateTo({
			url: path
		});
	}

	function changeCollapse(e) {
		console.log(e)
		if(e){
			getSon(e)
		}
	}

	function goPay(b) {
		form.value = b
		payPopup.value.open()
	}
	function closePop(){
		payPopup.value.open()
	}
	function goPayPage(b){
		console.log(b)
		let path =
			`/pages_hotel/hotel/pay?money=${b.total}&orderId=${b.id}`;
		uni.redirectTo({
			url: path
		});
	}
</script>

<style lang="scss" scoped>
	.collapseTitle{padding: 30rpx;line-height: 1.4;}
	.centertitle{text-align: center;}
	.mtb20 {
		margin: 20rpx 0;
	}

	.pads {
		padding: 0 25rpx 70rpx;
	}

	.sonArea {min-height: 560px;
		.billItem {
			padding: 40rpx 0 10rpx;

			&:nth-child(1) {
				background-color: rgba(30, 200, 134, 5%);
			}

			&:nth-child(2) {
				background-color: rgb(113, 123, 239, 5%);
			}

			&:nth-child(3) {
				background-color: rgb(255, 129, 36, 5%);
			}
		}
	}

	.billItem {
		position: relative;
		width: auto;

		.uni-input {
			padding: 15rpx 0;
			color: #000;
		}

		.billFoot {
			margin-bottom: 20rpx;
		}
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.graybg {
		background: #f7f8fa;
		height: 100vh;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}

	.name {
		font-size: 34rpx;
		color: #000;
	}

	.padh20 {
		padding: 0 25rpx;
	}

	.billFoot {
		.price {
			width: 100%;
			justify-content: space-between;
		}

		.billbtn {
			color: #1EC886;
			border: 1px solid #1EC886;
			border-radius: 0;
			background-color: transparent;

			&::after {
				border: none;
			}
		}

		.sxbtn {
			margin: 0 0 0 10rpx;
			background: #1EC886;
			color: #fff;
		}
	}

	.billFoot .tip {
		font-size: 24rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 500;
		margin: 0 20rpx;
	}

	.billItem>view {
		margin-bottom: 10rpx;
	}

	.billFoot text {
		white-space: nowrap;
	}

	.billFoot text.danger {
		color: #da2a2a;
	}

	.blueTag {
		color: #fff;
		background-color: #1EC886;
		padding: 10rpx 10rpx;
	}

	.purpleTag {
		color: #fff;
		background-color: #717bef;
		padding: 10rpx 10rpx;
	}

	.orangeTag {
		color: #fff;
		background-color: #ff8124;
		padding: 10rpx 10rpx;
	}

	.status {
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;
		white-space: nowrap;

		.warning {
			color: #ff8124;
		}

		.danger {
			color: #da2a2a;
		}

		.gary {
			color: #666;
		}

		.success {
			color: #1EC886;
		}
	}

	.time {
		right: -30rpx;
		bottom: 120rpx;
		position: absolute;
		font-size: 12px;
	}
	.popup-content{width: 90vw;}
	.foot{border-top: 1px dashed #e5e5e5;padding: 30rpx 0 0;margin: 60rpx 0 0;
	display: flex;justify-content: center;
		button{margin: 0 20rpx;
			
				color: #1EC886;
				border: 1px solid #1EC886;
				border-radius: 0;
				background-color: transparent;
			
				&::after {
					border: none;
				}
		
		}
	}
</style>