 <template>
  <div>
    <el-table :data="this.tableAll"
              :style="tableStyle"
              :header-cell-style="setHeaderRowStyle"
              :row-style="setRowStyle"
              :cell-style="setcellStyle"
              :max-height="configAll.maxHeight?configAll.maxHeight:'none'"
              :border="configAll.built_border"
              :show-header="!configAll.hideHeader"
              @cell-mouse-enter="mouseChange"
              @cell-mouse-leave="leaveChange">
      <div v-for="(item,index) in key_arr"
           :key="index">
        <div v-if="item.length===1">
          <el-table-column :prop="item[0]"
                           :label="item[0]">
          </el-table-column>
        </div>
        <div v-else>
          <el-table-column :label="item[0].split('__')[0]">
            <el-table-column v-for="item2 in item"
                             :key="item2"
                             :prop="item2"
                             :label="item2.split('__')[1]">
            </el-table-column>
          </el-table-column>
        </div>
      </div>
    </el-table>
  </div>

</template>
<script>
export default {
  name: 'commonTable',
  props: {
    tableAll: {
      type: Array,
      required: true
    },
    configAll: {
      type: Object
    }
  },
  data() {
    return {
      key_arr: [],
      jsoneditorVisible: false,
      tableStyle: '',
      headerRowStyleArr: [],
      rowStyleArr: [],
      columnStyleArr: []
    }
  },
  watch: {
    tableAll: {
      handler: function(newVal, oldVal) {
        this.key_arr = this.get_attr_complex(this.get_attr(this.tableAll[0]))
        this.assertArr()
      },
      deep: true
    },
    configAll: {
      handler: function(newVal, oldVal) {
        this.key_arr = this.get_attr_complex(this.get_attr(this.tableAll[0]))
        this.assertArr()
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    // 修改表头样式
    setHeaderRowStyle(row) {
      if (this.configAll.headerRow) {
        if (this.configAll.headerRow.styleArr) {
          for (let i = 0; i < this.configAll.headerRow.indexArr.length; i++) {
            if (this.configAll.headerRow.indexArr[i] === row.columnIndex) {
              return this.headerRowStyleArr[i]
            }
          }
        }
        return this.configAll.headerRow.allStyle
      } else {
        return ''
      }
    },
    // 修改行样式
    setRowStyle(row) {
      if (this.configAll.row) {
        if (this.configAll.row.styleArr) {
          for (let i = 0; i < this.configAll.row.indexArr.length; i++) {
            if (this.configAll.row.indexArr[i] === row.rowIndex) {
              return this.rowStyleArr[i]
            }
          }
        }
        return this.configAll.row.allStyle
      } else {
        return ''
      }
    },
    // 修改列样式
    setcellStyle(row) {
      if (this.configAll.column) {
        if (this.configAll.column.styleArr) {
          for (var i = 0; i < this.configAll.column.indexArr.length; i++) {
            if (this.configAll.column.indexArr[i] === row.columnIndex) {
              return this.columnStyleArr[i]
            }
          }
        }
        return this.configAll.column.allStyle
      } else {
        return ''
      }
    },
    // 鼠标移入事件
    mouseChange(row, column, cell, event) {
      if (this.configAll.hover) {
        cell.parentNode.style.background = this.configAll.hover.hoverBackground
      }
    },
    // 鼠标离开事件
    leaveChange(row, column, cell, event) {
      if (this.configAll.hover) {
        cell.parentNode.style.background = this.configAll.hover.leaveBackground
      }
    },
    // 获取表头
    get_attr(obj) {
      var keyList = []
      for (var key in obj) {
        keyList.push(key)
      }
      return keyList
    },
    // 获取复杂表头
    get_attr_complex(arr) {
      var newArr = []
      const keyArr = []
      arr.forEach((element, index) => {
        newArr.push(element.split('__')[0])
      })
      var b = new Set(newArr)
      var setArr = [...b]
      var result = {}
      setArr.forEach((element, index) => {
        if (!result[element]) {
          result[element] = []
        }
        arr.forEach(item => {
          if (element === item.split('__')[0]) {
            result[element].push(item)
          }
        })
      })
      setArr.forEach(ele => {
        keyArr.push(result[ele])
      })
      // 解决渲染时，最前面的元素会被排到最后面问题
      keyArr.unshift(keyArr[keyArr.length - 1])
      keyArr.splice(keyArr.length - 1, 1)
      return keyArr
    },
    // 对象合并去重
    joinObj(arr, obj) {
      var arr1 = []
      for (let i = 0; i < arr.length; i++) {
        arr1.push(Object.assign({}, obj, arr[i]))
      }
      return arr1
    },
    assertArr() {
      if (!this.configAll) return
      if (this.configAll.tableStyle) {
        this.tableStyle = JSON.stringify(this.configAll.tableStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
      }
      if (this.configAll.headerRow && this.configAll.headerRow.styleArr) {
        this.headerRowStyleArr = this.joinObj(this.configAll.headerRow.styleArr, this.configAll.headerRow.allStyle)
      }
      if (this.configAll.row && this.configAll.row.styleArr) {
        this.rowStyleArr = this.joinObj(this.configAll.row.styleArr, this.configAll.row.allStyle)
      }
      if (this.configAll.column && this.configAll.column.styleArr) {
        this.columnStyleArr = this.joinObj(this.configAll.column.styleArr, this.configAll.column.allStyle)
      }
      if (this.configAll.gutter) {
        var tableId = document.getElementById(this.elId)
        // 此处要做判断
        if (tableId) {
          var gutterArr = tableId.getElementsByClassName('gutter')
          // 此次也要做判断
          if (!gutterArr || (gutterArr && !gutterArr.length)) return
          gutterArr[0].style.background = this.configAll.gutter.background
          gutterArr[0].style.border = this.configAll.gutter.border
          gutterArr[0].style.borderTop = this.configAll.gutter.borderTop
          gutterArr[0].style.borderBottom = this.configAll.gutter.borderBottom
          gutterArr[0].style.borderLeft = this.configAll.gutter.borderLeft
          gutterArr[0].style.borderRight = this.configAll.gutter.borderRight
        }
      }
    }
  }

}
</script>
<style>
/* 禁止掉默认的hover事件 */
.el-table--striped .el-table__body tr.current-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: transparent !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
/* 表格错位问题 */
body .el-table th.gutter {
  display: table-cell !important;
}
/* 表格背景色透明 */
.el-table th,
.el-table thead.is-group th,
.el-table tr,
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/* 去除表格边框线 */
.el-table::before,
.el-table::after {
  height: 0 !important;
}

/* 放大缩小表格产生的滚动条 */

.el-table::-webkit-scrollbar,
.scroll_area::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0.05rem; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.01rem;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 0.05rem; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.05rem;
}
.el-table::-webkit-scrollbar-thumb,
.scroll_area::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  /*background: #232449;*/
  opacity: 0.7;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0.04rem;
  box-shadow: none;
  -webkit-box-shadow: none;
  background-color: rgba(186, 186, 255, 0.3);
  opacity: 0.1;
}
.el-table::-webkit-scrollbar-track,
.scroll_area::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  background: transparent;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  background: transparent;
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*display: none;*/
  width: 0; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.05rem;
}

.el-table {
  height: 400px;
}
</style>
