<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.questDateFormat')" class="selectOption">
          <el-select v-model="question.dateFormat" :placeholder="$t('editor.questDateFtHolder')">
            <el-option v-for="item in dateFormatList" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </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>
    </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'
export default {
  data () {
    return {
      dateFormatList: [
        { label: 'Default - mm/dd/yy', value: 'mm/dd/yy' }
        // { label: "ISO 8601 - yy-mm-dd", value: "yy-mm-dd" },
        // { label: "Short - d M, y", value: "d M, y" },
        // { label: "Medium - d MM, y", value: "d MM, y" },
        // { label: "DD, d MM, yy", value: "Full - DD, d MM, yy" },
        // { label: "With text - 'day' d 'of' MM 'in the year' yy", value: "'day' d 'of' MM 'in the year' yy" },
      ],
      validatorList: [
        { label: this.$t('editor.validNumeric'), value: 'numeric' },
        { label: this.$t('editor.validText'), value: 'text' },
        { label: this.$t('editor.validAnswercount'), value: 'answercount' },
        { label: this.$t('editor.validRegex'), value: 'regex' },
        { label: this.$t('editor.validEmail'), value: 'email' },
        { label: this.$t('editor.validExpression'), value: 'expression' }
      ],
      validatorIndex: '0',
      typeFlag: '', // 验证条件选择框当前选择项的类型
      optionValue: '', // 验证条件选择框当前显示的值
      optionValidators: [],
      options: [
        {
          value: 'text',
          label: this.$t('question.textTag')
        },
        {
          value: 'comment',
          label: this.$t('question.commentTag')
        }
      ]
    }
  },
  mixins: [Editor],
  props: ['surveyModel'],
  components: {
    BasicEditor
  },
  beforeCreate: function () {},
  mounted: function () {
  },
  methods: {
    addValidator (value) {
      const optionObj = {
        type: ''
      }
      optionObj.type = value
      this.question.validators.push(optionObj)
      this.validatorIndex = this.question.validators.length - 1
      this.typeFlag = this.question.validators[
        this.question.validators.length - 1
      ].type
      this.optionValue = value
    },
    chooseValidatorIndex (index) {
      this.validatorIndex = index
      this.typeFlag = this.question.validators[index].type
    },
    deleteValidator () {
      if (this.validatorIndex >= 0) {
        this.question.validators.splice(this.validatorIndex, 1)
        if (this.question.validators.length > 0) { this.optionValue = this.question.validators[0].type } else this.optionValue = ''
      }
      this.validatorIndex = this.question.validators.length > 0 ? 0 : -1
      this.typeFlag =
        this.question.validators.length > 0
          ? this.question.validators[0].type
          : '-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;
}
.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/ .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;
}
</style>
