<template>
  <div style="width: 100%;height: 100%;" ref="resizeBox">
    <el-table
        ref="table1"
        v-bind="{...tableOption.table,'max-height':maxHeight}"
        style="width: 100%">
      <el-table-column
          v-for="(i,k) in tableOption.th"
          v-bind="i"
          :key="JSON.stringify(i)">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>


export default {
  props: ['defaultData'],
  data() {
    return {
      resizeTime: true,
      maxHeight: null,
      tableOption: {
        table: {},
        th: {}
      },
      requestData: {}
    }
  },
  watch: {
    defaultData: {
      handler() {
        this.getTableOption()
        this.getThOption()
      },
      deep: true
    },
  },
  mounted() {
    this.$nextTick(() => {
      const resizeObserver = new ResizeObserver(entries => {
        if (this.resizeTime) {
          this.resizeTime = false
          setTimeout(() => {
            const {height} = entries?.[0]?.contentRect;
            if (height) {
              this.$set(this, 'maxHeight', height.toFixed(0) + 'px')
            }
            this.resizeTime = true
          }, 16)
        }
      });
      resizeObserver.observe(this.$refs.resizeBox);
    });
    if (this.defaultData) {
      console.log(this.defaultData)
      this.getTableOption()
      this.getThOption()
    }
  },
  methods: {
    getTableOption() {
      let maxLength = 0
      let tableData = []
      let requestData = []
      this.defaultData.originalData.data.forEach(e => {
        if (((typeof e.key === 'string' && e.key.startsWith('{{') && e.key.endsWith('}}'))) && Array.isArray(this.$parseData(e.key, this.requestData))) {
          let data = this.$parseData(e.key, this.requestData)
          data.forEach((e, i) => {
            requestData[i] = {...(requestData[i] || []), ...e}
          })
        } else {
          let key1 = this.$clearNull(e.key, this.requestData)
          let data1 = this.$clearNull(e.data, this.requestData)
          let str
          if (Array.isArray(data1)) {
            str = data1
          } else {
            str = (data1 || '').replaceAll('，', ',').split(',')
          }
          maxLength = maxLength = Math.max(maxLength, str.length);
          tableData.push({
            key: key1,
            data: str,
          })
        }
      })
      let oriData = Array(maxLength).fill('').map((i, index) => {
        let obj = {}
        tableData.forEach(e => {
          if (e?.key) {
            obj[e.key] = e.data?.[index] || ''
          }
        })
        return obj
      })
      this.tableOption.table.data = Array(Math.max(requestData.length, oriData.length)).fill('').map((i, index) => {
        return {
          ...(requestData[index] || []),
          ...(oriData[index] || [])
        }
      })
    },
    getThOption() {
      let th = []
      this.defaultData.originalData.th.forEach(e => {
        let obj = {}
        if (typeof e.prop === 'string' && e.prop.startsWith('{{') && e.prop.endsWith('}}')) {
          let data = this.$parseData(e.prop, this.requestData)
          if (typeof data === "string") {
            obj = this.$clearNull(e, this.requestData)
            th.push(obj)
          } else {
            if (Array.isArray(data)) {
              data.forEach(v => {
                th.push({
                  prop: v,
                  label: v
                })
              })
            }
          }
        } else {
          th.push(e)
        }
      })
      this.tableOption.th = th
    },
    async InitiateRequest() {
      this.requestData = {}
      for (const e of this.defaultData.requests) {
        let fn = new Function('_this', `return async function() {${e.text}}`)
        let data = await fn(this)()
        e.data = JSON.stringify(data)
        this.requestData = ({...this.requestData, ...data})
      }
    }
  },
}
</script>
<style>

</style>
