<template>
  <div class="fx-column pl20 pr20 pt20 pb40 ml20 card-shadow-8 bg-page">
    <div class="f20 fx-row fx-cen-cen relative">
      答题卡
      <plus-paper-help class="absolute f-999" style="right: 0"></plus-paper-help>
    </div>
    <div class="fx-row fx-wrap fx-bet-cen mt20">
      <template v-for="(q, index) in paper.questions">
        <el-badge :value="calcBadgeValue(q,index)" :type="calcBadgeType(q,index)">
          <el-button class="navigator-button" :type="calcButtonType(q, index)" :class="calcButtonClass(q, index)"
                     @click="goIndexAction(index)">
            <span class="fx-row fx-cen-cen">{{ q.seq }}</span>
          </el-button>
        </el-badge>
      </template>
    </div>
    <plus-paper-countdown v-if="allowAnswer" :options="options" class="mt20"></plus-paper-countdown>
    <plus-paper-score v-if="!allowAnswer" :options="options" class="mt20"></plus-paper-score>
    <div v-if="allowAnswer" class="fx-row fx-cen-cen mt20">
      <el-button type="primary" @click="paperSubmitAction">提交答卷</el-button>
    </div>
    <div v-if="allowScore" class="fx-row fx-cen-cen mt20">
      <el-button type="primary" @click="scoreFinishAction">结束阅卷</el-button>
    </div>
  </div>
</template>

<script>
import paperMixin from './mx-paper-mixin'
import PlusPaperCountdown from '@/components/MxPaper/plus/plus-paper-countdown'
import PlusPaperScore from '@/components/MxPaper/plus/plus-paper-score'
import PlusPaperHelp from '@/components/MxPaper/plus/plus-paper-help'

export default {
  components: { PlusPaperHelp, PlusPaperScore, PlusPaperCountdown },
  mixins: [paperMixin],
  name: 'mx-paper-navigator',
  methods: {
    calcBadgeType(q, idx) {
      return this.allowAnswer ? 'success' : 'danger'
    },
    calcBadgeValue(q, idx) {
      return this.allowAnswer ? (q._isFinished ? '✓' : '') : q.score
    },
    calcButtonType(q, idx) {
      let type = q._isObjective ? 'primary' : 'warning'
      if (idx != this.currentTab) type += '-down'
      return type
    },
    calcButtonClass(q, idx) {
      let clazz = q._isObjective ? 'card-shadow' : 'card-shadow-yellow'
      if (idx == this.currentTab) clazz += '-8'
      return [clazz]
    }
  }
}
</script>
<style scoped>
.navigator-button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  margin: 5px;
}

/deep/ .el-badge__content.is-fixed {
  top: 10px;
  right: 20px;
}

/deep/ .el-button--primary-down {
  background-color: #D2F1E8;
}

/deep/ .el-button--warning {
  background-color: #F5AB86;
}

/deep/ .el-button--warning-down {
  background-color: #FDEAE1;
}

/deep/ .el-badge__content {
  line-height: 16px;
}
</style>
