<template lang="pug">
  div.ivu-table-wrapper.custom-table-header(style="width:100%;overflow:hidden;")
    div.ivu-table
      div.ivu-table-header(:style="{width:width+'px'}")
        table(style="width:0")
          colgroup
            col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
          thead
            tr(v-for="row in rows")
              th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                div.ivu-table-cell
                  span(v-if="col.type!=='selection'") {{col.title}}
                  Checkbox(v-else v-model="all")
      div.fixed-header.fixed-header-left(v-if="fixedLeftWidth" :style="{width:fixedLeftWidth+'px'}")
        div.ivu-table-header(:style="{width:width+'px'}")
          table(style="width:0")
            colgroup
              col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
            thead
              tr(v-for="row in rows")
                th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                  div.ivu-table-cell
                    span(v-if="col.type!=='selection'") {{col.title}}
                    Checkbox(v-else v-model="all")
      div.fixed-header.fixed-header-right(v-if="fixedRightWidth" :style="{width:fixedRightWidth+'px'}")
        div.ivu-table-header(:style="{width:width+'px'}")
          table(style="width:0")
            colgroup
              col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
            thead
              tr(v-for="row in rows")
                th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                  div.ivu-table-cell
                    span(v-if="col.type!=='selection'") {{col.title}}
                    Checkbox(v-else v-model="all")
</template>

<script>
const scrollbarWidth = 18;
//获取层级深度
var getDepth = (columns) => {
  let depth = 0;
  let recursion = (cols, level) => {
    level++;
    if (level > depth) {
      depth = level;
    }
    _.each(cols, col => {
      if (col.children && col.children.length > 0) {
        recursion(col.children, level);
      }
    })
  }
  columns && columns.length > 0 && recursion(columns, depth);
  return depth
}
//获取广度
let getWide = (columns) => {
  let wide = 0;
  _.each(columns, col => {
    if (col.children) {
      wide += getWide(col.children)
    } else {
      wide++;
    }
  })
  return wide;
}

export default {
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number,
      default() {
        return null
      }
    },
    columnsWidth: Object.create(null)
  },
  data() {
    return {
      fixedRightWidth: 0,
      fixedLeftWidth: 0,
      all: false
    }
  },
  watch: {
    all(nv) {
      this.$emit('on-toggle-all', nv);
    },
    columnsWidth() {
      _.delay(this.setFixedHeaderWidth.bind(this), 200);
    }
  },
  mounted() {
    _.delay(this.setFixedHeaderWidth.bind(this), 200);
  },
  computed: {
    cloneColumns() {
      return _.cloneDeep(this.columns);
    },
    depth() {
      return getDepth(this.cloneColumns);
    },
    wide() {
      return this.rows[this.rows.length - 1].length;
    },
    rows() {
      return this.getRows(this.cloneColumns);
    },
    tableWidth() {
      return _.reduce(this.columnsWidth, (result, value) => {
        return result + value.width;
      }, 0);
    }
  },
  methods: {
    getRows(columns, rows, pCol = null) {
      if (!rows) {
        rows = _.repeat(',', this.depth).split('').map(d => []);
      }
      _.each(columns, function (col) {
        let curRow = _.get(pCol, '_curRow', 1);//当前到达的第几行
        col._depth = getDepth(col.children) + 1;//该列的深度
        col._rowspan = this.depth - (curRow - 1) - col._depth + 1;//该列的rowsspan
        col._colspan = getWide(col.children || []);
        col._curRow = curRow + col._rowspan;
        rows[curRow - 1].push(col);
        if (col.children) {
          this.getRows(col.children, rows, col);
        }
      }.bind(this))
      return rows;
    },
    getColWidth(obj, index) {
      let width = obj.width;
      let isOverFlow = this.$el.querySelector('.ivu-table-header').clientWidth <= this.tableWidth + scrollbarWidth;
      if (_.last(_.keys(this.columnsWidth)) === index) {
        width += scrollbarWidth;
      }
      return width;
    },
    setFixedHeaderWidth() {
      if (this.$parent.$el) {
        let elL = this.$parent.$el.querySelector('.ivu-table-fixed');
        if (elL) {
          this.fixedLeftWidth = elL.clientWidth;
        }
        let elR = this.$parent.$el.querySelector('.ivu-table-fixed-right');
        if (elR) {
          this.fixedRightWidth = elR.clientWidth;
        }
      }
    }
  }
}
</script>

<style lang="less">
.custom-table-header {
  table {
    border-collapse: collapse;
    table-layout: fixed;
    th {
      border-right: 1px solid #e3e8ee;
    }
  }
  .fixed-header {
    position: absolute;
    top: 0;
    overflow: hidden;
  }
  .fixed-header-left {
    left: 0;
    box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
  }
  .fixed-header-right {
    right: 0;
    box-shadow: -2px 0 6px -2px rgba(0, 0, 0, .2);
    .ivu-table-header {
      float: right;
    }
  }
}
</style>
