export default {
  name: 'ReportTable',
  functional: true,
  render (h, content) {
    if (!content.props.tableData) {
      console.log('没有报表数据')
      return
    }
    console.log('content=>', content)
    const html = reportCompute(h, content.props.tableData)
    console.log('html=>', html)
    // 报表整体高度和宽度
    const reportClass = `h-${html.h} w-${html.w}`
    return (
      <div id='ReportTableHome'>
        <div id='reportTable' class={reportClass}>
          {html.el}
        </div>
      </div>
    )
  }
}
/**
 * class类生成
 * @param w 宽
 * @param h 高
 * @param l left
 * @param t top
 * @returns {string}
 */
function generClass ({ w = 1, h = 1, l, t }) {
  return `w-${w} h-${h} l-${l} t-${t}`
}
/**
 *  判断是否是个Number数据
 * @param value
 * @returns {boolean}
 */
function typeNumber (value) {
  return Object.prototype.toString.call(value) === '[object Number]'
}
/**
 * 判断是否是个object数据
 * @param value
 * @returns {boolean}
 */
function typeObject (value) {
  return Object.prototype.toString.call(value) === '[object Object]'
}
/**
 * 判断是否是个Array数据
 * @param value
 * @returns {boolean}
 */
function typeArray (value) {
  return Object.prototype.toString.call(value) === '[object Array]'
}
/**
 * 一行数据转换html函数
 * @param h vue的h
 * @param row 一行json数据
 * @param left 起始left距离
 * @param top 起始top距离
 * @returns {{el: Array, h: number}}
 */
function rowCompute (h, row, left, top) {
  if (typeObject(row)) {
    const el = []
    const keys = Object.keys(row).filter((res) => res !== 'span')
    let heigth = 0
    for (const key of keys.values()) {
      const value = row[key].value ? row[key].value : row[key]
      const style = { l: left, t: top + heigth }
      style.w = row[key].span ? row[key].span : 1
      const nextL = left + style.w
      const nextT = top + heigth
      const divObject = rowCompute(h, value, nextL, nextT)
      el.push(divObject.el)
      style.h = divObject.h ? divObject.h : 1
      heigth += style.h
      const attrs = { class: generClass(style) + ' title' }
      const div = <div {...attrs}>{key === 'value' ? value : key}</div>
      el.push(div)
    }
    return { h: heigth, el: el }
  } else if (typeArray(row)) {
    const el = []
    for (const [i, value] of row.entries()) {
      const style = { l: (left + i), t: top, w: 1, h: 1 }
      const extraClass = typeNumber(value) ? 'bold' : 'title'
      const attrs = { class: generClass(style) + ` ${extraClass}` }
      const div = <div {...attrs}>{value}</div>
      el.push(div)
    }
    return { h: 1, el: el }
  }
}
/**
 * 完整报表数据转换html函数
 * @param h vue的h
 * @param jsonArr json数组
 * @returns {{el: Array, h: number}}
 */
function reportCompute (h, jsonArr) {
  const html = []
  let heigth = 0
  let width = 0
  for (const [index, row] of jsonArr.entries()) {
    const rowHtml = rowCompute(h, row, 0, index)
    // 取第一行的宽度作为整个报表的宽度
    if (index === 0) {
      const reg = /w-\d\s/
      for (const vNode of rowHtml.el) {
        if (!vNode.data || !vNode.data.class) continue
        const c = vNode.data.class
        const w = c.match(reg)[0].split('-')[1]
        width += (w - 0)
      }
    }
    heigth += rowHtml.h
    html.push(rowHtml.el)
  }
  return { el: html, h: heigth, w: width }
}
