<template>
	<view>
		<view class="match-name">
			{{ obj.name }}
		</view>
		<view class="match-Name"></view>
		<view v-if="list[0]">
			<view class="match-team" v-for="(item,index) in list" :key="index">
				<view class="team-name">
					{{ item.name }}
					<icon type="icon" class="cuIcon-close icon" @click="del"></icon>
				</view>
				<view class="team-player">
					<view class="team-man" v-for="(a,b) in item.player" :key="b">
						{{ a }}
					</view>
				</view>
				<button type="default" class="change" @click="edit">编辑</button>
			</view>
		</view>
		<view class="img-B" v-else>
			<img src="static/item.png" class="img-box" />
			<view>
				暂无运动员信息
			</view>
		</view>
		<view class="add" @click="addTeam">添加</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			const that = this
			var OBJ = JSON.parse(option.obj)
			console.log(option.TypeNum,OBJ)
			that.obj = OBJ
		},
		data() {
			return {
				obj: {},
				list: [{
					name:'小学女子组',
					player: ['王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺']
				},{
					name:'小学男子组',
					player: ['王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺','王旺旺']
				},{
					name:'小学混合组',
					player: ['王旺旺','王旺旺','王旺旺']
				}]
			}
		},
		methods: {
			del() {
				uni.showModal({
					title: '提示',
					content: '确定要删除整组么？',
					success: (res) => {
						if (res.confirm) {
							console.log('确定删除')
						}
						if (res.cancel) {
							console.log('取消')
						}
					}
				})
			},
			edit() {
				const that = this
				const obj = that.obj
				uni.navigateTo({
					url: `./TeamDetail?obj=${JSON.stringify(obj)}`
				})
			},
			addTeam() {
				const that = this
				const obj = that.obj
				uni.navigateTo({
					url: `./TeamDetail?obj=${JSON.stringify(obj)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.match-name {
	position: fixed;
	text-align: center;
	width: 100%;
	top: 44px;
	height: 40px;
	line-height: 40px;
	background: $white;
	z-index: 10;
	font-size: 20px;
}
.match-Name {
	height: 40px;
}
.match-team {
	// background: $yellowLight;
	box-shadow: 0 0 10px #C0C0C0;
	width: 670rpx;
	padding-bottom: 30px;
	margin-left: 35rpx;
	height: auto;
	max-height: 240px;
	margin-top: 20px;
	border-radius: 25px;
	position: relative;
}
.team-name {
	height: 40px;
	line-height: 40px;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid $blueShadow;
}
.change {
	width: 60px;
	height: 30px;
	font-size: 14px;
	line-height: 30px;
	position: absolute;
	right: 10px;
	bottom: 6px;
}
.team-player {
	width: 100%;
	max-height: 160px;
	padding: 10px;
	overflow: auto;
}
.team-man {
	padding: 2px 10px;
	float: left;
	height: 40px;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 40px;
	font-size: 12px;
	border-radius: 10px;
	box-shadow: 0 0 5px $blue;
}
.icon {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 24px;
	color: #C0C0C0;
}
.add {
	position: fixed;
	width: 150rpx;
	height: 150rpx;
	background: #709AFC;
	box-shadow: 0 0 20px #709AFC;
	border-radius: 50%;
	color: $white;
	right: 10px;
	bottom: 100px;
	text-align: center;
	line-height: 150rpx;
	font-size: 18px;
}
.img-box {
	width: 70%;
	height: 70%;
}
.img-B {
	width: 100%;
	margin-top: 100px;
	height: 450rpx;
	text-align: center;
	color: #aaa;
}
</style>
