<template>
   <MultipleOptions :question="question"  >
    <template v-slot:imgOptionSetting>
      <el-form-item :label="$t('editor.questImgOption')">
        <div class="row-display">
          <el-row :gutter="5" style="margin-bottom: 0;">
            <el-col :span="1"><span class="empty-placeholder"></span></el-col>
            <el-col :span="3" >{{ $t('editor.questOptValue') }}</el-col>
            <el-col :span="8">{{ $t('editor.questOptText') }}</el-col>
            <el-col :span="8">{{ $t('editor.questOptSrc') }}</el-col>
            <el-col :span="4"><span class="empty-placeholder"></span></el-col>
          </el-row>
        </div>
        <draggable v-model="question.choices" handle=".drag-item">
          <div class="row-display" v-for="(item, index) in question.choices" :key="index">
            <el-row :gutter="5">
              <el-col :span="1"><i class="el-icon-s-operation drag-item"></i></el-col>
              <el-col :span="3" ><el-input @change="handleChoiceValueChange(item, index)" v-model="item.value"></el-input></el-col> <!-- itemValueFlag-->
              <el-col :span="8"><el-input v-model="item.text"></el-input></el-col>
              <el-col :span="8"><el-input v-model="item.imageLink"></el-input></el-col>
              <el-col :span="4">
                <el-button circle size="mini" icon="el-icon-plus" @click="handleAddChoice(index)"></el-button>
                <el-button circle size="mini" icon="el-icon-minus" v-if="question.choices.length > minChoiecesNum" @click="handleDeleteChoice(question.choices, index)"></el-button>
              </el-col>
            </el-row>
          </div>
        </draggable>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="question.multiSelect">{{ $t('editor.multiSelect') }}</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="question.showLabel">{{ $t('editor.showLabel') }}</el-checkbox>
      </el-form-item>
    </template>
    <!-- <el-form-item label="Minimum value for auto generated items">
      <el-input v-model="question.choicesMin"/>
    </el-form-item>
    <el-form-item label="Maximum value for auto generated items">
      <el-input v-model="question.choicesMax"/>
    </el-form-item>
    <el-form-item label="The difference between auto generated items">
      <el-input v-model="question.choicesStep"/>
    </el-form-item> -->
  </MultipleOptions>
</template>

<script>
import Editor from './Editor'
import MultipleOptions from './MultipleOptions'

export default {
  mixins: [Editor, MultipleOptions],
  components: {
    MultipleOptions
  },
  props: ['question'],
  computed: {
  }
}
</script>

<style scoped>
.el-form /deep/ .el-form-item__content {
  text-align: left;
}

.display-inline-block {
  display: inline-block;
  width: 100%;
}

.drag-item {
  cursor: move;
  font-size: 20px;
}

.row-display {
  display: inline-block;
  width: 100%;
}

.row-display .empty-placeholder {
  display: inline-block;
  min-width: 20px;
}

.row-display .el-row {
  margin-bottom: 10px;
}

.el-form /deep/ .name-set-form-item .el-form-item__content > .el-input {
  width: calc(100% - 240px);
  display: block;
}

.el-form /deep/ .name-set-form-item .el-form-item__content > .el-select-box {
  position: absolute;
  right: 0;
  top: 42px;
}
</style>
