<template>
    <div class="app-container">
       <el-card class="box-card" style="margin-bottom:30px">
          <el-row :gutter="24" >
            <el-col :span="24" >
            	 <div style="position:relative; ">
			        <el-image style="width: 100%;height:200px"  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" ></el-image>
				        <div  style="position:relative ">
				        	<div  v-if="detail.state == 1 || detail.state==0">
						        <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;line-height:40px ">{{detail.name}}<span style="float:right">比赛时间：{{detail.roundBeginTime}}</span></div>
						        <div style="font-size:12px;color:#999;line-height:32px">已报名：{{detail.passCount || 0}}/<span style="color:#333">{{detail.needCount}}</span><span style="float:right;color:red">请在比赛5分钟前进入比赛</span></div>
					         	<div style="color:#999">未参加此次竞赛</div>
						        <el-image style="float:right;cursor:pointer" @click="$router.push({path: '/funcompetition/information/rules'}) " :src="img.rule"></el-image>
					        </div>
					        <div  class="text-center" style="padding:20px;line-height:40px" v-else>
                    <div v-if="detail.score>60">
                    	<el-image  :src="img.jiang"></el-image>
                      <div style="color:#61DA66;font-size:18px; font-family: cursive;">恭喜您成功闯过预选赛！</div>
                      <div style="color:red;font-size: 28px;">成绩：{{detail.score}}</div>
                      <div>{{detail.name}}</div>
                      <div style="font-size: 20px;margin-top:20px">下次竞赛时间：2021年9月21号上午9点</div>
                      <div><span style=" color:red;;font-size:14px">请规定时间内参与比赛</span></div>
                    </div>
                    <div v-else>
                      <el-image  :src="img.lose"></el-image>
                      <div style="color:#999;font-size:18px; font-family: cursive;">很遗憾，你闯关失败！</div>
                      <div style="color:red; font-size: 28px;">成绩：{{detail.score|| 0}}</div>
                      <div>{{detail.name}}</div>
                      <div style="font-size: 20px;;margin-top:20px">请您接再厉参加其他赛事</div>
                      <div><span style=" color:red;font-size:14px">请规定时间内参与比赛</span></div>
                    </div>
			        		</div>
                  	<div style="padding:30px 15% 0;margin-top:30px">
                  		<el-steps :active="active" align-center finish-status="success">
                        <el-step title="预选赛"></el-step>
                        <el-step title="初赛"></el-step>
                        <el-step title="复赛"></el-step>
                        <el-step title="决赛"></el-step>
                      </el-steps>
                  	</div>
				        </div>
			 	</div>
             </el-col >
          </el-row >
      </el-card>
        <el-table v-loading="loading" :data="detail.competitors?detail.competitors:[]"  style="width: 100%" >
         <el-table-column label="序号" type="index"  align="center"   width="50"/>
         <el-table-column label="姓名" prop="name"  align="center" />
         <el-table-column label="学校" prop="schoolName"    align="center"   />
         <el-table-column label="名次" prop="ranking"  align="center" />
       </el-table>
    </div>
</template>

<script>
  import { getDetail } from "@/api/webApi/competition";
  export default {
    data() {
      return {
        active:1,//当前阶段
          detail:{},
         competitionId :this.$route.query.competitionId,
	      	img:{
            rule:require('@/assets/images/rule.png'),
            jiang:require('@/assets/images/jiang.png'),
            lose:require('@/assets/images/lose.png'),
          },
          loading:false,
          tabPosition:'top',
        }
      },
    created() {
      this.getList()
    },
    methods: {
      back(){
        this.$router.back()
      },
      getList() {
        let that = this
        that.loading = true;
        getDetail({competitionId:that.competitionId}).then(response => {
          that.detail = response.data;
          that.detail.rounds.forEach((item, idx) => {
            if(item.active ){
              that.active = idx
            }
          })
          that.loading = false;
        })
      }
    },
  }
</script>

<style>
</style>
