<template>
  <div class="data-excel-wrap">
    <div class="mads-table">
      <table class="table">
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="index">{{renderTableHeader(header)}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(rowData, rowIndex) in rows" :key="rowIndex">
            <td v-for="(data, colIndex) in rowData" :key="colIndex">{{data || '-'}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      sheet: null,
      pivotTableHeaders: [],
      pivotTableData: []
    }
  },
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  },
  methods: {
    renderTableHeader (header) {
      let date = this.$moment(header)

      if (date.isValid()) {
        return this.$moment(header).format('lll')
      } else {
        header = this.$_.lowerCase(header)
        return this.$_.capitalize(header)
      }
    },
    renderExcelData () {
      this.$_.forEach(this.headers, (header, index) => {
        header = this.renderTableHeader(header)
        this.sheet.cellText(0, index, header).reRender()
      })

      this.$_.forEach(this.rows, (rowData, rowIndex) => {
        this.$_.forEach(rowData, (data, colIndex) => {
          this.sheet.cellText(rowIndex + 1, colIndex, data).reRender()
        })
      })
    }
  }
  // watch: {
  //   visualizationData () {
  //     this.pivotTableHeaders = this.visualizationData.headers
  //     this.pivotTableData = this.visualizationData.data
  //   }
  // },
  // mounted () {
  //   this.pivotTableHeaders = this.visualizationData.headers
  //   this.pivotTableData = this.visualizationData.data
  // }
}
</script>

<style lang="scss" scoped>
  .data-excel-wrap {
    position: relative;
    height: calc(100% - 70px);
    padding: 0;
    .mads-table {
      overflow: auto;
      max-height: 100%;
      .table {
        thead {
          th {
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>
