<template lang="pug">
  #pivot
    D3Table(ref="place", :data="tableData")
</template>

<script>
  import * as d3 from 'd3'

  import D3Table from './D3Table.vue'
  import pivotData from '../src/pivot.data'
  import { span } from '../src/helper'

  export default {
    props: ['data', 'dimension', 'measure'],
    components: {D3Table},
    data() {
      const tableData = pivotData(this.data, this.dimension, this.measure)
      return {
        tableData,
      }
    },
    mounted() {
      const {orientInfo, measure} = this.tableData
      // todo: repactor fn to general
      const newOrientInfo = orientInfo.slice()
      if (measure.length === 1 && measure.orient === 2) {
        const measureCol = orientInfo.filter(v => v === 2).length
        d3.selectAll(`table#D3Table tr:nth-child(${measureCol})`).remove()
        newOrientInfo.pop()
      }
      newOrientInfo.filter(v => v === 2).map((v, k) => d3.selectAll(`table#D3Table tr:nth-child(${k + 1}) td`))
        .forEach(v => v.call(span, 'col'))
      orientInfo.filter(v => v === 1).map((v, k) => d3.selectAll(`table#D3Table td:nth-child(${k + 1})`))
        .forEach(v => v.call(span, 'row'))
    }
  }

</script>

<style lang="sass" scoped>
</style>
