<template>
	<view>
		<view class="wBox">
			<view class="statusPo">
				<text class="status s01" v-if="str == '0'">未支付</text>
				<text class="status s01" v-else-if="str == '1'">支付待核销</text>
				<text class="status s02" v-else-if="str == '2'">付款中</text>
				<text class="status s01" v-else-if="str == '3'">已支付</text>
				<text class="status s03" v-else-if="str == '4'">退款中</text>
				<text class="status s04" v-else-if="str == '5'">已退款</text>
				<text class="status s04" v-else-if="str == '6'">退款待核销</text>
				<text class="status s01" v-else-if="str == null">{{ base.statusStr }}</text>
			</view>
			<view class="title">{{ trainName }}</view>
			<view>
				<text class="time">比赛时间：{{ base.trainTimeStr }}</text>
			</view>
		</view>

		<view class="wBox">
			<uni-list :border="false">
				<uni-list-item :border="false" title="姓名">
					<template v-slot:footer>
						{{ base.name }}
						<text style="font-size: 24rpx;" v-if="base.sex == 0">(女)</text>
						<text style="font-size: 24rpx;" v-if="base.sex == 1">(男)</text>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="身份证" :rightText="base.idcCode" />
				<uni-list-item :border="false" title="已报科目" />
				<uni-list-item
					:border="false"
					v-for="item in projectList"
					:key="item.id"
					:title="item.projectName"
					:rightText="item.isNecessary == 1 ? '必选' : '非必选'"
				/>
			</uni-list>
		</view>

		<!-- <view style="padding: 60rpx 0 100rpx;">
			<button style="margin: auto;" v-if="str == 0" @click="goConti" class="btn btn1">继续报名</button>
		</view> -->
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import * as match from '@/common/match.js';
import * as train from '@/common/train.js';
import { onLoad } from '@dcloudio/uni-app';
const data = reactive({
	list: {},
	signId: '',
	memberList: [],
	isSign: false,
	showForm: false,
	auditStatus: '',
	payStatus: '',
	base: {},
	str: '',
	trainName: '',
	projectList: [],
	orderId: ''
});
const {
	projectList,
	trainName,
	str,
	list,
	signId,
	memberList,
	isSign,
	showForm,
	payStatus,
	auditStatus,
	base
} = toRefs(data);

onLoad(option => {
	signId.value = option.id;
	trainName.value = option.trainName;
	getData();
});

async function getData() {
	let res = await train.signDetail({ id: signId.value });
	base.value = res.data;
	str.value = res.data.payStatus;
	projectList.value = res.data.projectList;
}

// 继续报名
function goConti() {
	// 培训id
	// 订单id
	let path = `/pages/train/costBreakdown/costBreakdown?trainId=${base.value.trainId}&orderNumber=${base.value.order}`;
	wx.navigateTo({
		url: path
	});
}

function goWebView(url) {
	url = url.replace('http://', 'https://');
	uni.showLoading({
		title: '下载中'
	});
	uni.downloadFile({
		url: url,
		success: function(res) {
			uni.hideLoading();
			var filePath = res.tempFilePath;
			uni.showLoading({
				title: '正在打开'
			});
			uni.openDocument({
				filePath: filePath,
				showMenu: true,
				success: function(res) {
					uni.hideLoading();
				},
				fail: function(err) {
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		fail: function(error) {
			uni.hideLoading();
			uni.showToast({
				title: `下载失败`,
				icon: 'none',
				duration: 2000
			});
		}
	});
}
</script>

<style scoped lang="scss">
.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: 30rpx auto;
	padding: 30rpx;

	:deep(.uni-list-item__container) {
		padding: 10rpx 0 !important;
		padding-left: 0 !important;
	}

	:deep(.uni-list-item__extra-text) {
		font-size: 28rpx;
		color: #2b3133;
		text-align: right;
	}

	:deep(.uni-list-item__content-title) {
		font-size: 28rpx;
		color: #7b7f83;
	}

	.title {
		font-weight: 500;
		color: #000000;
		font-size: 32rpx;
		line-height: 1.6;
		margin: 0 0 20rpx;
	}

	.time {
		font-size: 24rpx;
		color: #7b7f83;
		margin: 0 20rpx;
	}
}

:deep(.uni-list-item__extra) {
	width: 60%;
}

.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%;
}

.statusPo {
	position: absolute;
	right: 45rpx;
	top: 58rpx;
	color: #fff;

	.status {
		font-size: 30rpx;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
	}
}

.fileName {
	font-size: 28rpx;
	text-align: right;
	color: #54e1b9;
	white-space: nowrap;
	width: 50vw;
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
}
</style>