<template>
    <Basic :question="question" :index="index" :pIndex="pIndex">
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-if="question.hasSelectAll" :label="question.selectAllText || $t('general.chkAll')"></el-checkbox>
        <el-checkbox v-for="(item, index) in question.choices" :key="index" :label="$t(item.text) || item.value || item"
          :value="item.value || item"></el-checkbox>
        <el-checkbox v-if="question.hasOther" :label="question.otherText || $t('general.chkOther')"></el-checkbox>
        <el-checkbox v-if="question.hasNone" :label="question.noneText || $t('general.chkHasNone')"></el-checkbox>
      </el-checkbox-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 {
  data () {
    return {
      checkedList: []
    }
  },
  components: {
    Basic
  },
  created () {
  },
  mixins: [Question]
}
</script>
<style scoped>
  .el-checkbox{
    display:block;
    line-height: 25px;
    padding-bottom: 20px;
  }
  .el-checkbox /deep/ .el-checkbox__label{
    font-size: 18px;
    line-height: 25px;
    word-break: normal;
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    display: inline;
  }
</style>
