<template>
  <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>
        </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.questMinRate')">
          <div style="width:300px;">
            <el-input-number style="width:100%;" v-model="question.rateMin" controls-position="right"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item :label="$t('editor.questMaxRate')">
          <div style="width:300px;">
            <el-input-number style="width:100%;" v-model="question.rateMax" controls-position="right"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item :label="$t('editor.questRateStep')">
          <div style="width:300px;">
            <el-input-number style="width:100%;" :min="1" v-model="question.rateStep" controls-position="right"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item :label="$t('editor.questMinRateDesc')" class="name-set-form-item">
          <el-input maxlength="100" v-model="question.minRateDescription"></el-input>
        </el-form-item>
        <el-form-item :label="$t('editor.questMaxRateDesc')" class="name-set-form-item">
          <el-input maxlength="100" v-model="question.maxRateDescription"></el-input>
        </el-form-item>
        <el-form-item>
          <span style="font-weight: 700;font-size: 12px;padding-right: 10px;">{{$t('editor.questIsComment')}}</span>
          <el-switch v-model="question.hasComment"
            active-color="#13ce66"
            inactive-color="#DCDFE6">
          </el-switch>
        </el-form-item>
        <el-form-item :label="$t('editor.questCommentDesc')">
          <el-input maxlength="1000" type="textarea" v-model="question.commentText"></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>

    <el-tab-pane :label="$t('general.btnValidate')" name="validators">
      <el-form label-position="left">
        <el-form-item>
          <el-dropdown trigger="click" class="icon-button">
            <span class="el-dropdown-link">
              <i class="el-icon-plus"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!--icon与下拉菜单 选择添加的验证条件-->
              <el-dropdown-item
                v-for="item in validatorList"
                :key="item.value"
                @click.native="addValidator(item.value)"
                :command="{value:item.value,label:item.label,flag:1}"
              >{{item.label}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-select v-model="optionValue" @change="chooseValidatorIndex">
            <!--选择一个已经创建的验证-->
            <el-option
              v-for="(item,index) in question.validators"
              :key="index"
              :label="item.type"
              :value="index"
            ></el-option>
          </el-select>

          <span class="el-dropdown-link" @click="deleteValidator">
            <!--删除当前选择的验证条件-->
            <i class="el-icon-close"></i>
          </span>

          <div v-if="typeFlag=='numeric'" class="tips">
            <!--numeric部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMinValue')">
              <el-input v-model="question.validators[validatorIndex].minValue"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMaxValue')">
              <el-input v-model="question.validators[validatorIndex].maxValue"></el-input>
            </el-form-item>
          </div>

          <div v-if="typeFlag=='text'" class="tips">
            <!--text部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMinLen')">
              <el-input v-model="question.validators[validatorIndex].minLength"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMaxLen')">
              <el-input v-model="question.validators[validatorIndex].maxLength"></el-input>
            </el-form-item>
            <div style="text-align: left">
              <el-checkbox
                v-model="question.validators[validatorIndex].allowDigits"
                :checked="false"
              >{{ $t('editor.validAllowDigits') }}</el-checkbox>
            </div>
          </div>

          <div v-if="typeFlag=='answercount'" class="tips">
            <!--answer count部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMinCount')">
              <el-input v-model="question.validators[validatorIndex].minCount"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validMaxCount')">
              <el-input v-model="question.validators[validatorIndex].maxCount"></el-input>
            </el-form-item>
          </div>

          <div v-if="typeFlag=='regex'" class="tips">
            <!--regex部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
            <el-form-item :label="$t('editor.validRegex')">
              <el-input v-model="question.validators[validatorIndex].regex"></el-input>
            </el-form-item>
          </div>

          <div v-if="typeFlag=='email'" class="tips">
            <!--e-mail部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
          </div>

          <div v-if="typeFlag=='expression'" class="tips">
            <!--expression部分-->
            <el-form-item :label="$t('editor.questHolder')">
              <el-input v-model="question.validators[validatorIndex].text"></el-input>
            </el-form-item>
            <ExpressieCreator :element="question.validators[validatorIndex]" :type="'expression'"></ExpressieCreator>
            <!--调用expressieCreator.vue-->
          </div>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>

<script>
import Editor from './Editor'
import BasicEditor from './BasicEditor'
import ExpressieCreator from './tabs/ExpressieCreator'
export default {
  data () {
    return {
      inputTypeList: [
        { label: this.$t('editor.validText'), value: 'text' },
        { label: this.$t('editor.validDate'), value: 'date' },
        { label: this.$t('editor.validDatetime'), value: 'datetime' },
        { label: this.$t('editor.validLocalTime'), value: 'datetime-local' },
        { label: this.$t('editor.validEmail'), value: 'email' },
        { label: this.$t('editor.validMonth'), value: 'month' },
        { label: this.$t('editor.validNumber'), value: 'number' },
        { label: this.$t('editor.validPassword'), value: 'password' },
        { label: this.$t('editor.validRange'), value: 'range' },
        { label: this.$t('editor.validTel'), value: 'tel' },
        { label: this.$t('editor.validColor'), value: 'color' },
        { label: this.$t('editor.validTime'), value: 'time' },
        { label: this.$t('editor.validURL'), value: 'url' },
        { label: this.$t('editor.validWeek'), value: 'week' }
      ],
      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,
    ExpressieCreator
  },
  beforeCreate: function () {},
  mounted: function () {
    if (this.question.validators) {
      for (let i = 0; i < this.question.validators.length; i++) { this.optionValidators.push(this.question.validators[i]) }
      this.question.validators = this.optionValidators
      if (this.question.validators.length > 0) {
        this.optionValue = this.question.validators[0].type
        this.typeFlag = this.question.validators[0].type
        this.validatorIndex = 0
      } else {
        this.optionValue = ''
      }
    } else {
      this.question.validators = this.optionValidators
      this.optionValue = ''
    }
  },
  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>
