<template>
  <Basic :question="question" :index="index" :pIndex="pIndex">
    <el-radio-group>
      <el-radio v-for="(item, index) in question.choices" :key="index" :label="$t(item.text) || item.value || item" :value="item.value || item"></el-radio>
      <el-radio v-if="question.hasOther" :label="question.otherText || $t('general.chkOther')"></el-radio>
    </el-radio-group>
    <template v-slot:control>
      <el-button type="success" @click="startEdit('edit')" size="mini" class="event-bubbling">{{ $t('general.btnEdit') }}</el-button>
      <el-button type="info" @click="startEdit('options')" size="mini" class="event-bubbling">{{ $t('general.btnChoose') }}</el-button>
    </template>
  </Basic>
</template>

<script>
import Question from './Question'
import Basic from './Basic'

export default {
  components: {
    Basic
  },
  mixins: [Question]
}
</script>
<style scoped>
  .el-radio{
    display:block;
    line-height: 25px;
    margin-top: 20px;

  }
  .el-radio:first-of-type{
    margin-top: 0;
  }
  .el-radio /deep/ .el-radio__label{
      font-size: 18px;
      word-break: normal;
      width: auto;
      white-space: normal;
      word-wrap: break-word;
      overflow: hidden;
    }
.question .question-main .question-title{
  font-size: 20px;
}
</style>
