<template>
  <table class="n-thead">
    <n-table-colgroup :columns="columns"></n-table-colgroup>
    <thead>
      <tr>
        <template v-for="(column, index) in columns">
          <n-table-th :key="index" :column="column" :index="index" :has-resize="hasResize" :class-index="classIndex"
                      @on-sort="onSort" @on-resize-end="onResizeEnd"></n-table-th>
        </template>
      </tr>
    </thead>
  </table>
</template>

<script>
import NTableColgroup from './colgroup'
import NTableTh from './th'
export default {
  name: 'n-table-header',
  components: {
    NTableColgroup,
    NTableTh
  },
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    // 列表样式（下标）
    classIndex: {
      type: Object,
      default () {
        return {}
      }
    },
    hasResize: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  methods: {
    onSort (column) {
      this.$emit('on-sort', column)
    },
    onResizeEnd (column) {
      this.$emit('on-resize-end', column)
    }
  }
}
</script>
