/*timeline*/
<template>
  <div class="timeline">
    <p class="bm_title" @click="clickliti('matchLayout')">大赛详情</p>
    <div class="bm_succeed">
      <img src="@/assets/match/bm1.png" />
      <p class="wenzi">您已报名成功！</p>

      <p>请于{{ timequjian }}(零点)</p>
      <p>点击下图 步骤“{{ status }}”领取</p>
    </div>
    <div class="step">
      <el-progress :percentage="num"></el-progress>

      <ul>
        <li>
          <div class="i">
            <img src="@/assets/match/ywc1.png" />
          </div>
          <p>报名</p>
          <span>{{ appleStime }}</span>
        </li>

        <li :class="[time <= newtime && newtime < answerS ? 'on' : '']">
          <div class="i" v-if="newtime >= answerS" @click="ywc('topic')">
            <img src="@/assets/match/ywc2.png" />
          </div>
          <div
            class="i"
            v-else-if="time <= newtime && newtime < answerS"
            @click="clickliti('topic')"
          >
            <img src="@/assets/match/z2.png" />
          </div>
          <div class="i" v-else @click="weikaifang('topic')">
            <img src="@/assets/match/i2.png" />
          </div>
          <p>预演/领题</p>
          <span>{{ appleStime }}</span>
        </li>
        <li :class="[answerS <= newtime && newtime < answerEtime1 ? 'on' : '']">
          <div class="i" v-if="newtime >= answerEtime1" @click="ywc('dati')">
            <img src="@/assets/match/ywc3.png" />
          </div>
          <div
            class="i"
            v-else-if="answerS <= newtime && newtime < answerEtime1"
            @click="clickliti('dati')"
          >
            <img src="@/assets/match/z3.png" />
          </div>
          <div class="i" v-else @click="weikaifang('dati')">
            <img src="@/assets/match/i3.png" />
          </div>
          <p>答题/领题</p>
          <span>{{ answerStime }}</span>
        </li>
        <li :class="[answerS <= newtime && newtime < reportE ? 'on' : '']">
          <div class="i" v-if="newtime >= reportE" @click="ywc('baogaos')">
            <img src="@/assets/match/ywc4.png" />
          </div>
          <div
            class="i"
            v-else-if="answerS <= newtime && newtime < reportE"
            @click="clickliti('baogaos')"
          >
            <img src="@/assets/match/z4.png" />
          </div>
          <div class="i" v-else @click="weikaifang('baogaos')">
            <img src="@/assets/match/i4.png" />
          </div>
          <p>报告上传</p>
          <span>{{ answerStime }}</span>
        </li>
        <li :class="[reviewS <= newtime && newtime < reviewE ? 'on' : '']">
          <div class="i" v-if="newtime >= reviewE" @click="ywc('pingfen')">
            <img src="@/assets/match/ywc5.png" />
          </div>
          <div
            class="i"
            v-else-if="reviewS <= newtime && newtime < reviewE"
            @click="clickliti('pingfen')"
          >
            <img src="@/assets/match/z5.png" />
          </div>
          <div class="i" v-else @click="weikaifang('pingfen')">
            <img src="@/assets/match/i5.png" />
          </div>
          <p>评委评分</p>
          <span>{{ reviewStime }}</span>
        </li>
        <li :class="[reviewE <= newtime ? 'on' : '']">
          <div class="i" v-if="reviewE <= newtime" @click="clickliti('result')">
            <img src="@/assets/match/z6.png" />
          </div>
          <div class="i" v-if="reviewE <= newtime" @click="clickliti('result')">
            <img src="@/assets/match/ywc6.png" />
          </div>
          <div class="i" v-else @click="weikaifang('result')">
            <img src="@/assets/match/i6.png" />
          </div>
          <p>查看结果</p>
          <span>{{ reviewEtime }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { Message } from 'element-ui' // 引入Message、MessageBox
import ywc1 from '@/assets/match/ywc1.png'
import ywc2 from '@/assets/match/ywc2.png'
import ywc3 from '@/assets/match/ywc3.png'
import ywc4 from '@/assets/match/ywc4.png'
import ywc5 from '@/assets/match/ywc5.png'
import ywc6 from '@/assets/match/ywc6.png'

import z2 from '@/assets/match/z2.png'
import z3 from '@/assets/match/z3.png'
import z4 from '@/assets/match/z4.png'
import z5 from '@/assets/match/z5.png'
import z6 from '@/assets/match/z6.png'

import i2 from '@/assets/match/i2.png'
import i3 from '@/assets/match/i3.png'
import i4 from '@/assets/match/i4.png'
import i5 from '@/assets/match/i5.png'
import i6 from '@/assets/match/i6.png'
export default {
  name: 'megagame',
  components: {},
  data() {
    return {
      imgs: {
        ywc1,
        ywc2,
        ywc3,
        ywc4,
        ywc5,
        ywc6,
        z2,
        z3,
        z4,
        z5,
        z6,
        i2,
        i3,
        i4,
        i5,
        i6,
      },
      appleEtime1: Number,
      answerStime1: Number,
      answerEtime1: Number,
      reviewStime1: Number,
      reportEtime1: Number,
      reviewStime1: Number,
      reviewEtime1: Number,

      newtime: Number,
      time: Number,
      answerS: Number,
      reportE: Number,
      reviewS: Number,
      reviewE: Number,
      answerEtime1: Number,
      timequjian: '',
      status: '1',
      appleStime: '',
      appleEtime: '',
      answerStime: '',
      reportEtime: '',
      reviewStime: '',
      reviewEtime: '',
      currentPage: '',
      answerEtime: '',
      megagameId: '',
      uid: '',
      img: '',
      activeSteps: 2,
      num: 0,
    }
  },
  created() {},
  mounted() {
    this.megeme()
  },
  methods: {
    //获取进度
    megeme() {
      const params = {
        transCode: 'D00027',
      }
      request(params)
        .then((res) => {
          this.megagameId = res.megagameId
          sessionStorage.setItem('megagameId', res.megagameId)
          this.appleStime = this.shijiantime(res.appleStime) //报名
          //  this.appleEtime=this.shijiantime(res.appleStime);//预演、领题
          this.answerStime = this.shijiantime(res.answerStime) //答题、领题
          this.answerEtime = this.shijiantime(res.answerEtime) // 答题结束
          // this.baogao=this.shijiantime(res.answerEtime);
          this.reportEtime = this.shijiantime(res.reportEtime) //报告上传
          this.reviewStime = this.shijiantime(res.reviewStime) //评委评分
          this.reviewEtime = this.shijiantime(res.reviewEtime) //查看结果
          let datatime = new Date(this.appleStime)
          this.time = datatime.getTime(datatime) //预演、领题
          let datatime2 = new Date(this.answerStime) //答题、领题
          this.answerS = datatime2.getTime(datatime2)
          let datatime22 = new Date(this.answerEtime) //答题、领题结束
          this.answerEtime1 = datatime22.getTime(datatime22)
          let datatime3 = new Date(this.reportEtime) //报告上传
          this.reportE = datatime3.getTime(datatime3)
          let datatime4 = new Date(this.reviewStime) //评委评分
          this.reviewS = datatime4.getTime(datatime4)
          let datatime5 = new Date(this.reviewEtime) ////查看结果
          this.reviewE = datatime5.getTime(datatime5)

          //获取当前时间
          var myDate = new Date()
          //var myDate = new Date("2021-05-02");
          this.newtime = myDate.getTime(myDate)

          //判断时间显示
          if (this.newtime >= this.time && this.newtime < this.answerS) {
            this.status = '2'
            this.num = 40
            this.timequjian = this.appleEtime + '~' + this.answerStime
          } else if (
            this.newtime >= this.answerS &&
            this.newtime < this.answerEtime1
          ) {
            this.status = '3'
            this.num = 60
            this.timequjian = this.answerStime + '~' + this.answerEtime
          } else if (
            this.newtime >= this.answerS &&
            this.newtime < this.reviewEtime
          ) {
            this.status = '4'
            this.num = 80
            this.timequjian = this.answerEtime + '~' + this.reviewStime
          } else if (
            this.newtime >= this.reviewS &&
            this.newtime < this.reviewE
          ) {
            this.num = 100
            this.status = '5'
            this.timequjian = this.reviewStime + '~' + this.reviewEtime
          } else if (this.reviewE <= this.newtime) {
            this.status = '6'
            this.timequjian = this.reviewEtime
          } else {
          }
        })
        .catch((err) => {})
    },
    shijiantime(times) {
      var timearr = times.replace(' ', ':').replace(/\:/g, '-').split('-')
      var timestr = '' + timearr[0] + '-' + timearr[1] + '-' + timearr[2]
      return timestr
    },
    //时间转化
    clickliti(name) {
      switch (name) {
        case 'topic':
          this.$router.push({
            path: '/topic',
            query: { id: '0', megagameId: this.megagameId },
          })
          sessionStorage.setItem('businessType', '0')
          break
        case 'dati':
          this.$router.push({
            path: '/topic',
            query: { id: '1', megagameId: this.megagameId },
          })
          sessionStorage.setItem('businessType', '1')

          break
        case 'baogaos':
          this.$router.push('/userLayout/project')
          break
        case 'pingfen':
          this.$router.push('/userLayout/owerdas')
          break
        case 'result':
          this.$router.push('/result')
          break
        case 'matchLayout':
          this.$router.push('/matchLayout')
          break
      }
    },
    //未开放
    weikaifang() {
      Message('未到开放的时间')
    },
    //ywc
    ywc() {
      Message.warning('已结束')
    },
    // 图片显示
    //判断时间
    // dianji(newtime1,time1,lasttime,path){
    // if(newtime1 >= time1 && newtime1 <= lasttime){
    //  this.img=
    //    this.$router.replace(path)
    //   }else if(newtime1>lasttime){
    //     console.log(newtime1-lasttime);
    //     alert("已结束")
    //   }
    //   else{
    //    alert("还没到开放的时间")
    //   }
    // }
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.timeline {
  @include w_h();
  color: $color_f;
  line-height: 1.5;
  .bm_title {
    text-align: right;
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
  .bm_succeed {
    padding: 20px 0 0;
    text-align: center;
    img {
      @include w_h(60px);
    }
    .wenzi {
      padding: 15px 0;
      font-size: 26px;
    }
  }
  .step {
    position: relative;
    top: 74px;
    ul {
      position: absolute;
      top: -14px;
      width: 100%;
      display: flex;
      li {
        text-align: center;
        flex: 1;
        color: rgba(255, 255, 255, 0.3);
        .i {
          @include w_h(50px, 50px);
          border-radius: 50%;
          overflow: hidden;
          background-color: #001c50;
          border: 5px solid #001c50;
          img {
            @include w_h();
          }
        }
        img {
          transition: all 0.3s;
        }
        &:hover {
          cursor: pointer;
          img {
            opacity: 0.8;
          }
          p {
            color: rgba(255, 255, 255, 1);
          }
          span {
            color: rgba(255, 255, 255, 1);
          }
        }
        .i {
          margin: 0 auto;
        }
        p {
          line-height: 34px;
        }
      }
      li.on {
        color: $color_f;
        &:hover {
          p {
            opacity: 0.8;
          }
          span {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.timeline {
  .el-step {
    &__title.is-process {
      cursor: pointer;
    }

    &__icon.is-text {
      background-color: yellow;
    }
  }
  .el-progress {
    &-bar {
      padding: 0 8%;
      margin: 0;
    }
    &-bar__outer {
      height: 1px !important;
      background-color: #30c9c9;
    }
    &-bar__inner {
      opacity: 0.8;
    }
    &__text {
      display: none;
    }
  }
}
</style>
