<template>
  <Basic :question="question" :index="index" :pIndex="pIndex">
    <template slot="control">
      <el-button type="success" @click="startEdit('edit')" size="mini" class="event-bubbling">{{ $t('general.btnEdit') }}</el-button>
      <el-button type="info" @click="startEdit('options')" size="mini" class="event-bubbling">{{ $t('general.btnChoose') }}</el-button>
    </template>
    <div class="global-btn-box" v-if="question['addRowLocation'] == 'top' || question['addRowLocation'] == 'topBottom'">
      <el-button type="info" plain size="mini" >{{question.addRowText?question.addRowText:'Add Row'}}</el-button>
    </div>
    <el-table :data="rows" style="font-size:18px">
      <el-table-column v-for="(column,index) in columns" :key="index" :align="index == 0 ? 'left':'center'" min-width="80">
        <template slot="header">
          <span>&nbsp;</span>
          <span class="table-row">{{column}}</span>
        </template>
        <template slot-scope="scope">
          <span class="table-column" v-if="index == 0">{{rows[scope.$index]}}</span>
          <span v-else>
            <span v-if="column.cellType">
              <span v-if="column.cellType == 'dropdown'">
                <el-select value></el-select>
              </span>
              <span v-else-if="column.cellType == 'checkbox'">
                <el-checkbox v-for="(choice,index) in question.choices" :key="index" :label="choice.text?choice.text:choice"></el-checkbox>
              </span>
              <span v-else-if="column.cellType == 'radiogroup'">
                <el-radio v-for="(choice,index) in question.choices" :key="index" :label="choice.text?choice.text:choice" ></el-radio>
              </span>
              <span v-else-if="column.cellType == 'text'">
                <el-input type="text" />
              </span>
              <span v-else-if="column.cellType == 'comment'">
                <el-input type="textarea" />
              </span>
              <span v-else-if="column.cellType == 'boolean'">
                <el-switch></el-switch>
              </span>
            </span>
            <span v-else-if="question.cellType">
              <span v-if="question.cellType == 'dropdown'">
                <el-select value></el-select>
              </span>
              <span v-else-if="question.cellType == 'checkbox'">
                <el-checkbox v-for="(choice,index) in question.choices" :key="index" :label="choice.text?choice.text:choice" ></el-checkbox>
              </span>
              <span v-else-if="question.cellType == 'radiogroup'">
                <el-radio v-for="(choice,index) in question.choices" :key="index" :label="choice.text?choice.text:choice" ></el-radio>
              </span>
              <span v-else-if="question.cellType == 'text'">
                <el-input type="text" />
              </span>
              <span v-else-if="question.cellType == 'comment'">
                <el-input type="textarea" />
              </span>
              <span v-else-if="question.cellType == 'boolean'">
                <el-switch></el-switch>
              </span>
            </span>
            <span v-else>
              <el-select size="mini" value></el-select>
            </span>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </Basic>
</template>
<script>
import Question from './Question'
import Basic from './Basic'
export default {
  components: {
    Basic
  },
  props: ['question'],
  mixins: [Question],
  computed: {
    rows: function () {
      if (this.question.rows) {
        return this.getRowElements(this.question.rows)
      }
      return []
    },
    columns: function () {
      if (this.question.columns) {
        const columns = this.getColElements(this.question.columns)
        columns.unshift('')
        return columns
      }
      return []
    }
  },
  methods: {
    getRowElements: function (rows) {
      return rows.map(v => {
        if (typeof v === 'object') {
          return v.text && v.text !== '' ? v.text : v.value
        } else if (typeof v === 'string') {
          return v
        } else {
          throw new Error(
            "the type of element of the matrix question'rows must be string or object "
          )
        }
      })
    },
    getColElements: function (cols) {
      return cols.map(v => {
        if (typeof v === 'object') {
          return v.title && v.title !== '' ? v.title : v.name
        } else if (typeof v === 'string') {
          return v
        } else {
          throw new Error(
            "the type of element of the matrix question'rows must be string or object "
          )
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.global-btn-box {
  padding: 10px;
}
</style>
