<template>
  <div class="pl30 pr30 pt20 pb20">
    <el-row :gutter="40">
      <el-col :span="12">
        <span v-if="!useBoardImageStyle">答：{{ question.answer }}</span>
        <image-upload v-else :value="question.attachments" disabled></image-upload>
      </el-col>
      <el-col :span="12">
        <div v-if="useBoardParseStyle" class="fx-column answer">
          <div v-html="'正确答案：'+sysAnswer"></div>
          <div class="mt30" v-html="question.parse"></div>
        </div>
        <div v-if="useBoardScoreStyle" class="fx-column fx-sta-cen">
          <span>此题总分{{ question['scoreTotal'] }}分</span>
          <el-input-number ref="scoreInput" v-model="question._score" :min="0" :max="question['scoreTotal']"
                           controls-position="right" class="mt20" style="width: 125px"
                           placeholder="输入得分"></el-input-number>
          <el-button type="success" round @click="handleLocalScore" class="mt30"
                     style="width: 100px">提交
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import questionMixin from './mx-question-mixin'

export default {
  mixins: [questionMixin],
  name: 'mx-question-board-parse',
  data() {
    return {
      localScore: 0,
      useMathJax: true
    }
  },
  watch: {
    useBoardParseStyle() {
      //console.log('watch user board parse style changed - call math jax format', this)
      this.$nextTick(_ => this.mxGlobal.MathQueue())
    },
    'question.questionId'() {
      this.$nextTick(_ => this.$refs.scoreInput?.focus())
    },
    useBoardScoreStyle() {
      this.$nextTick(_ => this.$refs.scoreInput?.focus())
    }
  },
  methods: {
    handleLocalScore() {
      console.log('parse area key up - enter')
      this.question._score = this.question._score || 0
      this.eventScoreQuestion(this.options)
    }
  }
}
</script>

<style scoped>
/*/deep/.score .el-input__inner {*/
/*  text-align: center;*/
/*}*/
</style>
