<template>
	<view>
		<ms-dropdown-menu v-show="showms - 0 === 0" class="select">
				<ms-dropdown-item v-model="value" :list="list"></ms-dropdown-item>
				<ms-dropdown-item v-model="value1" :list="list1"></ms-dropdown-item>
		</ms-dropdown-menu>
		<!-- <button type="default" @click="btn">123</button> -->
		<view class="player-box">
			<view class="player" :class="item.joinProject?'player-active':''" v-for="(item,index) in list2" :key="index" @click="choice(index)">
				<icon type="icon" :class="item.joinProject?'backactive':''" class="cuIcon-roundcheckfill back"></icon>
				{{ item.playerName }}
			</view>
		</view>
		<button v-show="list2[0]" class="modify mit" type="default" @click="editData">
			<!-- <text v-if="edit - 0 === 0">编辑</text> -->
			<text>提交</text>
		</button>
		<view v-show="!list2[0]" class="img-B">
			<img src="static/item.png" class="img-box" />
			<view>
				暂无报名信息
			</view>
		</view>
	</view>
</template>

<script>
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import { rulePlayer } from 'api/rulePlayer'
	import { join } from 'api/join'
	export default {
		components: {
				msDropdownMenu,
				msDropdownItem
		},
		onLoad(option) {
			const that = this
			that.obj = JSON.parse(option.obj)
			that.showms = that.obj.joinRule
			if (option.groupRemark) {
				// console.log('1')
				that.value = option.groupRemark - 0 - 1
				that.value1 = option.gender - 0
				that.query()
			} else {
				// console.log('2')
				that.query()
			}
			// console.log(that.obj,option)
		},
		data() {
			return {
				showms: 1,
				obj:{},
				list: [
					{
						text: '小学',
						value: 0
					},
					{
						text: '中学',
						value: 1
					},
					{
						text: '高职院校',
						value: 2
					},
					{
						text: '本科院校',
						value: 3
					},
					{
						text: '俱乐部',
						value: 4
					}
				],
				list1: [
					{
						text: '女子组',
						value: 0
					},
					{
						text: '男子组',
						value: 1
					},
					{
						text: '混合组',
						value: 2
					}
				],
				list2: [],
				value: 0,
				value1: 0,
				edit: 0,
				joinNum:0
			}
		},
		methods: {
			choose() {
				const that = this
				let obj = {
						value: 'test'
				}
				this.$refs.dropdownItem.choose(obj)
			},
			close() {
					this.$refs.dropdownItem.closePopup()
			},
			async editData() {
				const that = this
				// if(that.edit - 0 === 0) {
				// 	that.edit = 1
				// } else {
					if (that.joinNum < that.obj.memberMin && that.joinNum > 0) {
						uni.showToast({
							title:`小于最少人数${that.obj.memberMin}人`,
							icon: 'none',
							duration: 1500
						})
					} else if (that.joinNum > that.obj.memberMax) {
						uni.showToast({
							title:`大于最多人数${that.obj.memberMin}人`,
							icon: 'none',
							duration: 1500
						})
					} else {
						try{
							var params = {}
							if(that.obj.joinRule - 0 === 0) {
								params = {
									param:{
										companyId: that.$store.state.project.companyId,
										competeTimeId: that.$store.state.project.data.id,
										gender: that.value1,
										groupRemark: that.value - 0 + 1,
										projectId: that.obj.id,
										players: that.list2
									}
								}
							} else {
								params = {
									param:{
										companyId: that.$store.state.project.companyId,
										competeTimeId: that.$store.state.project.data.id,
										projectId: that.obj.id,
										players: that.list2
									}
								}
							}
							const data = await join(params)
							if (that.joinNum - 0 === 0) {
								uni.showToast({
									title: '取消成功',
									icon: 'success',
									duration: 1500
								})
							} else {
								uni.showToast({
									title: '报名成功',
									icon: 'success',
									duration: 1500
								})
							}
							that.$store.state.project.Mat++
							setTimeout(function(){
								uni.navigateBack()
							},1000)
							// console.log(that.$store.state)
						}catch(e){
							//TODO handle the exception
							if (e === 'error') {
								uni.showToast({
									title: '提交失败',
									icon: 'none',
									duration: 1500
								})
							} else {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 1500
								})
							}
						}
					}
				// }
			},
			choice(index) {
				const that = this
				that.joinNum = 0
				if(that.list2[`${index}`].joinProject - 0 === 0) {
					that.list2[`${index}`].joinProject = 1
				} else {
					that.list2[`${index}`].joinProject = 0
				}
				for(var i=0; i<that.list2.length;i++) {
					if(that.list2[i].joinProject - 0 === 1) {
						that.joinNum++
					}
				}
				// console.log(that.joinNum)
			},
			async query() {
				const that = this
				// console.log('xxx')
				try{
					var params = {}
					if (that.obj.joinRule) {
						params = {
							param: {
								companyId: that.$store.state.project.companyId,
								projectId: that.obj.id
							}
						}
					} else {
						params = {
							param: {
								companyId: that.$store.state.project.companyId,
								gender: that.value1,
								groupRemark: that.value - 0 + 1,
								projectId: that.obj.id
							}
						}
					}
					const data = await rulePlayer(params)
					that.list2 = []
					if (that.obj.joinRule - 0 === 0 && that.value1 - 0 !== 2) {
						that.list2 = data[0].playerList
					} else if (that.obj.joinRule - 0 === 0 && that.value1 - 0 === 2) {
						// console.log(data)
						for (var i=0;i<data.length;i++) {
							that.list2 = that.list2.concat(data[i].playerList)
						}
						// console.log(that.list2)
					} else if (that.obj.joinRule - 0 === 1) {
						for (var i=0;i<data.length;i++) {
							that.list2 = that.list2.concat(data[i].playerList)
						}
					}
					// console.log(that.list2)
				}catch(e){
					//TODO handle the exception
					console.log(e)
				}
			}
		},
		watch:{
			value(val){
				const that = this
				that.list2 = []
				that.query()
			},
			value1(val){
				const that = this
				that.list2 = []
				that.query()
			}
		}
	}
</script>

<style lang="scss" scoped>
.select {
	position: fixed;
	z-index: 10;
	top: 44px;
	width: 750rpx !important;
	box-shadow: 0 2px 10px #aaa;
	margin-bottom: 20px;
}
.player-box {
	width: 670rpx;
	margin-top: 70px;
	margin-left: 35rpx;
}
.player {
	position: relative;
	height: 60px;
	margin-top: 10px;
	line-height: 60px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 0 5px $gray;
}
.player-active{ 
	box-shadow: 0 0 4px #709AFC !important;
}
.back {
	position: absolute;
	color: $grey;
	font-size: 30px;
	left: 20px;
}
.backactive {
	color: #709AFC !important;
}
.modify {
	width: 670rpx;
	margin-left: 35rpx;
	margin-top: 50px;
	box-shadow: 2px 2px 5px #C0C0C0;
	margin-bottom: 100px;
}
.mit {
	background: $blue;
	color: $white;
}
.img-box {
	width: 70%;
	height: 70%;
}
.img-B {
	width: 100%;
	margin-top: 100px;
	height: 450rpx;
	text-align: center;
	color: #aaa;
}
</style>
