<template>
  <div class="public-table-template">
    <public-table v-bind="$attrs" v-on="$listeners" :data="tableData" :span-method="objectSpanMethod" :summary-method="getSummaries">
      <template :slot="item.slots" slot-scope="{scope: {row,$index,title}}" v-for="item in $attrs.titles">
        <div class="scope-item" :key="item.prop">
          <slot :name="item.slots" :scope="{row, $index, title}" v-if="!customProp(item)"></slot>
          <slot :name="item.slots" :scope="{row, $index, title}" v-if="customProp(item)">
            <component :is="`${item.slots}TreeList`" :list="row.childrens" :titles="title" v-bind="$attrs" v-on="$listeners"></component>
          </slot>
        </div>
      </template>
      <template slot="header" slot-scope="{scope: {row,$index}}">
        <slot name="header" :scope="{'row': row, '$index': $index}">{{row.label}}</slot>
      </template>
    </public-table>
  </div>
</template>

<script>
import publicTable from './public_table.vue';
import treeListXm from './tree_list_xm.vue';
import treeListZb from './tree_list_zb.vue';
import treeListDw from './tree_list_dw.vue';
export default {
  inheritAttrs: false,
  name: 'tableMergeTreeTemplate',
  components: {
    publicTable,
    xmTreeList: treeListXm, 
    zbTreeList: treeListZb, 
    dwTreeList: treeListDw 
  },
  watch: {
    '$attrs.data': {
      handler(newVal, onload) {
        this.deptList = [];
        if (newVal && newVal.length>0) {
          this.getChildrens(newVal)
          this.tableData = newVal
        }
      },
      // deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tableData: [],
      tableTitle: [],
      deptList: []
    }
  },
  created() {
    // this.getChildrens(this.$attrs.data)
    // this.tableData = this.$attrs.data
  },
  methods: {
    customProp(item) {
      let customProp = this.$attrs['custom-prop'] || this.$attrs.customProp || ['xm','zb','dw']
      let slots = customProp.find(obj => obj == item.slots)
      return slots
    },
    getChildrens(data) {
      data.forEach(obj => {
        if (obj.deptArr && obj.deptArr.length>0) {
          obj.deptArr.forEach(o => {
            this.deptList.push(o)
          })
        }
        if (obj.childrens && obj.childrens.length>0) {
          obj.childrens.forEach(val => {
            if (val.label) {
              val.zs = isNaN(val.label - 0) ? 0 : val.label
            }
          })
          this.getChildrens(obj.childrens)
        }
      })
      data.forEach(obj => {
        if (!obj.zs) {
          if (obj.childrens && obj.childrens.length>0) {
            let zs = 0
            obj.childrens.forEach(val => {
              if (val.zs) {
                zs += val.zs - 0
              }
            })
            if (zs) {
              obj.zs = zs
              obj.name = `${obj.name}(${obj.zs})`
            }
          }
        }
      })
      return this.deptList
    },
    getSummaries(param) {
      let { columns, data } = param;
      let text = this.$attrs['sum-text'] || this.$attrs.sumText;
      let colspan = this.$attrs['sum-colspan'] || this.$attrs.sumColspan || 0;
      let sums = []
      if (columns && columns.length>0) {
        columns.forEach((item,i) => {
          if (i < colspan) {
            if (i == 0 ) {
              sums[i] = text
            } else {
              sums[i] = '--'
            }
          }
          if (i >= colspan) {
            let n = 0
            if (this.deptList && this.deptList.length>0) {
              this.deptList.forEach(obj => {
                if (obj.deptId == item.property) {
                  let nn = obj.fraction ? obj.fraction - 0 : 0
                  n += nn
                }
              })
            }
            sums[i] = n.toFixed(0)
          }
        })
      }
      return sums
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let colspan = this.$attrs['sum-colspan'] || this.$attrs.sumColspan || 0;
      let tableFooter = document.getElementsByClassName('el-table__footer')
      if (columnIndex == 0 && tableFooter[1]) {
        tableFooter[1].lastElementChild.firstElementChild.firstElementChild.setAttribute('colspan', colspan)
      }
    },
  }
}
</script>

<style scoped>
  .public-table-template {

  }
</style>