/*
 * 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" class="table-fixed heightNumSetting" :row-style="{ height: '50px' }"
      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" 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 './lb-column'
  export default {
    props: {
      column: Array,
      data: Array,
      spanMethod: Function,
      pagination: {
        type: Boolean,
        default: true,
      },
      isRadio: {
        type: Boolean,
        default: false,
      },
      border: {
        type: Boolean,
        default: true,
      },
      showHeader: {
        type: Boolean,
        default: true,
      },
      paginationTop: {
        type: String,
        default: '0',
      },
      heightNum: {
        type: Number,
        default: 0,
      },
      maxHeight: {
        type: Number,
        default: 500
      },
      minHeight: {
        type: Number,
        default: 160
      },
      heightNumSetting: {
        type: Boolean,
        default: false,
      },
      customClass: {
        type: String,
        default: '',
      },
      paginationAlign: {
        type: String,
        default: 'left',
      },
      calcHeight: {
        type: Number,
        default: 170
      },
      merge: Array,
    },
    components: {
      LbColumn,
    },

    /**
     * @description: data
     * @author: renchao
     */
    data () {
      return {
        tableHeight: 'auto',
        mergeLine: {},
        mergeIndex: {},
        selected: ''
      }
    },
    /**
     * @description: created
     * @author: renchao
     */
    created () {
      this.getMergeArr(this.data, this.merge)
      this.getHeight()
    },
    computed: {
      dataLength () {
        return [] || this.data.length
      },
    },
    methods: {
      /**
       * @description: 单选
       * @param {*} row
       * @author: renchao
       */
      singleElection (row) {
        this.selected = this.data.indexOf(row);
        // this.$emit('row-click', row)
      },

      /**
       * @description: tableRowClassName
       * @author: renchao
       */
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'interlaced';
        }
      },
      /**
       * @description: getHeight
       * @author: renchao
       */
      getHeight () {
        if (!this.heightNumSetting) {
          let _this = this
          if (this.heightNum == 0) {
            _this.$nextTick(() => {
              if (document.querySelector(".tags-view-container")) {
                window.addEventListener('resize', () => {
                  if (_this.calcHeight == 170) {
                    _this.tableHeight = _this.calcHeightx(170)
                  } else {
                    _this.tableHeight = _this.calcHeightx(_this.calcHeight)
                  }
                });
                if (_this.calcHeight == 170) {
                  _this.tableHeight = _this.calcHeightx(170)
                } 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.$nextTick(() => {
            let arr = document.getElementsByClassName('heightNumSetting');
            [...arr].forEach(item => {
              this.minHeight && (item.style.minHeight = this.minHeight + 'px')
            })
          })
        }
      },
      /**
       * @description: calcHeightx
       * @param {*} value
       * @param {*} wappered
       * @author: renchao
       */
      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;
      },
      /**
       * @description: clearSelection
       * @author: renchao
       */
      clearSelection () {
        this.$refs.elTable.clearSelection()
      },
      /**
       * @description: toggleRowSelection
       * @author: renchao
       */
      toggleRowSelection (row, selected) {
        this.$refs.elTable.toggleRowSelection(row, selected)
      },
      /**
       * @description: toggleAllSelection
       * @author: renchao
       */
      toggleAllSelection () {
        this.$refs.elTable.toggleAllSelection()
      },
      /**
       * @description: toggleRowExpansion
       * @param {*} row
       * @param {*} bsm
       * @author: renchao
       */
      toggleRowExpansion (row, expanded) {
        this.$refs.elTable.toggleRowExpansion(row, expanded)
      },
      /**
       * @description: setCurrentRow
       * @param {*} row
       * @author: renchao
       */
      setCurrentRow (row) {
        this.$refs.elTable.setCurrentRow(row)
      },
      /**
       * @description: setCurrentRow
       * @author: renchao
       */
      clearSort () {
        this.$refs.elTable.clearSort()
      },
      /**
       * @description: clearFilter
       * @param {*} columnKey
       * @author: renchao
       */
      clearFilter (columnKey) {
        this.$refs.elTable.clearFilter(columnKey)
      },
      /**
       * @description: doLayout
       * @author: renchao
       */
      doLayout () {
        this.$refs.elTable.doLayout()
      },
      /**
       * @description: sort
       * @param {*} prop
       * @param {*} order
       * @author: renchao
       */
      sort (prop, order) {
        this.$refs.elTable.sort(prop, order)
      },
      /**
       * @description: paginationCurrentChange
       * @param {*} val
       * @author: renchao
       */
      paginationCurrentChange (val) {
        this.$emit('p-current-change', val)
      },
      /**
       * @description: getMergeArr
       * @param {*} tableData
       * @param {*} merge
       * @author: renchao
       */
      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
              }
            }
          })
        })
      },
      /**
       * @description: mergeMethod
       * @author: renchao
       */
      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: {
      /**
       * @description: merge
       * @author: renchao
       */
      merge () {
        this.getMergeArr(this.data, this.merge)
      },
      /**
       * @description: dataLength
       * @author: renchao
       */
      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;
  }
  /deep/.el-table .cell {
    line-height: 16px;
  }
</style>