<template>
  <tr :class="classes">
    <template v-for="(column, columnIndex) in columns">
      <template v-if="isVisible(column, columnIndex)">
        <td :key="getColumnKey(column)" :class="column.classes" v-bind="getColspanAttr(column, columnIndex)">
          <template v-if="column.render">
            <base-render :render="column.render" v-bind="{ data, index, column }"></base-render>
          </template>
          <template v-else-if="column.slot">
            <base-slot :slot-name="column.slot" :params="{ data, index, column }"></base-slot>
          </template>
          <template v-else-if="column.key">
            <div class="normal">{{ data[column.key] }}</div>
          </template>
          <template v-else-if="isFunction(column.getText)">
            <div class="normal">{{ column.getText(data) }}</div>
          </template>
        </td>
      </template>
    </template>
  </tr>
</template>

<script>
import {isFunction} from '@uif/hq/src/utils/assist'
import BaseRender from '@uif/hq/src/components/base-render'
import BaseSlot from '@uif/hq/src/components/base-slot'
import mixin from './mixin'
export default {
  components: {
    BaseRender,
    BaseSlot
  },
  mixins: [mixin],
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    getTdAttr: {
      type: Function,
      default: null
    },
    getColspan: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      isFunction
    }
  },
  computed: {
    classes () {
      return [
        {
          'tr-selection': this.data['_isChecked']
        },
        this.data['_classes'] || {}
      ]
    }
  },
  methods: {
    isVisible (column, columnIndex) {
      return this.getColumnColspan(column, columnIndex) !== 0
    },
    getColumnColspan (column, columnIndex) {
      if (isFunction(this.getColspan)) {
        return this.getColspan(this.data, column, this.index, columnIndex)
      }
    },
    getColspanAttr (column, columnIndex) {
      const colspan = this.getColumnColspan(column, columnIndex)
      if (typeof colspan === 'number') {
        return { colspan }
      }
    }
  }
}
</script>
