<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.questColText')">
          <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.columns" handle=".drag-item">
            <div class="row-display" 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="8" >
                  <el-input v-model="item.value" v-if="typeof(item) == 'object'" @change="handleColumnValueChange(index)"></el-input>
                  <el-input v-model="question.columns[index]" v-else @change="handleColumnValueChange(index)"></el-input>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="item.text" v-if="typeof(item) == 'object'" @change="handleColumnTextChange(index)"></el-input>
                  <el-input v-model="columnTexts[index]" v-else @change="handleColumnTextChange(index)"></el-input>
                </el-col>
                <el-col :span="4">
                  <!--<el-button size="mini" icon="el-icon-plus" circle @click="addElement('column', question.columns, index, 'Column ' + (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('column', 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('row', question.rows, 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>
        <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-item>
            <el-checkbox v-model="question.isAllRowRequired" :label="$t('editor.isAllRowRequired')"></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,
      columnTexts: [],
      rowTexts: []
    }
  },
  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.columnTexts = new Array(this.question.columns.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.rows = this.question.rows.map(v => {
      if (typeof v === 'object') {
        const row = {}
        Object.assign(row, v)
        return row
      }
      return v
    })
  },
  methods: {
    addColumnFun: function (columns, index) {
      const columnName = this.$store.getters.getDefaultItemValue(columns, 'value', 'Column')
      this.addElement('column', columns, index, columnName)
    },

    addRowFun: function (rows, index) {
      const rowName = this.$store.getters.getDefaultItemValue(rows, 'value', 'Row')
      this.addElement('row', rows, index, rowName)
    },

    addElement: function (type, 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 (type == 'column') {
        this.columnTexts.splice(index + 1, 0, '')
      } else {
        this.rowTexts.splice(index + 1, 0, '')
      }
    },
    removeElement: function (type, sources, index) {
      if (sources.length > 1) {
        sources.splice(index, 1)
        if (type == 'column') {
          this.columnTexts.splice(index, 1)
        } else {
          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
        }
      }
    },
    handleColumnValueChange: function (index) {
      const column = this.question.columns[index]
      const columnName = this.$store.getters.getDefaultItemValue(this.question.columns, 'value', 'Column')
      if (typeof column === 'object') {
        if (column.value.length == 0 || column.value.trim().length == 0) {
          column.value = columnName
        }
      } else {
        if (column.length == 0 || column.trim().length == 0) {
          this.question.columns.splice(index, 1, columnName)
        }
      }
    },
    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)
        }
      }
    },
    handleColumnTextChange: function (index) {
      const column = this.question.columns[index]
      if (typeof column === 'object') {
        if (!column.text || column.text.trim().length == 0) {
          this.question.columns.splice(index, 1, column.value)
        }
      } else {
        if (this.columnTexts[index]) {
          this.question.columns.splice(index, 1, {
            value: column,
            text: this.columnTexts[index]
          })
        }
        this.columnTexts[index] = ''
      }
    },
    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] = ''
      }
    }
  },
  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>
