<template>
  <div
    style="
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
    "
  >
    <div>
      <div class="gy-area-title">答题提示</div>
      <div class="time-remaining">
        剩余时间：<span>{{ formatTime(timeRemaining) }}</span>
      </div>
      <div class="write-progress">
        <div class="percent">
          <div>答题进度：</div>
          <div class="ratio">{{ answers?.length }}/{{ questions?.length }}</div>
        </div>
      </div>
    </div>

    <div class="action-btn-group">
      <el-button round type="primary" @click="handler('submit')"
        >提交试卷</el-button
      >
      <el-button plain round type="danger" @click="handler('cancel')"
        >退出考试</el-button
      >
    </div>
  </div>
</template>

<script>
import '@/views/assessment-evaluation/utils/gyStyle.scss'
export default {
  props: {
    answers: {},
    historyInfo: {},
    questions: {},
    mode: {},
    now: { default: 0 }
  },
  data () {
    return {
      reverseTimer: null,
      timeRemaining: 0,
      serviceTime: 0
    }
  },
  watch: {
    now: {
      handler (nv) {
        if (nv <= 0) {
          nv = new Date().getTime()
        }
        this.serviceTime = nv
      }
    },
    historyInfo: {
      deep: true,
      handler (nv) {}
    }
  },
  mounted () {
    this.initReverseTimer()
  },
  activated () {
    this.initReverseTimer()
  },
  deactivated () {
    this.cancelTimer()
  },
  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
  beforeDestroy () {
    this.cancelTimer()
  },

  methods: {
    /*
    传入事件,抛出事件
    */
    handler (emit) {
      this.$emit(emit)
    },
    /*
    取消计时器
    */
    cancelTimer () {
      if (this.reverseTimer != null) {
        clearInterval(this.reverseTimer)
        this.reverseTimer = null
      }
    },
    /*
     初始化倒计时定时器
      */
    initReverseTimer () {
      this.cancelTimer()
      this.reverseTimer = setInterval(() => {
        if (this.historyInfo) {
          const curTime = this.serviceTime
          const endTime = this.historyInfo.endTimestamp
          this.timeRemaining = endTime - curTime
          if (this.timeRemaining <= 0) {
            this.timeRemaining = 0
            this.handler('forceSubmit')
            clearInterval(this.reverseTimer)
          }
        } else {
          this.cancelTimer()
        }
        this.serviceTime += 1000
      }, 1000)
    },
    /*
    格式化毫秒时间戳
    */
    formatTime (msTime) {
      const time = msTime / 1000
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    }
  }
}
</script>

<style lang="scss" scoped>
.action-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.write-progress {
  background: #f1f5fe;
  border-radius: 16px;
  margin-top: 15px;
  padding: 10px;
  .percent {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-weight: bold;
    .ratio {
      font-size: 12px;
      font-weight: normal;
      color: #666;
    }
  }
}
.time-remaining {
  width: 100%;
  height: 40px;
  font-weight: bold;
  display: flex;
  padding: 0 10px;

  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
  background: #f1f5fe;

  span {
    font-size: 18px;
    color: #ee0000;
    font-weight: bold;
  }
}
</style>
