<template lang="pug">
  row-layout.custom-table(:class="{summary:isSummary}")
    table-head(ref="head" slot="top1" :columns="columns" :width="width" :columnsWidth="columnsWidth" @on-toggle-all="toggleAll")
    Table.custom-table-body(ref="table" :border="true" :class="{empty:data.length===0}" :columns="ivuColumns" v-grid-autosize="fixHeight" :data="data" :width="width" :show-header="false")
    table-foot(v-if="isSummary" :data="summaryData" :width="width" :columnsWidth="columnsWidth" :columns="ivuColumns")
</template>
<script>
import tableHead from './table-head';
import tableFoot from './table-foot';
import rowLayout from '@/components/layouts/row';
export default {
  props: {
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    summaryData: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number
    },
    fixHeight: {
      type: Number,
      default() {
        return 10;
      }
    }
  },
  data() {
    return {
      columnsWidth: {}
    }
  },
  mounted() {
    this.$refs.table.$watch('columnsWidth', (nv, ov) => {
      if (_.size(nv))
        this.columnsWidth = nv;
      else
        this.caculateColumnWidth();
    });
    _.delay(() => {
      this.setupScollEvent();
      this.setupFootEvent();
    }, 150);
  },
  components: {
    tableHead,
    rowLayout,
    tableFoot
  },
  watch: {
    isSummary(nv) {
      this.$nextTick(() => {
        this.setupFootEvent();
      });
    }
  },
  computed: {
    ivuColumns() {
      let getVueColumns = columns => {
        let vcols = [];
        columns.forEach(col => {
          if (col.children) {
            vcols = vcols.concat(getVueColumns(col.children));
          } else {
            vcols.push(col);
          }
        });
        return vcols;
      }
      return _.cloneDeep(getVueColumns(this.columns)).map(col => {
        if (!col.key)
          col.key = col.title;
        return col;
      });
    },
    isSummary() {
      return this.summaryData && this.summaryData.length > 0;
    }
  },
  methods: {
    handleScroll(ev) {
      let $header = this.$refs.head.$el.querySelector('.ivu-table-header');
      $header.scrollLeft = ev.target.scrollLeft;
    },
    setupScollEvent() {
      let $body = this.$el.querySelector('.ivu-table-body');
      $body.addEventListener('scroll', this.handleScroll.bind(this));
    },
    setupFootEvent() {
      let $body = this.$el.querySelector('.ivu-table-body');
      let $footer = this.$el.querySelector('.custom-table-footer .ivu-table-body');
      if ($footer) {
        $footer.addEventListener('scroll', () => {
          $body.scrollLeft = $footer.scrollLeft;
        });
      }
    },
    caculateColumnWidth() {
      let icolumns = this.ivuColumns;
      let columnsWidth = {};
      _.each(icolumns, (col, i) => {
        if (col.width) {
          columnsWidth[i] = { width: col.width };
        } else {
          columnsWidth[i] = { width: 'auto' };
        }
      });
      this.columnsWidth = columnsWidth;
    },
    toggleAll(nv) {
      this.$refs.table.selectAll(nv);
    },
    getSelection() {
      return this.$refs.table.getSelection();
    },
    getOne() {
      return _.get(this.$refs.table.getSelection(), 0);
    }
  }
}
</script>

<style lang="less">
.custom-table {
  .ivu-table-wrapper:not(.custom-table-header) {
    border-top: none;
    .ivu-table-body {
      overflow: auto;
    }
  }
  .custom-table-header {
    table {
      margin-left: -1px;
    }
  }
  .custom-table-body.empty {
    .ivu-table-tip+.ivu-table-fixed,
    .ivu-table-tip+.ivu-table-fixed-right,
    .ivu-table-tip+.ivu-table-fixed+.ivu-table-fixed-right {
      visibility: hidden;
    }
  }
  &.summary {
    .custom-table-footer {
      margin-top: -19px;
      margin-left: -1px;
      position: relative;
      z-index: 2;
      border-top: 1px solid #DDD;
    }
  }
}
</style>
