<template>
  <div class="datiing">
    <div class="jishi">
      <div class="bar">
        <div
          :style="{ width: (1 - current / daojishi) * 100 + '%' }"
          class="activeLine"
        ></div>
        <div
          :style="{ left: (1 - current / daojishi) * 100 + '%' }"
          class="dot"
        ></div>
      </div>
      <span class="time">00:{{ fixNum }}</span>
    </div>
    <div class="dcon" v-if="tiku.length > 0 && status == '答题中'">
      <p>{{ currentIdx + 1 + "、" + currentTimu.title }}</p>
      <div class="qlist">
        <div class="qline"></div>
        <ul>
          <li
            :class="{ active: active == item.id }"
            @click="active = item.id"
            v-for="(item, i) in currentTimu.answer"
            :key="i"
          >
            <span>{{ item.id }}、{{ item.txt }}</span>
          </li>
        </ul>
        <span>第 {{ currentIdx + 1 }} 题 / 共 {{ tiku.length }} 题</span>
      </div>
    </div>

    <div class="tipscon" v-else>
      <img
        :src="
          require(`@/assets/images/question/${
            status == '答题完成' ? 'success' : 'error'
          }.png`)
        "
        alt=""
      />
      <div v-if="tips[status]">
        <p>{{ tips[status].title }}</p>
        <span>{{ tips[status].desc }}</span>
      </div>
    </div>

    <template v-if="status == '答题中'">
      <div class="qbtn" v-if="currentIdx < 9" @click="next">
        <span>下一题</span>
      </div>
      <div class="qbtn primary" @click="next" v-else>
        <span>提交</span>
      </div>
    </template>
    <div
      class="qbtn"
      @click="requestion"
      v-else-if="status == '答题错误' || status == '答题超时'"
    >
      <span>重新答题</span>
    </div>

    <div class="datifinish" v-else>
      <div class="qbtn" @click="requestion">
        <span>分享好友</span>
      </div>
      <div class="qbtn primary" @click="lingjiang">
        <span>领取奖励</span>
      </div>
      <div class="qbtn" @click="requestion">
        <span>继续答题</span>
      </div>
    </div>
  </div>
</template>
<script>
import { questions } from './data'

let random = function (min, max) {
  var range = max - min
  var rand = Math.random()
  var num = min + Math.round(rand * range)

  return num
}

let getNorepeatNum = function (min, max, num) {
  let arr = []

  while (arr.length < num) {
    let ran = random(min, max)
    if (!arr.includes(ran)) {
      arr.push(ran)
    }
  }

  return arr
}

let tips = {
  答题超时: {
    title: '答题超时',
    desc: '不要气馁，再接再厉~'
  },
  答题错误: {
    title: '答题错误',
    desc: '不要气馁，再接再厉~'
  },
  答题完成: {
    title: '完成挑战',
    desc: '本次答对10道题'
  }
}

export default {
  data () {
    return {
      daojishi: 20,
      current: 20,
      inter: null,
      currentIdx: 0,
      active: '',
      questions,
      tiku: [],
      reloadTimu: false,
      status: '答题中',
      tips
    }
  },

  methods: {
    clearInter () {
      this.active = ''
      clearInterval(this.inter)
      this.inter = null
    },
    requestion () {
      this.reloadTimu = true
      this.currentIdx = 0
    },
    next () {
      if (this.currentTimu.correct === this.active) {
        this.currentIdx++
        if (this.currentIdx > 9) {
          this.status = '答题完成'
          return
        }
        this.startInter()
      } else {
        this.status = '答题错误'
      }
    },
    lingjiang () {
      this.$emit('lingjiang', true)
    },
    startInter () {
      this.clearInter()
      this.current = this.daojishi
      this.inter = setInterval(() => {
        if (this.current === 0) {
          this.status = '答题超时'
          return
        }
        this.current--
      }, 1000)
    },
    getTimu () {
      let idxarr = getNorepeatNum(0, 40, 10)
      this.tiku = idxarr.map(item => {
        return questions[item]
      })
      this.reloadTimu = false
      this.status = '答题中'
      this.startInter()
    }
  },
  computed: {
    fixNum () {
      return String(this.current).padStart(2, '0')
    },
    currentTimu () {
      return this.tiku[this.currentIdx]
    }
  },
  watch: {
    status (newVal) {
      if (newVal !== '答题中') {
        this.clearInter()
      }
    },
    reloadTimu (newVal) {
      if (newVal) {
        this.getTimu()
      }
    }
  },
  beforeDestroy () {
    this.clearInter()
  },
  mounted () {
    this.$nextTick(() => {
      this.getTimu()
    })
  }
}
</script>
<style lang="less" scoped>
@color: #fa3800;
.datiing {
  width: 80%;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  .jishi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .bar {
      flex: auto;
      border-radius: 13px;
      background: #fff;
      height: 12px;
      box-shadow: 0px 1px 5px #000000;
      position: relative;
      display: flex;
      .activeLine {
        height: 4px;
        background-color: @color;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 12px;
        margin: 0 6px;
        max-width: 100%;
      }

      @wh: 20px;
      .dot {
        width: @wh;
        height: @wh;
        display: inline-block;
        position: absolute;
        z-index: 999;
        background-color: #fff;
        top: 50%;
        transform: translate(-@wh * 0.5, -50%);
        border-radius: 50%;
        box-shadow: 0px 1px 5px #000000;
        &::before {
          content: "";
          background-color: @color;
          width: @wh * 0.7;
          height: @wh * 0.7;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
        }
      }
    }
    .time {
      text-shadow: 0px 0px 5px #000000;
      width: 60px;
      text-align: right;
      flex-shrink: 0;
      display: inline-block;
      font-weight: bold;
      vertical-align: middle;
    }
  }
  .dcon {
    width: 100%;
    box-shadow: 0 0 8px #000;
    background-color: #fff;
    color: #54320b;
    padding: 32px 36px;
    border-radius: 14px;
    margin-top: 20px;
    box-sizing: border-box;
    > p {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .qlist {
      background-color: #f3f3f3;
      border-radius: 0px 0px 4px 4px;
      position: relative;
      padding-bottom: 10px;
      .qline {
        background: linear-gradient(90deg, #dfdfdf, #e6e6e6);
        width: 100%;
        height: 4px;
      }
      > ul {
        margin: 10px 25px;
        height: 150px;
        overflow-y: auto;
        > li {
          text-align: left;
          cursor: pointer;
          margin: 10px 0;
          padding-left: 30px;
          position: relative;
          @wh: 16px;
          &::before {
            content: "";
            display: inline-block;
            width: @wh;
            height: @wh;
            background-color: #fff;
            border: 3px solid rgba(112, 112, 112, 0.6);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
          }
          &::after {
            content: "";
            width: @wh * 0.8;
            height: @wh * 0.8;
            background-color: @color;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: @wh * 0.29;
            display: none;
          }

          &.active {
            &::after {
              display: inline-block;
            }
          }

          > span {
            display: inline-block;
            line-height: 1.5;
          }
        }
      }
      > span {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 12px;
        color: rgba(49, 27, 4, 0.5);
      }
    }
  }

  .tipscon {
    width: 100%;
    min-height: 200px;
    position: relative;
    > img {
      width: 40%;
      margin-top: 10px;
    }
    > div {
      color: #54320b;
      position: absolute;
      top: 140px;
      left: 41%;
      > p {
        font-size: 18px;
        margin-bottom: 6px;
      }
      > span {
        font-size: 12px;
      }
    }
  }

  .qbtn {
    margin-top: 40px;
  }

  .datifinish {
    display: flex;
    width: 100%;
    justify-content: space-between;
    justify-items: center;
  }
}
</style>
