<template>
   <Basic :question="question" :index="index" :pIndex="pIndex">
    <div class="sortablejs-result">
      {{question.placeHolder}}
    </div>
    <ul class="infinite-list" style="overflow:auto">
      <li v-for="(item,index) in question.choices" :key="index" class="infinite-list-item">{{ item.text }}</li>
    </ul>
    <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('choose')" 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>
.sortablejs-result {
  border: 1px solid #48A736;
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  box-sizing: border-box;
}
.infinite-list {
    padding: 0;
    margin-top: 10px;
    list-style: none;
    border: 1px solid #48A736;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #EDEEEE;
    color: #333;
    padding: 10px;
    margin: 10px;
}
</style>
