<template>
  <div class="question-item">
    <div class="question-title">
      <span>{{index || 1}}、</span>
      <span>({{ type | QuestionTypeFormat }})</span>
      <span v-html="title"></span>
    </div>
    <div class="options-box">
      <!-- 单选题选项 -->
      <template v-if="type == 1">
        <a-radio-group v-model="answer">
          <a-radio v-for="(item, index) in options" :key="index" :style="radioStyle" :value="item.value">
            <span>{{ optionKeys[index] }}、</span>{{ item.label }}
          </a-radio>
        </a-radio-group>
      </template>
      <!-- 多选题选项 -->
      <template v-if="type == 2">
        <a-checkbox-group v-model="answer">
          <a-col :span="24" v-for="(item, index) in options" :key="index">
            <a-checkbox :value="item.value" :style="radioStyle">
              <span>{{ optionKeys[index] }}、</span>{{ item.label }}
            </a-checkbox>
          </a-col>
        </a-checkbox-group>
      </template>
      <!-- 判断题选项 -->
      <template v-if="type == 3">
        <a-radio-group v-model="answer">
          <a-radio :style="radioStyle" :value="1"> <span>A、</span>正确</a-radio>
          <a-radio :style="radioStyle" :value="2"> <span>B、</span>错误</a-radio>
        </a-radio-group>
      </template>
      <!-- 填空题 -->
      <template v-if="type == 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="type == 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: Number, // 题目序号
    type: {
      type: [String, Number], // 1: 单选, 2: 多选, 3: 判断题, 4: 填空题, 5: 简答题
      default: 1
    }
  },
  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;
}
</style>
