<template>
	<view>
		<view class="title">{{ order.trainName }}</view>

		<view class="t">订单基本信息</view>
		<view class="wBox">
			<view>
				<view class="pp">
					订单编号：
					<text>{{ order.id }}</text>
				</view>
				<!-- <view class="pp">
					下单时间：
					<text>{{ order.commitTime }}</text>
				</view> -->
				<view class="pp" v-if="order.groupName">
					报名参赛队：
					<text>{{ order.groupName }}</text>
				</view>
				<view class="pp" v-if="order.needPay != '0'">
					支付方式：
					<!-- 2 会员卡支付 0 微信支付 1 线下支付 -->
					<text v-if="order.payType == '2'">会员卡支付</text>
					<text v-if="order.payType == '0'">微信支付</text>
					<text v-if="order.payType == '1'">线下支付</text>
				</view>
				<view class="pp" v-if="order.needPay != '0'">
					订单状态：
					<text v-if="order.auditStatus == '0'" class="orange">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '1'" class="green">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '2'">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '3'" class="green">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '4'" class="red">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '5'" class="red">{{ order.auditStatusStr }}</text>
					<text v-if="order.auditStatus == '6'">{{ order.auditStatusStr }}</text>
				</view>
				<view class="pp" v-if="order.payTime">
					付款时间：
					<text>{{ order.payTime }}</text>
				</view>

				<view class="pp" v-if="order.needPay != '0'">
					订单金额：
					<text>{{ order.payment }}元</text>
				</view>
				<view class="pp" v-if="order.paymentd">
					付款金额：
					<text style="font-size: 34rpx;" class="orange">{{ order.payment }}元</text>
				</view>
			</view>
		</view>

		<view class="t" v-if="order.payType == '1'">收款方</view>
		<view class="wBox" v-if="order.payType == '1'">
			<view>
				<view class="pp">
					收款账户：
					<text>{{ billData.accountName }}</text>
				</view>
				<view class="pp">
					开户银行：
					<text>{{ billData.accountBank }}</text>
				</view>
				<view class="pp">
					开户账号：
					<text>{{ billData.accountNum }}</text>
				</view>
			</view>
		</view>
		<view>
			<!-- //是否显示 -->
			<view class="t">费用明细</view>

			<view class="wBox" v-if="trainData.projectList?.length > 0">
				<view>
					<view class="t">培训科目</view>
					<uni-collapse>
						<uni-collapse-item :border="false" title-border="none">
							<template v-slot:title>
								<view class="h2">
									合计：
									<text class="orange">{{ trainData?.projectFee }}元</text>
								</view>
							</template>
							<!-- 科目列表 -->
							<uni-list :border="false">
								<view class=" uni-conter" v-for="(item, index) in trainData.projectList" :key="item.id">
									<view class="uni-c-l">{{ item.projectName }}</view>
									<view class="uni-c-r">￥{{ item.cost }}</view>
								</view>
							</uni-list>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<view class="wBox" v-if="trainData.examList?.length > 0">
				<view>
					<view class="t">考试科目</view>
					<uni-collapse>
						<uni-collapse-item :border="false" title-border="none">
							<template v-slot:title>
								<view class="h2">
									合计：
									<text class="orange">{{ trainData.examFee }}元</text>
								</view>
							</template>
							<!-- 人员列表 -->
							<uni-list :border="false">
								<view class=" uni-conter" v-for="(item, index) in trainData.examList" :key="item.id">
									<view class="uni-c-l">{{ item.projectName }}</view>
									<view class="uni-c-r">￥{{ item.cost }}</view>
								</view>
							</uni-list>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<view class="wBox" v-if="trainData.hotelList?.length > 0">
				<view>
					<view class="t">酒店费用</view>
					<uni-collapse>
						<uni-collapse-item :border="false" title-border="none">
							<template v-slot:title>
								<view class="h2">
									合计：
									<text class="orange">{{ trainData.hotelFee }}元</text>
								</view>
							</template>
							<!-- 人员列表 -->
							<uni-list :border="false">
								<view class=" uni-conter" v-for="(item, index) in trainData.hotelList" :key="item.id">
									<view class="uni-c-l">{{ item.name }}</view>
									<view class="uni-c-r">￥{{ item.cost }}</view>
								</view>
							</uni-list>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<view class="wBox" v-if="trainData.otherList?.length > 0">
				<view>
					<view class="t">其他费用</view>
					<uni-collapse>
						<uni-collapse-item :border="false" title-border="none">
							<template v-slot:title>
								<view class="h2">
									合计：
									<text class="orange">{{ trainData.otherFee }}元</text>
								</view>
							</template>
							<!-- 人员列表 -->
							<uni-list :border="false">
								<view class=" uni-conter" v-for="(item, index) in trainData.otherList" :key="item.id">
									<view class="uni-c-l">{{ item.name }}</view>
									<view class="uni-c-r">￥{{ item.spend }}</view>
								</view>
							</uni-list>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</view>
		<view class="fBottom">
			<view class="pp" v-if="trainData.projectCost > 0">
				培训科目:
				<text>{{ trainData.projectCost }}元</text>
			</view>
			<view class="pp" v-if="trainData.examCost > 0">
				考试科目:
				<text>{{ trainData.examCost }}元</text>
			</view>

			<view class="pp" v-if="trainData.accommodationCost > 0">
				酒店费用:
				<text>{{ trainData.accommodationCost }}元</text>
			</view>
			<view class="pp" v-if="trainData.otherCost > 0">
				其他费用:
				<text>{{ trainData.otherCost }}元</text>
			</view>
			<!-- 	<view class="pp" v-if="teamFee.totalFee > 0">
				{{ teamFee.name }}:
				<text>{{ teamFee.totalFee }}元</text>
			</view>
			<view class="pp" v-if="cptDepositFee.totalFee > 0">
				{{ cptDepositFee.name }}:
				<text>{{ cptDepositFee.totalFee }}元</text>
			</view>
			<view class="pp" v-if="order.totalPayAmount">
				已缴纳费用：
				<text>{{ order.totalPayAmount }}元</text>
			</view> -->
			<view class="txr">
				合计：
				<text class="orange">{{ trainData.totalAmount }}元</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import * as train from '@/common/train.js';
import { onLoad } from '@dcloudio/uni-app';
const data = reactive({
	id: '',
	trainData: {},
	order: {},
	billData: {}
});
const { billData, id, trainData, order } = toRefs(data);
onLoad(option => {
	if (option) {
		id.value = option.id;
		order.value = JSON.parse(option.order);
		getData();
		getBank();
	}
});

async function getData() {
	let res = await train.getOrderDetail({ orderId: order.value.id });
	trainData.value = res.data;
}

async function getBank() {
	let res = await train.bankSlip({ id: order.value.id });
	billData.value = res.data;
}

// 订单详情
async function getOrder() {
	let res = await train.getOrderDetail({ id: order.value.id });
}
</script>

<style scoped lang="scss">
.uni-conter {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	.uni-c-r: {
		color: #999;
		font-size: 12px;
	}
	.uni-c-l: {
		font-size: 14px;
		color: #3b4144;
		overflow: hidden;
	}
}

.t {
	font-size: 30rpx;
	margin: 0 30rpx;
}
.poKxBtn {
	position: absolute;
	top: -70rpx;
	right: 0;
	font-size: 24rpx;
	line-height: 2;
}
:deep(.uni-group__content) {
	padding: 0;
}
.addBtn {
	width: 700rpx;
	height: 90rpx;
	background: #ffffff;
	border: 1rpx solid #1ec886;
	color: #1ec886;
	font-size: 30rpx;
	border-radius: 15rpx;
}
.wBox {
	position: relative;
	background: #ffffff;
	border-radius: 15px;
	box-sizing: border-box;
	width: 700rpx;
	margin: 20rpx auto 36rpx;
	padding: 30rpx;
	.t {
		margin: 0 0 20rpx;
	}
	:deep(.uni-collapse-item) {
		margin: 0;
		padding: 0;
	}
	:deep(.uni-list-item__container) {
		padding-left: 0 !important;
		align-items: center;
	}
	:deep(.uni-list-item__extra-text) {
		white-space: nowrap;
	}
}

.avatarUrl {
	width: 200rpx;
	height: 200rpx;
}
.avatarUrl button {
	padding: 0;
	display: block;
	line-height: 1;
}
.refreshIcon {
	width: 200rpx;
	height: 200rpx;
}
.rank-image {
	width: 90rpx;
	height: 90rpx;
	background: #f8f8f8;
	border-radius: 50%;
}
.title {
	font-weight: 500;
	color: #2b3133;
	text-align: center;
	margin: 20rpx 0 40rpx;
	font-size: 36rpx;
	padding: 0 30rpx;
}

.h2 {
	font-size: 28rpx;
}
.soltbodyName {
	font-size: 30rpx;
}
.soltbodyText {
	font-size: 26rpx;
	color: #999;
}
</style>