<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
                style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px;line-height:40px ">
                <span>
                  <span>{{ dataDetail.name }}</span>
                  <template v-for="roundsItem in dataDetail.rounds">
                    <span v-if="roundsItem.active" :key="roundsItem.roundId">（{{ roundsItem.name }}）</span>
                  </template>
                </span>
                <span style="float:right">比赛时间：{{ dataDetail.roundBeginTime }}</span>
              </div>

              <div style="font-size:12px;color:#999;line-height:32px">
                <span>已报名：{{ dataDetail.passCount }}/</span>
                <span style="color:#333">{{ dataDetail.needCount }}</span>

                <template v-if="dataDetail.state == 7 && dataDetail.remaining == 0">
                  <span style="float:right;color:red">已经过了报名时间，不可以报名了</span>
                </template>
                <template v-else>
                  <span v-if="dataDetail.state == 7 && dataDetail.remaining > 0"
                        style="float:right;color:red">报名将在{{ remainingStr }}后开始</span>
                  <template v-if="dataDetail.state == 1">
                    <span v-if="remainingTime > 0" style="float:right;color:red">报名剩余时间：{{ remainingStr }}</span>
                  </template>

                  <template v-if="dataDetail.state == 2">
                    <span v-if="remainingTime > 0" style="float:right;color:red">竞赛将在{{ remainingStr }}后开始</span>
                    <span v-else style="float:right;color:red">竞赛已经开始，请点击“立即做题”进行作答</span>
                  </template>

                  <template v-if="dataDetail.state == 3 || dataDetail.state == 4">
                    <span v-if="remainingTime > 0" style="float:right;color:red">竞赛将在{{ remainingStr }}后结束</span>
                    <span v-else style="float:right;color:red">此次竞赛已经结束</span>
                  </template>
                </template>
              </div>

              <el-button v-if="dataDetail.state == 7 && dataDetail.remaining > 0" :disabled="true" type="primary"
                         @click="competitionSignUp">立即报名
              </el-button>
              <el-button v-else-if="dataDetail.state == 1" type="primary" @click="competitionSignUp">立即报名</el-button>
              <span v-else-if="dataDetail.state == 7 && dataDetail.remaining == 0">未参加此次竞赛</span>
              <el-button v-else-if="dataDetail.state == 2" type="primary" :disabled="remainingTime == 0 ? false : true"
                         @click="makeQuestion(dataDetail.competitionRoundId)">立即做题
              </el-button>
              <!--              <el-button type="info" @click="makeQuestion(dataDetail.competitionRoundId)">点击做题</el-button>-->

              <el-image style="float:right;cursor:pointer"
                        @click="$router.push({path: '/funcompetition/information/rules'}) " :src="img.rule"></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-table v-loading="loading" :data="dataDetail.competitors" style="width: 100%">
      <el-table-column label="序号" prop="ranking" 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="signTime" align="center"/>
    </el-table>
  </div>
</template>

<script>
import { getDetail, addCompetitor } from '@/api/webApi/competition'
import { formatDuration } from '@/utils/index'
import transferMixin from '@/components/mx-transfer-mixin'
import consts from '@/common/mx-const'

export default {
  mixins: [transferMixin],
  data() {
    return {
      competitionId: null,
      img: {
        rule: require('@/assets/images/rule.png')
      },
      loading: false,
      tabPosition: 'top',
      dataDetail: {},
      // dataList: [{}, {}, {}, {}, {}, {}, {}, {}]

      // currentState: null,
      remainingTime: 0,
      remainingStr: '0秒'
    }
  },
  created() {
    this.competitionId = this.$route.query.competitionId
    // this.competitionId = this.$route.params.competitionId

    this.getDetailById()
  },
  methods: {
    getDetailById() {
      let that = this
      that.loading = true
      getDetail({ competitionId: that.competitionId }).then(response => {
        that.dataDetail = response.data
        clearInterval(that.reduceTimer)
        if (that.dataDetail.remaining > 0) {
          // 如果remaining（答题时间倒计时）大于0，启动倒计时
          this.remainingTime = that.dataDetail.remaining
          that.reduceTimer = setInterval(() => {
            if (that.remainingTime > 0) {
              that.remainingStr = formatDuration(that.remainingTime)
              --that.remainingTime
            } else {
              that.remainingStr = '0秒'
              clearInterval(that.reduceTimer)
              // 调接口更新状态和数据
              this.getDetailById()
            }
          }, 1000)
          that.remainStr = 90
        }
        // that.daleth = that.dataDetail.competitors
        that.loading = false
      }).catch(err => {
        that.loading = false
      })
    },
    back() {
      this.$router.back()
    },
    getList() {
      this.loading = true
      // listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   response => {
      // this.dataList = response.rows;
      this.loading = false
      //   }
      // );
    },

    competitionSignUp() {
      this.loading = true
      addCompetitor({ competitionId: this.competitionId }).then(response => {
        this.msgSuccess('报名成功')
        this.getDetailById()
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },

    makeQuestion(competitionRoundId) {
      if (this.dataDetail.state > 1) {
        const data = { competitionRoundId: competitionRoundId, examineeType: consts.enum.paper.examineeType.competition }
        this.transferTo('/evaluating/answer', data)
      } else {
        this.$message.warning('当前状态不能进行答题')
      }
    }
  }
}
</script>

<style>
</style>
