<template>
	<view style="padding: 25rpx;">
		<!--个人报名 - 选择参赛项目 -->
		<button class="addBtn" @click="addProject">+ 选择参赛项目</button>

		<view class="block" v-for="(p,index) in chooseList" :key="p.id">
			<view class="t">{{p.name}}</view>
			<uni-swipe-action>
				<uni-swipe-action-item>
					<view class="content-box">
						<text class="content-z">{{p.cptProjectName}}</text>
						<text class="content-j">{{p.cptGroupName}}{{p.cptLevelName}}</text>
					</view>
					<template v-slot:right>
						<view class="slot-button" @click="removeThis(p,index)">
							<!-- <uni-icons type="trash" color="#fff" size="20"></uni-icons> -->
							<text class="slot-button-text">删除</text>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="nodata" v-if="chooseList.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>点击选择参赛项目参加赛事</text>
		</view>
		<view class="fixedBottom">
			<button class="btn btnKx" @click="goPrev" type="default">上一步</button>
			<button class="btn btn1" @click="goNext" type="default">下一步</button>
		</view>

		<!-- 选参赛项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="t">可报项目</view>
			<view class="vh65">
				<uni-collapse accordion>
					<uni-collapse-item v-for="(p,index) in projectList" :key="index" :show-arrow="false" :border="false"
						title-border="none">
						<template v-slot:title>
							<view class="levelTitle" @click="chooseThisProject(p)">{{p.name}}
								<text>查看组别</text>
							</view>
						</template>
						<uni-list :border="false">
							<!-- 组别 -->
							<uni-list-item v-for="(group,index) in signGroupList" :key="index" :title="group.name"
								clickable @click="findLevels(group.id)">
							</uni-list-item>
						</uni-list>
						<view class="nodata" v-if="signGroupList.length==0">
							<image mode="aspectFit" src="/static/nodata.png"></image>
							<text>暂无可选组别</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</uni-popup>
		<!-- 级别 -->
		<uni-popup ref="signlevelListPopup"  @maskClick="levelMaskClick">
			<view class="levelList">
				<view class="t">可报级别</view>

				<view v-if="signlevelList.length&&signlevelList.length>0">
					<uni-data-checkbox mode="button" @change="changeSignlevel0" v-model="signlevel0"
						:localdata="signlevelList"></uni-data-checkbox>
				</view>

				<uni-section title="男子组" type="line" v-if="signlevelListBoy.length>0">
					<uni-data-checkbox mode="button" @change="changeSignlevel1" v-model="signlevel1"
						:localdata="signlevelListBoy"></uni-data-checkbox>
				</uni-section>
				<uni-section title="女子组" type="line" v-if="signlevelListGirl.length>0">
					<uni-data-checkbox mode="button" @change="changeSignlevel2" v-model="signlevel2"
						:localdata="signlevelListGirl"></uni-data-checkbox>
				</uni-section>

				<button class="btn btn1" @click="levelDone">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import * as match from '@/common/match.js';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	const data = reactive({
		baseFormData: {},
		projectList: [],
		matchId: '',
		chooseList: [],
		signGroupList: [],
		signlevel0: [],
		signlevel1: [],
		signlevel2: [],
		signlevelListPopup: null,
		signlevelList: [],
		signlevelListGirl: [],
		signlevelListBoy: [],
		popup: null
	});
	const {
		baseFormData,
		projectList,
		matchId,
		chooseList,
		popup,
		signGroupList,
		signlevelList,
		signlevelListGirl,
		signlevelListBoy,
		signlevelListPopup,
		signlevel0,
		signlevel1,
		signlevel2
	} = toRefs(data);
	let personId = ''
	let chargeFlag = ''
	onLoad((option) => {
		if (option.matchId) {
			matchId.value = option.matchId
			// getCanSignProjectList(matchId.value)
		}
		// 获取个人信息拿到personId
		getMyself()
		match.getMatchById({
			id: matchId.value
		}).then(res => {
			chargeFlag = res.data.chargeFlag
		})
	})
	onShow(()=>{
		if(matchId.value){
			getMySignInfo()
		}
	})
	function getMyself() {
		match.getMyPersonInfo().then(res => {
			personId = res.data.id;
		});
	}

	function getCanSignProjectList(id) {
		projectList.value = []
		match.getCanSignProjectList(id).then(res => {
			for (let p of res.data) {
				if (p.canSign == '1') {
					projectList.value.push(p)
				}
			}
		})
	}

	function addProject() {
		if (signInfoType == '2') {
			match.recoverMySign({cptId:matchId.value}).then(res => {
				if (res.msg.indexOf("Exception:") > -1) {
					let msg = res.msg.slice(10)
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return
				}
				getMySignInfo()
			})
		} 
		// popup.value.open()
		uni.navigateTo({
			url: `/pages_match/match/projectList?personId=${personId}&matchId=${matchId.value}&groupId=0`
		});	
		
	}

	function chooseThisProject(p) {
		// 获取组别
		signGroupList.value = []
		match.getCanSignGroupListFromSelectPerson(p.id, personId).then(res => {
			for (var g of res.data) {
				if (g.canSign == '1') {
					signGroupList.value.push(g)
				}
			}
		})
	}

	function removeThis(p, index) {
		match.deleteSign(p.id).then(res => {
			// 重新获取已报名信息
			chooseList.value = []
			getMySignInfo()
		})
	}
	let nowLevel = ''
	function findLevels(groupId) {
		signlevelList.value = []
		signlevelListGirl.value = []
		signlevelListBoy.value = []
		match.getCanSignlevelListFromSelectPerson(groupId, personId).then(res => {
			for (let l of res.data) {
				l.text = l.name
				l.value = l.id
				if (l.levelType == '1') {
					signlevelListBoy.value.push(l)
				} else if (l.levelType == '2') {
					signlevelListGirl.value.push(l)
				} else {
					signlevelList.value.push(l)
				}
			}

			signlevelListPopup.value.open()
		})
	}
	function levelMaskClick(){
		signlevelList.value = []
		signlevelListGirl.value = []
		signlevelListBoy.value = []
		signlevel0.value = ''
		signlevel1.value = ''
		signlevel2.value = ''
		nowLevel = ''
	}
	function levelDone() {
		console.log(signlevel0.value , signlevel1.value , signlevel2.value)
		nowLevel = signlevel0.value + signlevel1.value + signlevel2.value
		if(!nowLevel){
			uni.showToast({
				title: '请选择级别',
				icon: 'none',
				duration: 2000
			});
			return
		}
		// 半提交
		let obj = {
			levelId: nowLevel,
			athleteIds: personId,
			groupId: '',
			teamId: ''
		}
		saveOne(obj)
	}

	function saveOne(obj) {
		match.sportsmanDone(obj).then(res => {
			if (res.msg.indexOf("Exception:") > -1) {
				let msg = res.msg.slice(10)
				uni.showModal({
					title: '提示',
					content: msg,
					success: function(res) {
						if (res.confirm) {
							// let path = `/pages/usercenter/match`;
							// 	uni.redirectTo({url: path});
						}
					}
				});
				return
			} 
			signlevel0.value = []
			signlevel1.value = []
			signlevel2.value = []
			nowLevel = ''
			var backInfo = res.data
			signlevelListPopup.value.close()
			popup.value.close()
			getMySignInfo()
		})
	}
	let signInfoType = null

	function getMySignInfo() {
		// 是否已有
		match.getMySignInfo({
				cptId: matchId.value,
				groupId: ''
			}).then(res => {
			console.log(res.data)
			signInfoType = res.data.type
			if(!res.data.signInfo){
				return
			}
			chooseList.value = res.data.signInfo

			// 4有被的报信息 5 有被清除的报名信息 6 有被的报名信息
			if (signInfoType == '2') {
				console.log('ff')
			}
		})
	}
	function goPrev(){
		uni.navigateBack()
	}
	function goNext() {
		if (signInfoType == '1') {
			uni.showModal({
				title: '提示',
				content: '已报项，前往我的报项',
				showCancel:false,
				success: function (res) {
					if (res.confirm) {
						let path =
							`/pages/usercenter/match`;
						uni.reLaunch({
							url: path
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		if (signInfoType == '2') {
			match.recoverMySign({cptId:matchId.value}).then(res => {
				if (res.msg.indexOf("Exception:") > -1) {
					let msg = res.msg.slice(10)
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return
				} else {
					afterRecover()
				}
			})
		} else {
			afterRecover()
		}
	}
	function afterRecover(){
		if (chooseList.length == 0) {
			uni.showToast({
				title: '请至少选择一个项目',
				icon: 'none',
				duration: 2000
			});
			return
		}
		// 判断是否收费
		if (chargeFlag == '0') {
			var obj = {
				cptId: matchId.value,
				groupId: ''
			}
			match.commitSign(obj).then(res => {
				console.log(res.data)
				let path =
					`/pages_match/match/matchPayDone?cptId=${matchId.value}&groupId=0&chargeFlag=${chargeFlag}&orderId=${res.data}`;
				uni.navigateTo({
					url: path
				});
			})
		} else {
			// 生成账单
			uni.navigateTo({
				url: `/pages_match/match/matchBill?cptId=${matchId.value}&personId=${personId}`
			});
		}
		
	}
</script>

<style scoped lang="scss">
	.addBtn {
		width: 700rpx;
		height: 90rpx;
		background: #ffffff;
		border: 1rpx solid #1ec886;
		color: #1ec886;
		font-size: 30rpx;
		border-radius: 15rpx;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		padding: 20rpx 30rpx;
		position: relative;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.content-z {
		color: #4C5359;
		font-size: 30rpx;
		display: block;
	}

	.content-j {
		color: #000000;
		font-size: 26rpx;
	}

	.slot-button {
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx 40rpx;
		background-color: #ff5a5f;
		text-align: center;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 28rpx;
		display: block;
	}

	.uni-popup .t {
		text-align: center;
		font-size: 30rpx;
		padding: 30rpx 0;
	}

	:deep(.uni-collapse-item) {
		margin: 0 !important;
		border-bottom: 1px solid #e1e1e1;
		border-radius: 0;
	}

	.levelTitle {
		text {
			float: right;
			font-size: 28rpx;
			color: #999;
		}
	}

	.levelItem {
		background: #eee;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx 0 0;
		display: inline-block;
		border-radius: 6rpx;
	}

	.levelList {
		padding: 20rpx 40rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 80vw;
		max-height: 70vh;
		overflow: auto;
		box-sizing: border-box;
	}

	.vh65 {
		height: 65vh;
		overflow: auto;

		:deep(.uni-list-item__container) {
			padding: 10px 0;
		}

		:deep(.uni-list-item__content-title) {
			font-size: 17px;
			color: #888;
		}
	}

	:deep(.uni-section .uni-section-header) {
		padding: 12px 0 0 !important;
	}
</style>