<template>
  <div class="fx-column">
    <div class="fx-row fx-bet-cen">
      <slot name="plus-header" :options="options"></slot>
    </div>
    <mx-question-content :options="options"></mx-question-content>
    <div class="fx-row fx-bet-cen mt30">
      <slot name="plus-main" :options="options">
        <plus-question-toggle-buttons v-if="useAnswerStyle||useParseStyle"
                                      :options="options"></plus-question-toggle-buttons>
        <plus-question-duration v-if="!useAnswerStyle&&!useParseStyle" :options="options"></plus-question-duration>
        <slot name="plus" :options="options">
        </slot>
        <plus-question-score v-if="useReadonlyMode" :options="options" class="ml30 mr30"></plus-question-score>
        <plus-question-correct :options="options" class="ml30"></plus-question-correct>
        <plus-question-collection :options="options" class="ml30"></plus-question-collection>
      </slot>
    </div>
    <div v-if="useAnswerStyle||useParseStyle" class="fx-column board mt10 card-shadow">
      <mx-question-board-answer v-if="useAnswerStyle" :options="options"></mx-question-board-answer>
      <mx-question-board-parse v-if="useParseStyle" :options="options"></mx-question-board-parse>
    </div>
    <div class="fx-row fx-bet-cen mt10">
      <slot name="plus-footer" :options="options">
        <!--   NOTE:plus-question-duration互斥   -->
        <plus-question-duration v-if="useAnswerStyle||useParseStyle" :options="options"></plus-question-duration>
      </slot>
    </div>
  </div>
</template>

<script>
import questionMixin from './mx-question-mixin'
import MxQuestionContent from './mx-question-content'
import PlusQuestionToggleButtons from '@/components/MxPaper/plus/plus-question-toggle-buttons'
import PlusQuestionCollection from '@/components/MxPaper/plus/plus-question-collection'
import PlusQuestionCorrect from '@/components/MxPaper/plus/plus-question-correct'
import PlusQuestionDuration from '@/components/MxPaper/plus/plus-question-duration'
import MxQuestionBoardAnswer from '@/components/MxPaper/mx-question-board-answer'
import MxQuestionBoardParse from '@/components/MxPaper/mx-question-board-parse'
import PlusQuestionScore from '@/components/MxPaper/plus/plus-question-score'

export default {
  mixins: [questionMixin],
  name: 'mx-question',
  components: {
    PlusQuestionScore,
    MxQuestionBoardParse,
    PlusQuestionDuration,
    PlusQuestionCorrect,
    PlusQuestionCollection,
    PlusQuestionToggleButtons,
    MxQuestionContent,
    MxQuestionBoardAnswer
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.board {
  border: 1px solid #6cd1b5;
  padding: 10px;
  border-radius: 8px;
}
</style>
