import Dom from '../../libs/dom'
import Widget from '../widget'
import { orderBy, cloneDeep } from 'lodash'

class Table extends Widget {
  constructor(layer, cavas) {
    super(layer, cavas)
    this._container = Dom.createElement('div', 'table-container comp', this.el)
  }

  setPaint() {
    this.setListener()
    this._container.innerHTML = ''
    let newPaint = this._mergePaint()
    // 表头
    if (newPaint.head.show) {
      let headDom = Dom.createElement('div', 'table-head', this._container)
      let headContentDom = Dom.createElement(
        'div',
        'table-head_content',
        headDom
      )
      // 表头的高度，默认为40px
      let headHeight = Number(newPaint.head.height) || 40
      Dom.css(headDom, {
        height: headHeight + 'px',
        backgroundColor: newPaint.head.backgroundColor,
        fontSize: newPaint.head.fontSize + 'px',
        fontWeight: newPaint.head.bold ? 'bold' : 'normal',
        fontStyle: newPaint.head.italic ? 'italic' : 'normal',
        color: newPaint.head.fontColor,
        fontFamily: newPaint.head.fontFamily
      })
      newPaint.cols.forEach(col => {
        let cell = Dom.createElement('div', 'table-cell', headContentDom)
        cell.textContent = col.label
        Dom.css(cell, {
          flex: col.colWidth ? `0 0 ${col.colWidth}px` : '1 1 0%' // 这里处理列宽
        })
      })
    }
    let sortFields = []
    let sortOrders = []
    // 绘制表头内容
    newPaint.cols.forEach(col => {
      if (col.sort && col.sort !== 'none') {
        sortFields.push(col.field)
        sortOrders.push(col.sort)
      }
    })
    // 对数据进行重新排序（如果指定了排序字段的话）
    let originalData = cloneDeep(this.originalData)
    if (sortFields.length) {
      originalData = orderBy(originalData, sortFields, sortOrders)
    }
    // 绘制表格的行
    originalData.forEach((d, index) => {
      // 如果指定了行数，则只绘制指定行
      if (newPaint.row.count && index >= newPaint.row.count) {
        return false
      }
      let rowDom = Dom.createElement('div', 'table-row', this._container)
      let rowContentDom = Dom.createElement('div', 'table-row_content', rowDom)
      let rowHeight = 40
      if (newPaint.row.height) {
        rowHeight = newPaint.row.height
      } else if (newPaint.row.count) {
        let headHeight = newPaint.head.show
          ? Number(newPaint.head.height) || 40
          : 0
        rowHeight = (this.layer.layout.height - headHeight) / newPaint.row.count
      }
      Dom.css(rowDom, {
        height: rowHeight + 'px',
        backgroundColor:
          index % 2 === 0 ? newPaint.row.oddColor : newPaint.row.evenColor,
        fontSize: newPaint.row.fontSize + 'px',
        fontWeight: newPaint.row.bold ? 'bold' : 'normal',
        fontStyle: newPaint.row.italic ? 'italic' : 'normal',
        color: newPaint.row.fontColor,
        fontFamily: newPaint.row.fontFamily,
        flex: '1 1 0%' // 这里处理列宽
      })
      newPaint.cols.forEach(col => {
        let cell = Dom.createElement('div', 'table-cell', rowContentDom)
        cell.textContent = d[col.field]
        Dom.css(cell, {
          flex: col.colWidth ? `0 0 ${col.colWidth}px` : '1 1 0%' // 这里处理列宽
        })
      })
    })
  }
}

export default Table
