/*
 * FileName: lb-table.vue
 * Remark: element table
 * Project: lb-element-table
 * Author: 任超
 * File Created: Tuesday, 19th March 2019 9:55:27 am
 * Last Modified: Tuesday, 19th March 2019 9:55:34 am
 * Modified By: 任超
 */

<template>
  <div :class="['lb-table', customClass]">
    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
      :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
      :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
      <el-table-column width="45" align="center" v-if="isRadio">
        <template slot-scope="scope">
          <el-radio v-model="selected" :label="scope.$index"></el-radio>
        </template>
      </el-table-column>

      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
      </lb-column>
    </el-table>

    <el-table v-else ref="elTable" id="heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }"
      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs"
      :max-height="maxHeight" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
      :span-method="this.merge ? this.mergeMethod : this.spanMethod">

      <el-table-column width="45" align="center" v-if="isRadio">
        <template slot-scope="scope">
          <el-radio v-model="selected" :label="scope.$index"></el-radio>
        </template>
      </el-table-column>
      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
      </lb-column>
    </el-table>

    <br>
    <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
      layout="total,  prev, pager, next" @current-change="paginationCurrentChange"
      :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
    </el-pagination>
  </div>
</template>

<script>
import LbColumn from './LbColumn'
export default {
  props: {
    column: Array,
    data: Array,
    spanMethod: Function,
    pagination: {
      type: Boolean,
      default: true,
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    paginationTop: {
      type: String,
      default: '0',
    },
    heightNum: {
      type: Number,
      default: 355,
    },
    maxHeight: {
      type: Number,
      default: 500
    },
    minHeight: {
      type: Number,
      default: undefined
    },
    heightNumSetting: {
      type: Boolean,
      default: false,
    },
    customClass: {
      type: String,
      default: '',
    },
    paginationAlign: {
      type: String,
      default: 'left',
    },
    calcHeight: {
      type: Number,
      default: 170
    },
    merge: Array,
  },
  components: {
    LbColumn,
  },
  data () {
    return {
      tableHeight: 'auto',
      mergeLine: {},
      mergeIndex: {},
      selected: ''
    }
  },
  created () {
    this.getMergeArr(this.data, this.merge)
    this.getHeight()
  },
  computed: {
    dataLength () {
      return [] || this.data.length
    },
  },
  methods: {
    // 单选
    singleElection (row) {
      this.selected = this.data.indexOf(row);
    },

    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'interlaced';
      }
    },
    getHeight () {
      if (!this.heightNumSetting) {
        let _this = this
        if (this.heightNum) {
          _this.$nextTick(() => {
            if (document.querySelector(".tags-view-container")) {
              window.addEventListener('resize', () => {
                if (_this.calcHeight == 230) {
                  _this.tableHeight = _this.calcHeightx(192)
                } else {
                  _this.tableHeight = _this.calcHeightx(_this.calcHeight)
                }
              });
              if (_this.calcHeight == 230) {
                _this.tableHeight = _this.calcHeightx(192)
              } else {
                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
              }
            } else {
              window.addEventListener('resize', () => {
                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
              });
              _this.tableHeight = _this.calcHeightx(_this.calcHeight)
            }
          })
        } else {
          _this.tableHeight = window.innerHeight - _this.heightNum
        }
      } else {
        this.tableHeight = this.heightNum
        this.$nextTick(() => {
          this.minHeight && (document.getElementById('heightNumSetting').style.minHeight = this.minHeight + 'px')
        })
      }
    },
    calcHeightx (value, wappered = true) {
      //项目自定义的公共header部分的高度，可忽略
      let header = document.querySelector(".from-clues-header").offsetHeight;

      //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
      value = value == undefined ? 100 : value;
      if (document.querySelector(".tags-view-container")) {
        let tagsView = document.querySelector(".tags-view-container").offsetHeight;
        var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
      } else {
        var res = window.innerHeight - parseInt(header) - value;
      }
      if (wappered) {
        //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
        let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
        //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
        let header = window.document.getElementsByClassName('el-table__header-wrapper');
        //必须加延时，要不然赋不上去值
        setTimeout(() => {
          //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
          wapper[0].style.height = (value - header[0].clientHeight)
        }, 100)
      }
      return res;
    },
    clearSelection () {
      this.$refs.elTable.clearSelection()
    },
    toggleRowSelection (row, selected) {
      this.$refs.elTable.toggleRowSelection(row, selected)
    },
    toggleAllSelection () {
      this.$refs.elTable.toggleAllSelection()
    },
    toggleRowExpansion (row, expanded) {
      this.$refs.elTable.toggleRowExpansion(row, expanded)
    },
    setCurrentRow (row) {
      this.$refs.elTable.setCurrentRow(row)
    },
    clearSort () {
      this.$refs.elTable.clearSort()
    },
    clearFilter (columnKey) {
      this.$refs.elTable.clearFilter(columnKey)
    },
    doLayout () {
      this.$refs.elTable.doLayout()
    },
    sort (prop, order) {
      this.$refs.elTable.sort(prop, order)
    },
    paginationCurrentChange (val) {
      this.$emit('p-current-change', val)
    },
    getMergeArr (tableData, merge) {
      if (!merge) return
      this.mergeLine = {}
      this.mergeIndex = {}
      merge.forEach((item, k) => {
        tableData.forEach((data, i) => {
          if (i === 0) {
            this.mergeIndex[item] = this.mergeIndex[item] || []
            this.mergeIndex[item].push(1)
            this.mergeLine[item] = 0
          } else {
            if (data[item] === tableData[i - 1][item]) {
              this.mergeIndex[item][this.mergeLine[item]] += 1
              this.mergeIndex[item].push(0)
            } else {
              this.mergeIndex[item].push(1)
              this.mergeLine[item] = i
            }
          }
        })
      })
    },
    mergeMethod ({ row, column, rowIndex, columnIndex }) {
      const index = this.merge.indexOf(column.property)
      if (index > -1) {
        const _row = this.mergeIndex[this.merge[index]][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
  },
  watch: {
    merge () {
      this.getMergeArr(this.data, this.merge)
    },
    dataLength () {
      this.getMergeArr(this.data, this.merge)
    }
  },
}
</script>
<style  rel="stylesheet/scss" scoped lang="scss">
.lb-table {
  margin-top: 1px;

  .interlaced {
    background: #fafcff;
    border: 1px solid #ebf2fa;
  }
}

/deep/.el-table .cell {
  padding-left: 3px;
  padding-right: 3px;
}

/deep/.el-radio__label {
  display: none;
}
</style>