<template>
  <BasicEditor :question="question" >
    <el-tab-pane :label="$t('general.btnEdit')" name="edit">
      <el-form label-position="left">
        <el-form-item :label="$t('editor.questName')" class="name-set-form-item">
          <el-input v-model="question.name" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item :label="$t('editor.questTitle')" class="name-set-form-item">
          <el-input maxlength="200" v-model="question.title"></el-input>
        </el-form-item>
        <el-form-item :label="$t('editor.questDesc')">
          <el-input maxlength="1000" type="textarea" v-model="question.description"></el-input>
        </el-form-item>
        <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="8" >{{ $t('editor.questOptValue') }}</el-col>
              <el-col :span="8">{{ $t('editor.matrixColChoose') }}</el-col>
              <el-col :span="2"><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="16">
                <el-col :span="1"><i class="el-icon-s-operation drag-item"></i></el-col>
                <el-col :span="8"><el-input @change="handleChoiceValueChange(item, index)" v-model="item.value"></el-input></el-col>
                <el-col :span="8"><el-input v-model="item.text"></el-input></el-col>
                <el-col :span="7">
                  <el-button circle size="mini" icon="el-icon-plus" @click="handleAddChoice(question.choices, 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 class="sort-num" :label="$t('editor.minSortNum')">
          <el-input-number :precision="0" :controls="false" v-model="minCount" />
        </el-form-item>
        <el-form-item :label="$t('editor.maxSortNum')" class="sort-num" >
          <el-input-number :precision="0" v-model="maxCount" :controls="false"  />
        </el-form-item>
      </el-form>

    </el-tab-pane>

    <el-tab-pane :label="$t('general.btnChoose')" name="choose">
      <el-form label-position="left">
        <el-form-item>
          <div style="text-align: left">
            <el-checkbox v-model="question.visible">{{ $t('editor.isVisible') }}</el-checkbox>
          </div>
          <div style="text-align: left">
            <el-checkbox v-model="question.isRequired">{{ $t('editor.isMustAsked') }}</el-checkbox>
          </div>
          <!-- <div style="text-align: left"><el-checkbox v-model="question.startWithNewLine">{{ $t('editor.isNewLine') }}</el-checkbox> </div> -->
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>

<script>
import Editor from './Editor'
import BasicEditor from './BasicEditor'
import draggable from 'vuedraggable'
export default {
  data () {
    return {
      maxCount: undefined,
      minCount: undefined
    }
  },
  mixins: [Editor],
  components: {
    BasicEditor,
    draggable
  },
  computed: {
    minChoiecesNum () {
      return 2
    }
  },
  beforeCreate: function () {},
  mounted: function () {
    if (this.question.validators) {
      this.maxCount = this.question.validators[0].maxCount
      this.minCount = this.question.validators[0].minCount
    }
  },
  methods: {
    beforeSave () {
      return this.verifyCountLimt()
    },
    handleChoiceValueChange (choice) {
      if (choice.value === '' || choice.value.trim() === '') {
        choice.value = this.$store.getters.getDefaultItemValue(
          this.question.choices,
          'value',
          'item'
        )
      }
    },
    handleAddChoice (choices, rowIndex) {
      choices.splice(rowIndex + 1, 0, {
        value: this.getDefaultValue(choices, 'item'),
        text: ''
      })
    },
    getDefaultValue (arr, param) {
      return this.$store.getters.getDefaultItemValue(arr, 'value', param)
    },
    handleDeleteChoice (choices, rowIndex) {
      choices.splice(rowIndex, 1)
    }
  }
}
</script>

<style scoped>
.selectOption /deep/ .el-form-item__label,
.tips /deep/ .el-form-item-label {
  width: 100%;
}
.selectOption /deep/ .el-form-item__content {
  text-align: left;
}
.tips {
  margin-top: 15px;
}
.tips /deep/ .el-form-item__content {
  margin-bottom: 15px;
}
.row-display {
  display: inline-block;
  width: 100%;
}
.drag-item {
  cursor: move;
  font-size: 20px;
}
.el-dropdown-link {
  font-size: 14px;
  padding: 7px 12px;
  color: #555555;
  background: #eeeeee;
  border: 1px solid #c0c4cc;
  border-radius: 2px;
  cursor: pointer;
}
.el-form /deep/ .name-set-form-item .el-form-item__content > .el-input {
  width: calc(100% - 240px);
  display: block;
}
.el-form /deep/ .sort-num .el-form-item__label {
  line-height: 40px !important;
}
.sort-num .el-input {
  width: 100px;
}
.el-form /deep/ .name-set-form-item .el-form-item__content > .el-select-box {
  position: absolute;
  right: 0;
  top: 42px;

}
.icon-button /deep/ .el-dropdown-link {
  cursor: pointer;
}

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