<template>
	<view >
		<view class="item-box" v-for="(item,index) in list" :key="index" @click="jump(item)">
			<view class="item-num">{{ index + 1 }}</view>
			<text class="item-content">{{ item.name }}</text>
			<view  class="item-infor">
				<text style="color:#F0AD4E" v-if="item.competeStatus === 0">未开始</text>
				<text style="color:#39B54A" v-else-if="item.competeStatus === 1">
					正在报名中
				</text>
				<text style="color:#C0C0C0" v-else>已结束</text>
			</view>
			<view class="item-time">
				<text :style="{color:item.competeStatus === 1?'#39B54A':'#C0C0C0'}" >
					({{$moment(+item.signUpStartTime).format('MM-DD HH:mm:ss')}} - {{$moment(+item.signUpEndTime).format('MM-DD HH:mm:ss')}})
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import { competeTimeList } from 'api/competeTimeList'
	export default {
		data() {
			return {
				list: [],
			}
		},
		created() {
			this.getMatchList()
		},
		methods: {
			...mapMutations('project',['setCompanyId','setType']),
			async getMatchList() {
				const res = await competeTimeList()
				this.list = res
			},
			jump(item) {
				console.log(item.competeStatus)
				if(item.competeStatus === 1) {
					this.setCompanyId(item.id)
					this.setType(item.type)
					uni.navigateTo({
						url:`../First/First`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 .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-infor {
 	 position: absolute;
 	 left: 180rpx;
 	 font-size: 30rpx;
 	 color: $gray;
 	 top: 6px;
 }
 .item-content {
 	 position: absolute;
 	 left: 180rpx;
 	 top: -16px;
 	 font-size: 16px;
 }
 .item-time {
	 font-size: 24rpx;
	 position: absolute;
	 left: 180rpx;
	 top: 26px;
 }
</style>
