<template>
  <div class="question-item">
    <div class="question-title">
      <span>{{ questionIndex || 1 }}、</span>
      <span>({{ type | QuestionTypeFormat }})</span>
      <span v-html="title"></span>
    </div>
    <div class="options-box">
      <ul class="answer-list">
        <li :class="{'success-li' : index == 2}" v-for="(item, index) in options" :key="index">
          <span>{{ optionKeys[index] }}、</span>{{ item.label }}
        </li>
      </ul>
    </div>
    <div class="flex-center justify-between" style="margin-top: 10px;">
      <div style="flex: 1;">
        <a-button @click="analysisVisible = false" style="padding: 0;" v-if="analysisVisible" type="link">收起答题解析</a-button>
        <a-button @click="analysisVisible = true" style="padding: 0;" v-else type="link">展开答题解析</a-button>
      </div>
      <div style="flex: 1;"></div>
    </div>
    <div class="box" v-show="analysisVisible">
      <div class="flex-center analysis">
        <div class="analysis-label">
          <div class="flex-center" style="height: 30px;">
            <a-tag color="blue" >统计</a-tag>
          </div>
        </div>
        <div class="analysis-value">答题时间：44秒，全站正确率：47%，易错项：D。</div>
      </div>
      <div class="flex-center analysis">
        <div class="analysis-label">
          <a-tag color="blue" style="margin-top: 6px;">解析</a-tag>
        </div>
        <div class="analysis-value" style="color: #333;">第一步，本题考查新发展理念。第二步，“十三五”规划建议提出的创新、协调、绿色、开放、共享五大发展理念，集中反映了我们党对经济社会发展规律认识的深化，是建议的精髓和主线，也是本次全会的亮点和重大贡献。创新发展注重的是解决发展动力问题。我国创新能力不强，科技发展水平总体不高，科技对经济社会发展的支撑能力不足，科技对经济增长的贡献率远低于发达国家水平；协调发展注重的是解决发展不平衡问题。我国发展不协调是一个长期存在的问题，突出表现在区域、城乡、经济和社会、物质文明和精神文明、经济建设和国防建设等关系上；绿色发展注重的是解决人与自然和谐共生问题。我国资源约束趋紧、环境污染严重、生态系统退化的问题十分严峻；开放发展注重的是解决发展内外联动问题。现在的问题不是要不要对外开放，而是如何提高对外开放的质量和发展的内外联动性；共享发展注重的是解决社会公平正义问题。我国经济发展的“蛋糕”不断做大，但分配不公问题比较突出，收入差距、城乡区域公共服务水平差距较大。在共享改革发展成果上，无论是实际情况还是制度设计，都还有不完善的地方。所以①③④正确。因此，选择C选项。</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    questionIndex: {
      type: [Number],
      default: 1
    }, // 题目序号
    type: {
      type: [String, Number], // 1: 单选, 2: 多选, 3: 判断题, 4: 填空题, 5: 简答题
      default: 1
    }
  },
  data () {
    return {
      analysisVisible: true,
      optionKeys: ['A', 'B', 'C', 'D', 'E'],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      title: '党的十九大报告指出 ，要推动社会主义文化繁荣兴盛，建设社会主义文化强国。下列关于推动社会主义文化繁荣兴盛的说法不正确的是?',
      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;
}

.answer-list{
  margin: 0;
  padding: 0;
  li{
    line-height: 2;
  }
  .success-li{
    color: #52c41a;
  }
}

.box{
    width: 100%;
}
.draw-enter-active, .draw-leave-active {
    transition: all 1s ease;
}
.draw-enter, .draw-leave-to {
    height: 0;
}

.analysis{
  justify-content: center;
  align-items: stretch;
}

.analysis-label{
  flex: 0 0 40px;
  flex-shrink: 0;
}

.analysis-value{
  flex: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #000;
  vertical-align: top;
  line-height: 2;
}
</style>
