<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.questMultiCont')">
          <el-input :rows="7" type="textarea" @blur="createElements" v-model="question.content"></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>
    </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>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>

<script>
import Editor from './Editor'
import BasicEditor from './BasicEditor'
import { getQuestion } from '../DesignerBox/question-list.js'
import { generateElements } from '../../utils/multiple-select.js'
export default {
  data () {
    return {
      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: [],
      model: {}
    }
  },
  mixins: [Editor],
  props: ['surveyModel'],
  components: {
    BasicEditor
  },
  beforeCreate: function () {
  },
  mounted: function () {
    this.createElements()
  },
  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'
    },
    beforeSave: function () {
      if (!this.validateData()) {
        return false
      }
      this.createElements()
      return true
    },
    createElements(){
       const question = generateElements(this.question, this.$store)
       this.$store.commit('setQuestion', question)
    },
    validateData: function () {
      if (!this.question.content || this.question.content.trim() == '') {
        return false
      }
      const rows = this.question.content.split('\n')
      if (rows.length == 0) {
        return false
      }
      if (!rows[0] || rows[0].trim() == '') {
        this.$message.error(this.$t('editor.edit67'))
        return false
      }
      const headers = rows[0].split('|')
      for (let i = 0; i < headers.length; i++) {
        if (!headers[i] || headers[i].trim() == '') {
          this.$message.error(this.$t('editor.edit68', { 0: i + 1 }))
          return false
        }
      }
      const length = headers.length
      for (let i = 1; i < rows.length; i++) {
        if (!rows[i] || rows[i].trim() == '') {
          this.$message.error(this.$t('editor.edit69', { 0: i + 1 }))
          return false
        }
        const columns = rows[i].split('|')
        if (columns.length > length) {
          this.$message.error(this.$t('editor.edit70', { 0: i + 1 }))
          return false
        }
        for (let j = 0; j < columns.length; j++) {
          if (!columns[j] || columns[j].trim() == '') {
            this.$message.error(this.$t('editor.edit71', { 0: i + 1, 1: j + 1 }))
            return false
          }
        }
      }
      return true
    },
    isShowTitle: function () {
      return false
    }
  }
}
</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>
