<template>
  <div class="fx-column" v-loading="options.loading||options.committing" @keyup.enter="shortcutGoNext"
       @keyup.delete="shortcutGoPrev" @keyup.tab="forceBlur" tabindex="0">
    <mx-paper-header :options="options"></mx-paper-header>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24-options.navigatorSpan">
        <mx-question ref="questionContent" v-if="options.paper&&currentQuestion"
                     :options="currentQuestionOptions" :key="currentQuestion.questionId">
          <template #plus>
            <plus-paper-prev-next :options="options"></plus-paper-prev-next>
          </template>
        </mx-question>
      </el-col>
      <el-col :span="options.navigatorSpan">
        <mx-paper-navigator v-if="options.paper" :options="options"></mx-paper-navigator>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import paperMixin from './mx-paper-shortcut-mixin'
import MxPaperHeader from '@/components/MxPaper/mx-paper-header'
import MxQuestion from '@/components/MxPaper/mx-question'
import MxPaperNavigator from '@/components/MxPaper/mx-paper-navigator'
import PlusPaperPrevNext from '@/components/MxPaper/plus/plus-paper-prev-next'

export default {
  // NOTE: paper写了一些快捷键的处理逻辑
  mixins: [paperMixin],
  name: 'mx-paper',
  components: { PlusPaperPrevNext, MxPaperNavigator, MxQuestion, MxPaperHeader }
}
</script>

<style lang="scss" scoped>

</style>
