<template>
  <Basic :question="question" :index="index" :pIndex="pIndex">
    <ul style="padding-inline-start: 0px">
      <li v-if="!isBlank(question.minRateDescription)" style="display: inline-block;padding-right:10px;">{{question.minRateDescription}}</li>
      <li v-for="(item,index) in choices" :key="index" class="rating-list">
        {{item}}
      </li>
      <li v-if="!isBlank(question.maxRateDescription)" style="display: inline-block;padding-left:10px;">{{question.maxRateDescription}}</li>
    </ul>
    <div v-if="question.hasComment">
      <span>{{question.commentText}}</span>
      <el-input type="textarea" />
    </div>
    <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>
      <!-- <el-button type="info" @click="startEdit('validators')" size="small" class="event-bubbling">{{ $t('general.btnValidate') }}</el-button> -->
    </template>
  </Basic>
</template>
<script>
import Question from './Question'
import Basic from './Basic'
export default {
  components: {
    Basic
  },
  mixins: [Question],
  computed: {
    choices: function () {
      const array = []
      for (let i = this.question.rateMin; i <= this.question.rateMax; i += this.question.rateStep) {
        array.push(i)
      }
      return array
    }
  },
  methods: {
    isBlank: function (param) {
      return !param || param.trim() === ''
    }
  }
}
</script>
<style scoped>
.rating-list{
    display: inline-block;
    width: 45px;
    border: 1px solid #e7e7e7;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
</style>
