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

<script>
import { secondproject } from 'api/secondproject'
	export default {
		async onLoad (options) {
			const that = this
			try{
				const params = {
					param: {
						firstProjectId: options.id
					}
				}
				const data = await secondproject(params)
				that.list = data
				console.log(data)
			}catch(e){
				//TODO handle the exception
			}
		},
		data() {
			return {
				list: [],
			}
		},
		methods: {
			jump (num,obj) {
				if (obj.team - 0 === 0) {
					uni.navigateTo({
						url:`./MatchDetail/MatchDetail?TypeNum=${num}&obj=${JSON.stringify(obj)}`
					})
				} else {
					uni.navigateTo({
						url:`./MatchDetail/TeamMatch?TypeNum=${num}&obj=${JSON.stringify(obj)}`
					})
				}
			}
		}
	}
</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: 20px;
		 height: 20px;
		 border-radius: 5px;
		 top: 30px;
		 font-size: 12px;
		 text-align: center;
		 line-height: 20px;
		 background-color: #709AFC;
		 color: #fff;
	}
	.item-content {
		 position: absolute;
		 left: 150rpx;
		 font-size: 16px;
		 top: 0;
	}
</style>
