<template>
  <table class="uif-table" :class="classes">
    <u-colgroup :columns="columns"></u-colgroup>
    <u-thead :columns="columns"></u-thead>
    <tbody>
      <template v-for="(data, index) in dataList">
        <u-body :key="index" :columns="columns" :data="data" :index="index" :get-colspan="getColspan"></u-body>
      </template>
      <tr v-if="noData">
        <td class="uif-table-no-data" :colspan="columns.length">{{noDataText}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { oneOf } from '@uif/hq/src/utils/assist'
import UColgroup from './colgroup'
import UThead from './thead'
import UBody from './tbody'
export default {
  name: 'u-table',
  components: {
    UColgroup,
    UThead,
    UBody
  },
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    getColspan: {
      type: Function,
      default: null
    },
    border: {
      validator (value) {
        return oneOf(value, ['none', 'outer', 'all'])
      },
      default: 'all'
    },
    hasHover: {
      type: Boolean,
      default: false
    },
    noData: {
      type: Boolean,
      default: false
    },
    noDataText: {
      type: String,
      default: '暂无数据'
    }
  },
  computed: {
    classes () {
      return [
        'uif-table-border-' + this.border,
        {
          'uif-table-has-hover': this.hasHover
        }
      ]
    }
  }
}
</script>
