<template>
  <BasicEditor :question="question" >
    <el-tab-pane :label="$t('general.btnEdit')" name="edit">
      <el-form>
        <el-form-item :label="$t('editor.questName')">
          <el-input v-model="question.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('editor.questTitle')">
          <el-input maxlength="200" v-model="question.title" @change="handleTitleChange()"></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.questCellType')">
          <el-select v-model="question.cellType" class="row-display">
            <el-option v-for="(item,index) in questionCellTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('editor.questColText')">
          <el-row :gutter="5" class="row-display">
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2">{{ $t('editor.matrixColRequire') }}</el-col>
            <el-col :span="5">{{ $t('editor.questCellType') }}</el-col>
            <el-col :span="5" >{{ $t('editor.questOptValue') }}</el-col>
            <el-col :span="6">{{ $t('editor.matrixColChoose') }}</el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>
          <draggable v-model="question.columns" handle=".drag-item">
            <div v-for="(item, index) in question.columns" :key="index">
              <el-row :gutter="5">
                <el-col :span="2">
                  <i class="el-icon-s-operation drag-item"></i>
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="item.isRequired" @change="handleColumnRequiredChange(item)"></el-checkbox>
                </el-col>
                <el-col :span="5">
                  <el-select v-model="item.cellType" class="row-display">
                    <el-option v-for="(cellType,cellTypeIndex) in columnCellTypeOptions" :key="cellTypeIndex" :label="cellType.label" :value="cellType.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-input v-model="item.name" @change="handleColumnNameChange(item)"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="item.title" @change="handleColumnTitleChange(item)"></el-input>
                </el-col>
                <el-col :span="4">
                  <!--<el-button size="mini" icon="el-icon-plus" circle @click="addElement(question.columns, index, {name:'Column' + index, title:'第' + (index + 2) + '列'})"></el-button>-->
                  <el-button size="mini" icon="el-icon-plus" circle @click="addColumnFun(question.columns, index)"></el-button>
                  <el-button size="mini" icon="el-icon-minus" circle v-show="question.columns.length > 1" @click="removeElement(question.columns, index)"></el-button>
                </el-col>
              </el-row>
            </div>
          </draggable>
        </el-form-item>

        <el-form-item :label="$t('editor.questRowText')">
          <el-row :gutter="5">
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8" >{{ $t('editor.questOptValue') }}</el-col>
            <el-col :span="8">{{ $t('editor.matrixColChoose') }}</el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>
          <draggable v-model="question.rows" handle=".drag-item">
            <div class="row-display" v-for="(item, index) in question.rows" :key="index">
              <el-row :gutter="5">
                <el-col :span="2">
                  <i class="el-icon-s-operation drag-item"></i>
                </el-col>
                <el-col :span="8" >
                  <el-input v-model="item.value" v-if="typeof(item) == 'object'" @change="handleRowValueChange(index)"></el-input>
                  <el-input v-model="question.rows[index]" v-else @change="handleRowValueChange(index)"></el-input>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="item.text" v-if="typeof(item) == 'object'" @change="handleRowTextChange(index)"></el-input>
                  <el-input v-model="rowTexts[index]" v-else @change="handleRowTextChange(index)"></el-input>
                </el-col>
                <el-col :span="4">
                  <!--<el-button size="mini" icon="el-icon-plus" circle @click="addElement('row', question.rows, index, 'Row ' + (index + 2))"></el-button>-->
                  <el-button size="mini" icon="el-icon-plus" circle @click="addRowFun( question.rows, index)"></el-button>
                  <el-button size="mini" icon="el-icon-minus" v-show="question.rows.length > 1" circle @click="removeElement(question.rows, index)"></el-button>
                </el-col>
              </el-row>
            </div>
          </draggable>
        </el-form-item>

        <el-form-item :label="$t('editor.questChoices')">
          <el-row :gutter="5" class="row-display">
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8" >{{ $t('editor.questOptValue') }}</el-col>
            <el-col :span="8">{{ $t('editor.matrixColChoose') }}</el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <draggable v-model="question.choices" handle=".drag-item">
            <div v-for="(item, index) in question.choices" :key="index">
              <el-row :gutter="5">
                <el-col :span="2">
                  <i class="el-icon-s-operation drag-item"></i>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="item.value" v-if="typeof(item) == 'object'" @change="handleChoiceValueChange(index)"></el-input>
                  <el-input v-model="question.choices[index]" v-else @change="handleChoiceValueChange(index)"></el-input>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="item.text" v-if="typeof(item) == 'object'" @change="handleChoiceTextChange(index)"></el-input>
                  <el-input v-model="choiceTexts[index]" v-else @change="handleChoiceTextChange(index)"></el-input>
                </el-col>
                <el-col :span="6">
                  <!--<el-button size="mini" icon="el-icon-plus" circle @click="addElement(question.choices, index, (index + 2))"></el-button>-->
                  <el-button size="mini" icon="el-icon-plus" circle @click="addItemFun(question.choices, index)"></el-button>
                  <el-button size="mini" icon="el-icon-minus" circle v-show="question.choices.length > 1" @click="removeElement(question.choices, 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="options">
      <el-form label-position="left">
        <el-form-item>
            <el-checkbox v-model="questionVisible" :label="$t('editor.isVisible')"></el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="question.isRequired" :label="$t('editor.isMustAsked')"></el-checkbox>
        </el-form-item>
        <!-- <el-form-item>
          <el-checkbox v-model="question.startWithNewLine">{{ $t('editor.isNewLine') }}</el-checkbox>
        </el-form-item> -->
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>
<script>
import Editor from './Editor'
import BasicEditor from './BasicEditor'
import Vue from 'vue'
import draggable from 'vuedraggable'
export default {
  mixins: [Editor],
  components: {
    BasicEditor,
    draggable
  },
  data: function () {
    return {
      questionVisible: true,
      questionNewLine: true,
      choiceTexts: [],
      questionCellTypeOptions: [
        { label: this.$t('editor.edit44'), value: undefined },
        { label: this.$t('editor.edit45'), value: 'checkbox' },
        { label: this.$t('editor.edit46'), value: 'radiogroup' },
        { label: this.$t('editor.edit47'), value: 'text' },
        { label: this.$t('editor.edit48'), value: 'comment' },
        { label: this.$t('editor.edit49'), value: 'boolean' }
      ],
      columnCellTypeOptions: [
        { label: this.$t('editor.edit50'), value: undefined },
        { label: this.$t('editor.edit44'), value: 'dropdown' },
        { label: this.$t('editor.edit45'), value: 'checkbox' },
        { label: this.$t('editor.edit46'), value: 'radiogroup' },
        { label: this.$t('editor.edit47'), value: 'text' },
        { label: this.$t('editor.edit48'), value: 'comment' },
        { label: this.$t('editor.edit49'), value: 'boolean' }
      ],
      addRowButtonLocationOptions: [
        { label: this.$t('editor.edit50'), value: undefined },
        { label: this.$t('editor.edit51'), value: 'top' },
        { label: this.$t('editor.edit52'), value: 'bottom' },
        { label: this.$t('editor.edit53'), value: 'topBottom' }
      ],
      rowTexts: []
    }
  },
  props: ['question'],
  mounted: function () {
    if (!this.question.hasOwnProperty('visible') || this.question.visible) {
      this.questionVisible = true
    } else {
      this.questionVisible = false
    }

    if (
      !this.question.hasOwnProperty('startWithNewLine') ||
      this.question.startWithNewLine
    ) {
      this.questionNewLine = true
    } else {
      this.questionNewLine = false
    }

    this.choiceTexts = new Array(this.question.choices.length).fill('')
    this.rowTexts = new Array(this.question.rows.length).fill('')
  },

  computed: {
  },
  created: function () {
    this.question.columns = this.question.columns.map(v => {
      if (typeof v === 'object') {
        const column = {}
        Object.assign(column, v)
        return column
      }
      return v
    })
    this.question.choices = this.question.choices.map(v => {
      if (typeof v === 'object') {
        const choice = {}
        Object.assign(choice, v)
        return choice
      }
      return v
    })
  },
  methods: {
    addColumnFun: function (columns, index) {
      const columnName = this.$store.getters.getDefaultItemValue(columns, 'name', 'Column')
      const names = columnName.split('Column')
      this.addElement(columns, index, { name: columnName, title: this.$t('editor.numColumnTitle', { 0: names[1] }) })
    },
    addItemFun: function (choices, index) {
      const itemName = this.$store.getters.getDefaultItemValue(choices, 'value', 'item')
      this.addElement(choices, index, itemName)
    },
    addRowFun: function (rows, index) {
      const rowName = this.$store.getters.getDefaultItemValue(rows, 'value', 'Row')
      this.addElement(rows, index, rowName)
    },
    addElement: function (sources, index, newElement) {
      const length = sources.length
      if (length - 1 == index) {
        sources.push(newElement)
      } else {
        for (let i = length; i > index + 1; i--) {
          Vue.set(sources, i, sources[i - 1])
        }
        Vue.set(sources, index + 1, newElement)
      }

      if (!typeof newElement == 'object') {
        this.choiceTexts.splice(index + 1, 0, '')
      }
      if (sources == 'rows') {
        this.rowTexts.splice(index + 1, 0, '')
      }
    },
    removeElement: function (sources, index) {
      if (sources.length > 1) {
        sources.splice(index, 1)
        if (!typeof newElement) {
          this.choiceTexts.splice(index, 1)
        }
        if (sources == 'rows') {
          this.rowTexts.splice(index, 1)
        }
      }
    },
    handleTitleChange: function () {
      if (this.question.hasOwnProperty('title')) {
        if (
          this.question.title.length == 0 ||
          this.question.title.trim().length == 0
        ) {
          delete this.question.title
        }
      }
    },
    handleAddButtonTextChange: function () {
      if (this.question.hasOwnProperty('addRowText')) {
        if (
          this.question.addRowText.length == 0 ||
          this.question.addRowText.trim().length == 0
        ) {
          delete this.question.addRowText
        }
      }
    },
    handleRemoveButtonChange: function () {
      if (this.question.hasOwnProperty('removeRowText')) {
        if (
          this.question.removeRowText.length == 0 ||
          this.question.removeRowText.trim().length == 0
        ) {
          delete this.question.removeRowText
        }
      }
    },
    handleColumnRequiredChange: function (column) {
      if (column.hasOwnProperty('isRequired')) {
        if (!column.isRequired) {
          delete column.isRequired
        }
      }
    },
    handleColumnNameChange: function (column) {
      if (column.name.length == 0 || column.name.trim().length == 0) {
        column.name = 'Column' + (this.question.columns.indexOf(column) + 1)
      }
    },
    handleColumnTitleChange: function (column) {
      if (column.hasOwnProperty('title')) {
        if (column.title.length == 0 || column.title.trim().length == 0) {
          column.title = this.$t('editor.numColumnTitle', { 0: this.question.columns.indexOf(column) + 1 })
          // "第" + (this.question.columns.indexOf(column) + 1) + "列";
        }
      }
    },
    handleRowValueChange: function (index) {
      const row = this.question.rows[index]
      const rowName = this.$store.getters.getDefaultItemValue(this.question.rows, 'value', 'Row')
      if (typeof row === 'object') {
        if (row.value.length == 0 || row.value.trim().length == 0) {
          row.value = rowName
        }
      } else {
        if (row.length == 0 || row.trim().length == 0) {
          this.question.rows.splice(index, 1, rowName)
        }
      }
    },
    handleRowTextChange: function (index) {
      const row = this.question.rows[index]
      if (typeof row === 'object') {
        if (!row.text || row.text.trim().length == 0) {
          this.question.rows.splice(index, 1, row.value)
        }
      } else {
        if (this.rowTexts[index]) {
          this.question.rows.splice(index, 1, {
            value: row,
            text: this.rowTexts[index]
          })
        }
        this.rowTexts[index] = ''
      }
    },

    handleChoiceValueChange: function (index) {
      const choice = this.question.choices[index]
      const itemValue = this.$store.getters.getDefaultItemValue(this.question.choices, 'value', 'Item')
      if (typeof choice === 'object') {
        if (!choice.value || choice.value.trim().length == 0) {
          choice.value = itemValue
        }
      } else {
        if (!choice || choice.trim().length == 0) {
          this.question.choices.splice(index, 1, itemValue)
        }
      }
    },
    handleChoiceTextChange: function (index) {
      const choice = this.question.choices[index]
      if (typeof choice === 'object') {
        if (!choice.text || choice.text.trim().length == 0) {
          this.question.choices.splice(index, 1, choice.value)
        }
      } else {
        if (this.choiceTexts[index]) {
          this.question.choices.splice(index, 1, {
            value: choice,
            text: this.choiceTexts[index]
          })
        }
        this.choiceTexts.splice(index, 1, '')
      }
    }
  },
  watch: {
    questionVisible: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          delete this.question.visible
        } else {
          this.question.visible = newVal
        }
      }
    },
    questionNewLine: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          delete this.question.startWithNewLine
        } else {
          this.question.startWithNewLine = newVal
        }
      }
    }
  }
}
</script>

<style scoped>
.drag-item:hover {
  cursor: move;
}
.el-row {
  margin-bottom: 10px;
}
.row-display {
  display: inline-block;
  width: 100%;
}
</style>
