<template>
	<view class="arenaControl">
		<BallCard v-show="item.children.length > 0" v-for="(item, index) in ballList" :key="index" :isLock="isLock" :ballInfo="item" />
		<view v-if="!isLock" class="add_mode" @click="goRouter">
			<u-icon name="plus-circle"></u-icon>
			<text class="m-l-20">新建场地</text>
		</view>
	</view>
</template>

<script>
	import EscapeRoom from '@/static/myImg/Escape-room.png'
	import ScriptKilling from '@/static/myImg/Script-killing.png'
	import Werewolfkills from '@/static/myImg/Werewolf-kills.png'
	import BallCard from '@/pages_arenaControl/components/ballCard.vue'
	import { getGroundList, getSportList } from '@/api/sport.js'
	export default {
		components: { BallCard },
		data() {
			return {
				ballList: [
					{ title: '狼人杀', iconName: Werewolfkills, children: [
						{ groundId: 1, groundNum: 1},
						{ groundId: 2, groundNum: 2},
						{ groundId: 3, groundNum: 3}
					] },
					{ title: '剧本杀', iconName: ScriptKilling, children: [
						{ groundId: 1, groundNum: 1},
						{ groundId: 2, groundNum: 2},
						{ groundId: 3, groundNum: 3}
					] },
					{ title: '密室逃脱', iconName: EscapeRoom, children: [
						{ groundId: 1, groundNum: 1},
						{ groundId: 2, groundNum: 2},
						{ groundId: 3, groundNum: 3}
					] }
				],
				isLock: false, // 是否为锁定
				soreList: []
			};
		},
		async onLoad(option) {
			this.isLock = option.type === 'lock'
			// const { rows } = await getSportList()
			// this.soreList = rows
		},
		// onShow() {
		// 	this.getList()
		// },
		methods: {
			// 获取球场列表
			async getList(){
				const {rows, total} = await getGroundList()
				this.ballList = this.soreList.map(item => {
					return {
						title: item.sportsName,
						iconName: item.clickPicture,
						children: this.getSoreList(rows, item.sportsName)
					}
				})
				this.total = total
			},
			// 获取相关分类列表数据
			getSoreList(arr, soreName){
				return arr.filter(children => children.sportsRange === soreName)
			},
			goRouter(){
				uni.navigateTo({
					url: '/pages_arenaControl/addArena/addArena?groundId=add'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.arenaControl{
	padding: 20rpx 30rpx 0;
	min-height: 100vh;
	background-color: #F6F7FB;
	.add_mode{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #999;
		height: 120rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}
}
</style>