<template>
    <BasicEditor ref="basicEditor" :question="question" :surveyModel="surveyModel">
        <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>
                    <div class="el-select-box">
                      <el-select v-model="question.type" :placeholder="$t('editor.questTypeSel')">
                          <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                          </el-option>
                      </el-select>
                    </div>
                </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.questHolder')">
                    <el-input v-model="question.placeHolder"></el-input>
                </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.isRequired') }}</el-checkbox>
                    </div>
                    <!--<div style="text-align: left"><el-checkbox v-model="question.startLine">is start in new line?</el-checkbox> </div>-->
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </BasicEditor>
</template>

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

export default {
  mixins: [Editor],
  components: {
    BasicEditor
  },
  props: ['surveyModel'],
  beforeCreate: function () {

  },
  data () {
    return {
      options: [{
        value: 'text',
        label: this.$t('question.textTag')
      }, {
        value: 'comment',
        label: this.$t('question.commentTag')
      }]
    }
  }
}
</script>

<style scoped>
.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>
