<template>
  <div class="recursive-table" :style="{ paddingLeft: depth * 20 + 'px' }">
    <el-table
      :data="data"
      border
      :header-cell-style="headerCellStyle"
    >
      <!-- 只在第一层显示多选 -->
      <!-- <el-table-column
        v-if="depth === 1"
        type="selection"
        width="55"
        fixed="left"
      /> -->

      <!-- 每一层都包含 expand 列 -->
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="sub-table-container">
            <div v-for="field in getNestedFields(row)" :key="field.label" class="sub-table-wrapper">
              <!-- 每个子表都包裹在一个独立容器中 -->
              <div style="margin-left: 20px; background: #fff; padding: 10px;">
                <recursive-table :data="row[field.label]" />
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- 当前层级字段 -->
      <el-table-column
        v-for="col in columns"
        :key="col"
        :prop="col"
        :label="col"
      />

      <!-- 操作列 -->
      <el-table-column
        v-if="rowDropdownList && rowDropdownList.length > 0"
        label="操作"
        align="center"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-dropdown class="m-10" @command="batchRowCommand($event, scope.row)">
            <el-button type="text" size="mini">
              扩展业务功能
              <i class="el-icon-arrow-down" />
            </el-button>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, i) in rowDropdownList"
                :key="i"
                :command="item.value"
              >
                {{ item.text }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RecursiveTable',

  props: {
    data: {
      type: Array,
      required: true
    },
    parentPath: {
      type: String,
      default: ''
    },
    rowDropdownList: {
      type: Array,
      default: () => []
    }
  },
  inject: {
    depth: {
      default: 1 // 默认为第一层
    }
  },
  provide() {
    return {
      depth: this.depth + 1 // 每深入一层，depth + 1
    }
  },
  computed: {
    // 提取当前层级的普通列（非数组）
    columns() {
      if (this.data.length === 0) return []
      const keys = Object.keys(this.data[0])
      return keys.filter(key => !Array.isArray(this.data[0][key]))
    },
    // 根据层级设置表头背景色
    headerCellStyle() {
      const colors = [
        '#eef6ff', // 第1层 浅蓝
        '#f6f6ee', // 第2层 浅灰
        '#fff0f0', // 第3层 浅红
        '#f0fff0', // 第4层 浅绿
        '#fff8e1' // 第5层 浅黄
      ]
      const index = Math.min(this.depth - 1, colors.length - 1)
      return { background: colors[index], color: '#333' }
    }
  },
  methods: {
    // 获取某一行中所有的数组字段（用于展开显示多个子表）
    getNestedFields(row) {
      const result = []
      for (const key in row) {
        const value = row[key]
        if (Array.isArray(value) && value.length > 0) {
          result.push({
            label: key
          })
        }
      }
      return result
    },
    // 表格选中
    tableSelected(val) {
      // this.$emit('selectData', val)
    },
    // 批量操作
    async batchRowCommand(url, row) {
      this.$emit('batchRowCommand', url, row)
    }
  }
}
</script>

<style scoped>
.recursive-table {
  padding-left: 20px;
}

.sub-table-wrapper {
  margin-top: 15px;
}

/* 在你的全局样式文件中添加 */
.el-table__expanded-cell {
  background-color: #f5f7fa !important; /* 调整背景色 */
}

</style>
