<template>
  <div class="table-main">
    <template v-if="title">
      <a-table
        v-if="tableData"
        :scroll="{ x: scrollXWidth, y: scrollYHeight }"
        size="middle"
        :columns="tableColumns"
        :dataSource="tableData"
        :rowKey="record => record.id">
        <template slot="footer">
          <a-space>
            <span>
              <strong>{{ `总行数 : ${tableData.length}` }}</strong>
            </span>
            <span v-for="column in tableColumns" :key="column.key">
              <strong v-if="column.sum !== undefined">{{ `${column.key} : ${column.sum}` }}</strong>
            </span>
          </a-space>
        </template>
      </a-table>
      <a-result
        v-else
        status="error"
        title="请求失败"
        sub-title="这通常是因为网络波动或程序故障导致的"
      >

        <div class="desc">
          <p style="font-size: 16px;">
            <strong>我如何解决这个问题:</strong>
          </p>
          <p>
            <a-icon :style="{ color: 'red' }" type="close-circle" /> 尝试重新发起请求
          </p>
          <p>
            <a-icon :style="{ color: 'red' }" type="close-circle" /> 调整提问方式
          </p>
        </div>
      </a-result>
    </template>
  </div></template>

<script>

export default {
  name: 'DynamicTable',
  data () {
    return {
      tableColumns: [],
      // x滚动条宽度
      scrollXWidth: 1600,
      scrollYHeight: 400
    }
  },
  mounted () {
    this.initData()
  },
  props: {
    title: {
      type: String,
      default: undefined
    },
    tableData: {
      type: Array,
      default: () => null
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler (newVal) {
        this.initData()
      }
    }
  },
  methods: {
    async initData () {
      try {
        if (!this.tableData) {
          return
        }
        // 从数据第一项推断列信息
        if (this.tableData.length === 0) {
          this.tableColumns = []
          return
        }
        const sample = this.tableData[0]
        this.tableColumns = Object.keys(sample).map(key => {
          // 检查是否所有的值都是数字
          const allNumbers = this.tableData.every(item => typeof item[key] === 'number')
          let sum = 0
          if (allNumbers) {
            // 计算总和
            sum = this.tableData.reduce((total, item) => total + item[key], 0)
          }
          return {
            title: key, // 使用键名作为列标题
            dataIndex: key, // 数据索引与键名相同
            key: key,
            ellipsis: true,
            sum: allNumbers ? sum : undefined, // 如果所有的值都是数字，添加总和
          }
        })
        let totalWidth = 0
        // 设置表格宽度
        for (let i = 0; i < this.tableColumns.length; i++) {
          totalWidth = totalWidth + 180
        }
        // 设置表格高度为固定值
        this.scrollYHeight = 'calc(100vh - 35rem)'
        // 横向滚动长度大于所有宽度，才能实现固定表头
        this.scrollXWidth = totalWidth
      } catch (error) {
        console.error('Fetching data failed:', error)
      }
    },
  }
}
</script>
<style lang="less" scoped>
.table-main {
  margin-top: 8px;
  :deep(.ant-table) {
    background-color: #fff;
  }
}
</style>
