<template>
  <div class="n-table-lite" :class="classes" @mousedown="onTableMouseDown">
    <!-- header -->
    <div ref="headerScroll" class="n-table-header-center" :style="headerStyles">
      <n-table-header :columns="visibleColumns" :has-resize="hasResize" :class-index="classIndex"
                      @on-sort="onTableSort" @on-resize-end="onResizeEnd"></n-table-header>
    </div>
    <div class="n-table-main">
      <!-- loading -->
      <n-loading-bar class="n-table-loading" :loading="loading"></n-loading-bar>
      <!-- empty -->
      <n-table-empty v-if="isEmpty" :no-data-builder="noDataBuilder" :style="emptyStyles"></n-table-empty>
      <!-- body -->
      <div class="n-table-body">
        <div ref="bodyScroll" class="n-table-body-center" @scroll="onBodyScroll">
          <n-table-blank v-if="isEmpty" :columns="visibleColumns"></n-table-blank>
          <n-table-body v-else :columns="visibleColumns" :data-list="dataList" :class-index="classIndex"
                        :sortable="sortable" :sortable-options="sortableOptions" :sortable-key="sortableKey"
                        @on-line-click="onLineClick" @on-cell-click="onCellClick"></n-table-body>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NTableHeader from '_common/table/header'
import NTableBody from '_common/table/body'
import NTableEmpty from '_common/table/empty'
import NTableBlank from '_common/table/blank'
import {updateColumnSort, sortDataList, mouseEvent} from '_common/tableUtil'
import {inArray} from '@uif/next/lib/utils/tools'
import tableStyles from './table-styles'
import tableCommon from '../table/table-common'

export default {
  name: 'n-table-lite',
  mixins: [tableCommon, tableStyles],
  components: {
    NTableHeader,
    NTableBody,
    NTableEmpty,
    NTableBlank
  },
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    noData: {
      validator (value) {
        return inArray(['auto', true, false], value)
      },
      default: 'auto'
    },
    noDataBuilder: {
      type: [Function, String],
      default: ''
    },
    // 列表样式（下标）
    classIndex: {
      type: Object,
      default () {
        return {}
      }
    },
    hasResize: {
      type: Boolean,
      default: false
    },
    sortable: {
      type: Boolean,
      default: false
    },
    sortableOptions: {
      type: Object,
      default: null
    },
    sortableKey: {
      type: String,
      default: 'id'
    }
  },
  data () {
    return {
    }
  },
  computed: {
    isEmpty () {
      return this.noData === 'auto' ? (!this.loading && this.dataList.length <= 0) : this.noData
    },
    // 可见列
    visibleColumns () {
      return this.columns.filter(column => !column.h)
    }
  },
  methods: {
    /**
     * 更新尺寸
     * **/
    onBodyScroll (event) {
      this.scrollLeft = event.target.scrollLeft
      this.$refs.headerScroll.scrollLeft = this.scrollLeft
    },
    /**
     * 排序事件
     * **/
    onTableSort (column) {
      this.columns.forEach(ref => this.$set(ref, '_sort', updateColumnSort(column, ref)))
      sortDataList(this.dataList, column)
      this.$emit('on-sort', column, column._sort)
    },
    /**
     * 调整列宽
     * **/
    onResizeEnd (column) {
      this.$emit('on-resize-end', column)
    },
    // 事件传递
    onLineClick (event, data, index) {
      if (mouseEvent.offset(event) <= 20) {
        this.$emit('on-line-click', event, data, index)
      }
    },
    onCellClick (event, data, index, column) {
      if (mouseEvent.offset(event) <= 20) {
        this.$emit('on-cell-click', event, data, index, column)
      }
    },
    // 鼠标点击事件
    onTableMouseDown (event) {
      mouseEvent.set(event)
    }
  }
}
</script>
