<template>
  <section class="AiBigTable"/>
</template>

<script>

import AiEmpty from "./AiEmpty";

export default {
  name: "AiBigTable",
  components: {AiEmpty},
  model: {
    prop: "data",
    event: "input"
  },
  props: {
    /**
     * 表数据
     */
    data: {default: () => []},
    /**
     * 表格配置
     */
    colConfigs: {default: () => []},
    /**
     * 是否显示边框
     */
    border: Boolean,
    /**
     * 是否启用dom对象
     */
    isDom: Boolean
  },
  data() {
    return {
      html2canvas: null
    }
  },
  methods: {
    renderTable() {
      const table = document.createElement("div")
      table.style.display = 'flex'
      table.style.flexDirection = 'column'
      table.appendChild(this.renderHead())
      if (this.data.length > 0) {
        this.data.map(e => table.appendChild(this.renderRow(e)))
      } else table.appendChild(this.renderEmpty())
      if (this.isDom) {
        this.$el.appendChild(table)
      } else {
        this.$el.appendChild(table)
        this.$load(this.html2canvas).then(() => this.html2canvas(table, {
          allowTaint: true,
          useCORS: true,
          height: this.$el.offsetHeight,
          width: this.$el.offsetWidth
        })).then(ctx => {
          this.$el.removeChild(table)
          this.$el.appendChild(ctx)
        })
      }
    },
    renderHead() {
      const head = document.createElement("div")
      head.style.display = 'flex'
      head.style.alignItems = 'center'
      head.style.fontWeight = 'bold'
      head.style.background = 'rgba(243, 246, 249, 1)'
      if (this.border) {
        head.style.borderLeft = '1px solid #eee'
        head.style.borderTop = '1px solid #eee'
      } else {
        head.style.borderBottom = '1px solid #eee'
      }
      this.colConfigs.map(e => {
        const cell = this.renderCell(e)
        head.appendChild(cell)
      })
      return head
    },
    renderRow(item) {
      const row = document.createElement("div")
      row.style.display = 'flex'
      row.style.alignItems = 'center'
      if (this.border) {
        row.style.borderLeft = '1px solid #eee'
      } else {
        row.style.borderBottom = '1px solid #eee'
      }
      this.colConfigs.map(e => {
        const cell = this.renderCell(e, item)
        row.appendChild(cell)
      })
      return row
    },
    renderCell(config, row) {
      const cell = document.createElement("div")
      cell.style.display = 'flex'
      cell.style.alignItems = 'center'
      cell.style.minheight = '32px'
      cell.style.padding = '0 8px'
      if (this.border) {
        cell.style.borderBottom = '1px solid #eee'
        cell.style.borderRight = '1px solid #eee'
      }
      if (config.align) {
        cell.style.justifyContent = config.align
      }
      if (config.width) {
        cell.style.width = config.width.toString().replace(/(\d+)/g, '$1px')
        cell.style.flexShrink = 0
      } else {
        cell.style.flex = 1
        cell.style.minWidth = 0
      }
      cell.innerHTML = row?.[config.prop] || config.label
      return cell
    },
    renderEmpty() {
      const empty = document.createElement("div")
      empty.style.background = 'url("https://cdn.cunwuyun.cn/dvcp/empty.svg") no-repeat'
      empty.style.width = '100%'
      empty.style.height = '140px'
      empty.style.backgroundPosition = 'center 0'
      empty.style.backgroundSize = '120px'
      empty.style.borderBottom = '1px solid #eee'
      empty.style.borderLeft = '1px solid #eee'
      empty.style.borderRight = '1px solid #eee'
      empty.style.textAlign = 'center'
      empty.style.color = '#999'
      empty.style.paddingTop = '110px'
      empty.innerHTML = "暂无数据"
      return empty
    }
  },
  mounted() {
    this.$injectLib("https://cdn.cunwuyun.cn/html2canvas.min.js", () => {
      this.html2canvas = window?.html2canvas
      this.$nextTick(this.renderTable)
    })
  }
}
</script>

<style lang="scss" scoped>
.AiBigTable {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
</style>
