<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.questRowText')">
          <div class="row-display">
            <el-row :gutter="24" style="margin-bottom: 0;">
              <el-col :span="1"><span class="empty-placeholder"></span></el-col>
              <el-col :span="6">{{ $t('editor.etab24') }}</el-col>
              <el-col :span="6">{{ $t('editor.questPlaceHolder') }}</el-col>
              <el-col :span="3">{{ $t('editor.isRequired')}}</el-col>
              <el-col :span="4"><span class="empty-placeholder"></span></el-col>
            </el-row>
          </div>
          <draggable v-model="question.items" :handle="'.drag-item'">
            <div class="row-display" v-for="(item, index) in question.items" :key="index">
              <el-row :gutter="24">
                <el-col :span="1"><i class="el-icon-s-operation drag-item"></i></el-col>
                <el-col :span="6">
                  <el-input @change="handleChoiceValueChange(item, index)" v-model="item.title" maxlength="200">
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="item.placeHolder" maxlength="200"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-switch v-model="item.isRequired"></el-switch>
                </el-col>
                <el-col :span="4">
                  <el-button circle size="mini" icon="el-icon-plus" @click="handleAddItem(index)"></el-button>
                  <el-button circle size="mini" icon="el-icon-minus" v-if="question.items.length > 1"
                    @click="handleDeleteItem(question.items, index)"></el-button>
                </el-col>
              </el-row>
            </div>
          </draggable>
        </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-select class="text-items" v-model="curItem" @change="chooseValidatorItem">
            <!--选择需要验证的题-->
            <el-option v-for="(item,index) in question.items" :key="`item${index}`" :label="item.title" :value="index">
            </el-option>
          </el-select>


          <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.items[itemIndex].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>
          <template v-if="typeFlag">
            <div v-if="typeFlag=='numeric'" class="tips">
              <!--numeric部分-->
              <el-form-item :label="$t('editor.questHolder')">
                <el-input v-model="question.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMinValue')">
                <el-input v-model="question.items[itemIndex].validators[validatorIndex].minValue"></el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMaxValue')">
                <el-input v-model="question.items[itemIndex].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.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMinLen')">
                <el-input v-model="question.items[itemIndex].validators[validatorIndex].minLength"></el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMaxLen')">
                <el-input v-model="question.items[itemIndex].validators[validatorIndex].maxLength"></el-input>
              </el-form-item>
              <div style="text-align: left">
                <el-checkbox v-model="question.items[itemIndex].validators[validatorIndex].allowDigits"
                  @change="changeAllowDigits(question.items[itemIndex].validators[validatorIndex])"
                  :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.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMinCount')">
                <el-input v-model="question.items[itemIndex].validators[validatorIndex].minCount"></el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validMaxCount')">
                <el-input v-model="question.items[itemIndex].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.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('editor.validRegex')">
                <el-input v-model="question.items[itemIndex].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.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </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.items[itemIndex].validators[validatorIndex].text" maxlength="200">
                </el-input>
              </el-form-item>
              <ExpressieCreator :element="question.items[itemIndex].validators[validatorIndex]" :type="'expression'">
              </ExpressieCreator>
              <!--调用expressieCreator.vue-->
            </div>
          </template>

        </el-form-item>
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>

<script>
  import Editor from './Editor'
  import BasicEditor from './BasicEditor'
  import ExpressieCreator from './tabs/ExpressieCreator'
  import draggable from 'vuedraggable'
  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: [],
        curItem: '',
        itemIndex: 0
      }
    },
    mixins: [Editor],
    props: ['surveyModel'],
    components: {
      BasicEditor,
      ExpressieCreator,
      draggable
    },
    beforeCreate: function () {},
    mounted: function () {
      // if (this.question.items[this.itemIndex].validators) {
      //   for (let i = 0; i < this.question.items[this.itemIndex].validators.length; i++) { this.optionValidators.push(this.question.items[this.itemIndex].validators[i]) }
      //   this.question.items[this.itemIndex].validators = this.optionValidators
      //   if (this.question.items[this.itemIndex].validators.length > 0) {
      //     this.optionValue = this.question.items[this.itemIndex].validators[0].type
      //     this.typeFlag = this.question.items[this.itemIndex].validators[0].type
      //     this.validatorIndex = 0
      //   } else {
      //     this.optionValue = ''
      //   }
      // } else {
      //   this.question.items[this.itemIndex].validators = this.optionValidators
      //   this.optionValue = ''
      // }
    },
    methods: {
      changeAllowDigits(validators){
        if(validators.hasOwnProperty('allowDigits') && !validators.allowDigits){
          delete validators.allowDigits
        }
      },
      handleChoiceValueChange() {},
      handleAddItem(rowIndex) {
        const items = this.question.items || []
        const value = this.getDefaultValue(items)
        this.question.items.splice(rowIndex + 1, 0, {
          "name": value,
          "isRequired": false,
          "placeHolder": this.$t('question.questIptHolder'),
          "title": this.$t('question.multipletext'),
          "maxLength": null,
          "size": null,
          "requiredErrorText": "",
          validators: []
        })
      },
      getDefaultValue(choices) {
        let maxIndex = 0
        choices.forEach(item => {
          const index = +item.name.replace('item', '')
          maxIndex = index > maxIndex ? index : maxIndex
        })
        maxIndex = maxIndex + 1
        return `item${maxIndex}`
      },
      handleDeleteItem(items, rowIndex) {
        items.splice(rowIndex, 1)
      },
      addValidator(value) {
        const optionObj = {
          type: value
        }
        const items = this.question.items
        items[this.itemIndex].validators.push(optionObj)
        const validatorIndex = items[this.itemIndex].validators.length - 1
        this.validatorIndex = validatorIndex
        this.question.items = items
        // this.setQuestion({
        //   ...this.question
        // })
        this.optionValue = value
        this.typeFlag = value
      },
      chooseValidatorIndex(index) {
        this.validatorIndex = index
        this.typeFlag = this.question.items[this.itemIndex].validators[index].type
      },
      chooseValidatorItem(index) {
        if(!this.question.items[this.itemIndex].validators){
            this.question.items[this.itemIndex].validators = []
        }
        this.validatorIndex = 0
        this.itemIndex = index
        this.optionValue = ''
        this.typeFlag = ''
      },
      deleteValidator() {
        if (this.validatorIndex >= 0) {
          this.question.items[this.itemIndex].validators.splice(this.validatorIndex, 1)
          if (this.question.items[this.itemIndex].validators.length > 0) {
            this.optionValue = this.question.items[this.itemIndex].validators[0].type
          } else this.optionValue = ''
        }
        this.validatorIndex = this.question.items[this.itemIndex].validators.length > 0 ? 0 : -1
        this.typeFlag =
          this.question.items[this.itemIndex].validators.length > 0 ?
          this.question.items[this.itemIndex].validators[0].type :
          '-1'
      }
    }
  }
</script>

<style scoped>
  .text-items {
    margin-right: 20px;
  }

  .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: 46px;
  }

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

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

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

  .row-display .el-row {
    margin-bottom: 10px;
  }
</style>
