<template>
	<view>
		<view class="title">
			<text v-for="(item,index) in tips" :key="index" class="flex flex-direction">
				{{ item }}
			</text>
		</view>
		<view class="item-box" v-for="(item,index) in list" :key="index" @click="jump(index,item.projectId)">
			<view class="item-num">{{ index + 1 }}</view>
			<text class="item-content">{{ item.projectName }}</text>
		</view>
	</view>
</template>

<script>
import { firstproject } from 'api/firstproject'
	export default {
		async onLoad () {
			const that = this
			try{
				const params = {
					param: {
						competeTimeId: that.$store.state.project.data.id
					}
				}
				const data = await firstproject(params)
				that.list = data
				// console.log(data)
			}catch(e){
				//TODO handle the exception
			}
		},
		data() {
			return {
				tips: ['参赛项目（各项各组报名不满3人 / 队）', '取消该组该项比赛'],
				list: [{
					projectId: "2001",
					projectName: "计数赛"
				}, {
					projectId: "2002",
					projectName: "花样赛"
				}],
			}
		},
		methods: {
			jump (num,id) {
				if (num === 0) {
					uni.navigateTo({
						url:`./NumMatch?id=${id}`
					})
				} else if (num === 1) {
					uni.navigateTo({
						url:`./PatternMatch?id=${id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 12px;
		color: $red;
		overflow: auto;
	}
	.item-box {
		 margin-top: 24px;
		 height: 80px;
		 line-height: 80px;
		 font-size: 18px;
		 width: 670rpx;
		 margin-left: 40rpx;
		 padding-left: 56rpx;
		 position: relative;
		 box-shadow: 0px 2px 5px $grey;
		 border-radius: 10px;
	}
	.item-num {
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		top: 20px;
		text-align: center;
		line-height: 40px;
		background-color: #709AFC;
		color: #fff;
	}
	.item-content {
		 position: absolute;
		 left: 180rpx;
		 font-size: 16px;
		 top: 0;
	}
</style>
