<template>
  <Basic :question="question" :index="index" :pIndex="pIndex">
    <el-form label-width="80px" class="text-question">
        <el-form-item   v-for="item in question.items" :key="item.name" >
          <span slot="label" ><em v-if="item.isRequired">*</em>{{item.title}}</span>
          <el-input :type="item.inputType" :placeHolder="item.placeHolder" />
        </el-form-item >
    </el-form>
    <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="mini" class="event-bubbling">{{ $t('general.btnValidate') }}</el-button>
    </template>
  </Basic>
</template>
<script>
import Question from './Question'
import Basic from './Basic'
export default {
  components: {
    Basic
  },
  props: ['question'],
  mixins: [Question]
}
</script>
<style lang="scss" scoped>
.text-question{
  ::v-deep.el-form-item__label{
    font-size: 14px;
    text-align: left;
  }
}
</style>


