<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>
    <el-table :data="rows" style="font-size:18px">
      <el-table-column v-for="(col,index) in columns" :key="index" :align="index == 0 ? 'left':'center'">
        <template slot="header">
          <span v-if="index == 0">&nbsp;</span>
          <span class="table-row" v-else>{{columns[index]}}</span>
        </template>
        <template slot-scope="scope">
          <span class="table-column" v-if="index == 0">{{rows[scope.$index]}}</span>
          <span v-else> <el-radio size="medium" value></el-radio> </span>
        </template>
      </el-table-column>
    </el-table>
  </Basic>
</template>

<script>
import Question from './Question'
import Basic from './Basic'
export default {
  components: {
    Basic
  },
  props: ['surveyModel'],
  computed: {
    rows: function () {
      if (this.question.rows) {
        return this.getRowColElements(this.question.rows)
      }
      return []
    },
    columns: function () {
      if (this.question.columns) {
        const columns = this.getRowColElements(this.question.columns)
        columns.unshift('')
        return columns
      }
      return []
    }
  },
  methods: {
    getRowColElements: function (rowCols) {
      return rowCols.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 "
          )
        }
      })
    }
  },
  mixins: [Question]
}
</script>
