<template>
  <div class="question-item">
    <div class="question-title">
      <span>{{ index || 1 }}、</span>
      <span>({{ $getQuestionTypeText(data.questionType) }})</span>
      <span v-html="data.questionName"></span>
    </div>
    <div class="options-box">
      <!-- 单选题选项 -->
      <template v-if="data.questionType == 1">
        <a-radio-group v-model="data.myAnswers">
          <a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
          <a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
          <a-radio v-if="data.answerC" :style="radioStyle" value="C"><span>C、</span>{{ data.answerC }}</a-radio>
          <a-radio v-if="data.answerD" :style="radioStyle" value="D"><span>D、</span>{{ data.answerD }}</a-radio>
          <a-radio v-if="data.answerE" :style="radioStyle" value="E"><span>E、</span>{{ data.answerE }}</a-radio>
          <a-radio v-if="data.answerF" :style="radioStyle" value="F"><span>F、</span>{{ data.answerF }}</a-radio>
        </a-radio-group>
      </template>
      <!-- 多选题选项 -->
      <template v-if="data.questionType == 2">
        <a-checkbox-group v-model="data.myAnswers">
          <a-col :span="24">
            <a-checkbox v-if="data.answerA" value="A" :style="radioStyle"><span>A、</span>{{ data.answerA }}</a-checkbox>
            <a-checkbox v-if="data.answerB" value="B" :style="radioStyle"><span>B、</span>{{ data.answerB }}</a-checkbox>
            <a-checkbox v-if="data.answerC" value="C" :style="radioStyle"><span>C、</span>{{ data.answerC }}</a-checkbox>
            <a-checkbox v-if="data.answerD" value="D" :style="radioStyle"><span>D、</span>{{ data.answerD }}</a-checkbox>
            <a-checkbox v-if="data.answerE" value="E" :style="radioStyle"><span>E、</span>{{ data.answerE }}</a-checkbox>
            <a-checkbox v-if="data.answerF" value="F" :style="radioStyle"><span>F、</span>{{ data.answerF }}</a-checkbox>
          </a-col>
        </a-checkbox-group>
      </template>
      <!-- 判断题选项 -->
      <template v-if="data.questionType == 3">
        <a-radio-group v-model="data.myAnswers">
          <a-radio :style="radioStyle" value="A"><span>A、</span>{{ data.answerA || '正确' }}</a-radio>
          <a-radio :style="radioStyle" value="B"><span>B、</span>{{ data.answerB || '错误' }}</a-radio>
        </a-radio-group>
      </template>
      <!-- 填空题 -->
      <template v-if="data.questionType == 4">
        <a-row :gutter="50" style="font-size: 14px;">
          <a-col
            :span="12"
            class="flex-center"
            style="margin-bottom: 10px;"
          ><span class="flex-center nowrap">填空1:&nbsp;&nbsp;</span> <a-input
            placeholder="请填写答案"
          /></a-col>
          <a-col
            :span="12"
            class="flex-center"
            style="margin-bottom: 10px;"
          ><span class="flex-center nowrap">填空2:&nbsp;&nbsp;</span> <a-input
            placeholder="请填写答案"
          /></a-col>
          <a-col
            :span="12"
            class="flex-center"
          ><span class="flex-center nowrap">填空3:&nbsp;&nbsp;</span> <a-input
            placeholder="请填写答案"
          /></a-col>
          <a-col
            :span="12"
            class="flex-center"
          ><span class="flex-center nowrap">填空4:&nbsp;&nbsp;</span> <a-input
            placeholder="请填写答案"
          /></a-col>
        </a-row>
      </template>
      <!-- 简单题 -->
      <template v-if="data.questionType == 5">
        <div style="font-size: 14px;padding-bottom: 5px;">答案区:</div>
        <a-row>
          <a-textarea placeholder="请填写答案" :rows="4" />
        </a-row>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      optionKeys: ['A', 'B', 'C', 'D', 'E'],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      title: '请问2021年是什么年?',
      answer: null, // 选中的选项, 单选: String/Number, 多选: Array
      options: [
        { label: '牛年', value: 1 },
        { label: '蛇年', value: 2 },
        { label: '鸡年', value: 3 },
        { label: '虎年', value: 4 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.question-item {
  margin-top: 15px;
  font-size: 15px;
}
.question-title {
  margin-bottom: 10px;
  color: #333;
}
.options-box {
  padding-left: 30px;
}

::v-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper{
  margin-left: 0;
  height: auto !important;
}
</style>
