<template>
  <tbody class="reportTable">
    <template v-for="(slotRow, slotRowIndex) in activatedConfig.columns">
      <!--   非动态行   -->
      <template v-if="slotRow[0].type !== 'inputColumns'">
        <!--   非展示页   -->
        <template v-if="!forDisplay">
          <x-report-tr-group :key="'header' + slotRowIndex" :columns="slotRow" :config-data="activatedConfig.data"></x-report-tr-group>
        </template>
        <!--   展示页   -->
        <template v-else>
          <x-report-tr-group :key="'header' + slotRowIndex" :columns="slotRow" :config-data="activatedConfig.data" :display="true"></x-report-tr-group>
        </template>
      </template>
      <!--   动态行   -->
      <template v-else>
        <!--   非展示页   -->
        <template v-if="!forDisplay">
          <x-report-tr-group :key="'slotRow' + slotRowIndex" :columns="slotRow" :config-data="activatedConfig.data" :input-columns-button="true" :input-columns="true"></x-report-tr-group>
        </template>
        <!--   展示页   -->
        <template v-else>
          <x-report-tr-group
            :columns="slotRow[0].definition"
            :config-data="{arr: activatedConfig.data[slotRow[0].dataIndex]}"
            :input-columns="true"
            v-for="(item, definitionIndex) in activatedConfig.data[slotRow[0].dataIndex]"
            :input-columns-definition-index="definitionIndex"
            :display="true"
            :key="slotRow[0].dataIndex + definitionIndex + slotRowIndex"></x-report-tr-group>
        </template>
      </template>
    </template>
  </tbody>
</template>

<script>
import XReportTrGroup from '@vue2-client/base-client/components/common/XReportTrGroup'
import { getConfigByName } from '@vue2-client/services/api/common'

export default {
  name: 'XReportSlot',
  props: {
    config: {
      type: Object,
      require: true
    },
    forDisplay: {
      type: Boolean,
      default: false
    },
    slotConfigName: {
      type: String,
      default: undefined
    }
  },
  components: {
    XReportTrGroup
  },
  data () {
    return {
      data: this.config.data,
      slotConfig: undefined,
      render: false,
      activatedConfig: {},
      slotScan: {},
    }
  },
  methods: {
    // async getAllData() {
    //   let db = await idb.open('db-name', 1)
    //   let tx = db.transaction('objectStoreName', 'readonly')
    //   let store = tx.objectStore('objectStoreName')
    //   let allSavedItems = await store.getAll()
    //   console.log(allSavedItems)
    //   db.close()
    // }
  },
  beforeMount () {
    if (this.slotConfigName) {
      getConfigByName(this.slotConfigName, undefined, res => {
        this.slotConfig = res
        res.data = { ...res.data, ...this.config.data }
        this.config.data = res.data
        this.activatedConfig = res
        this.render = true
      })
    } else {
      this.activatedConfig = this.config
      this.render = true
    }
  },
  watch: {
    config: {
      deep: true,
      handler (newVal) {
      }
    }
  }
}
</script>

<style lang="less" scoped>
.reportTable {
  width: 100%;
  border-collapse: collapse;
  table-layout:fixed;
  word-break:break-all;
}
</style>
