<template>
  <div class="contenBox">
    <!-- 表格标题栏 -->
    <div class="table-action flex-b">
      <div class="customList">{{ contentConfig.header.title || '' }}</div>
      <div class="btns">
        <slot name="button"></slot>
      </div>
    </div>

    <!-- 表格容器（核心：控制高度铺满剩余空间） -->
    <div class="table-container">
      <el-table
        :data="pageList"
        style="width: 100%; height: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTableRef"
        v-bind="props.contentConfig?.tableProps"
        :row-key="getRowKeys"
        v-loading="loading"
        size="medium"
      >
        <!-- 表格列配置 -->
        <template v-for="item in contentConfig.propsList" :key="item.prop || item.label">
          <!-- 序号列 -->
          <el-table-column
            v-if="item.type === 'index'"
            type="index"
            :fixed="item.fixed"
            :width="item.width || 50"
            align="center"
          />

          <!-- 选择列 -->
          <el-table-column
            v-if="item.type === 'selection'"
            type="selection"
            :fixed="item.fixed"
            width="55"
            align="center"
            :reserve-selection="true"
          />

          <!-- 操作列 -->
          <el-table-column
            v-else-if="item.type === 'handler'"
            :fixed="item.fixed"
            :label="item.label || '操作'"
            :width="item.width || 150"
            align="center"
          >
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope"></slot>
            </template>
          </el-table-column>

          <!-- 自定义列 -->
          <el-table-column
            v-else-if="item.type === 'custom'"
            show-overflow-tooltip
            :fixed="item.fixed"
            :label="item.label"
            :width="item.width"
            :prop="item.prop"
            :sortable="item.sortable || false"
            :column-key="item.prop"
          >
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope"></slot>
            </template>
          </el-table-column>

          <!-- 时间格式化列 -->
          <el-table-column
            v-else-if="item.type === 'time'"
            show-overflow-tooltip
            :fixed="item.fixed"
            :label="item.label"
            :width="item.width || 180"
            align="center"
          >
            <template #default="scope">
              {{ parseTime(scope.row[item.prop]) }}
            </template>
          </el-table-column>

          <!-- 普通列 -->
          <el-table-column
            v-else
            show-overflow-tooltip
            :fixed="item.fixed"
            :label="item.label"
            :width="item.width"
            :prop="item.prop"
            :sortable="item.sortable || false"
            :column-key="item.prop"
            align="center"
          />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="content">
import { ref, watch, onMounted } from 'vue';
import type { Table } from 'element-plus';
import useSystemStore from '@/store/main';
import useUserStore from '@/store/modules/user';
import { parseTime } from '@/utils/ruoyi';

// Props 定义
interface IProps {
  contentConfig: {
    pageName: string;
    status: string;
    createUser: string;
    oneself: number;
    header: { title: string };
    tableProps?: Record<string, any>; // 表格额外属性（如 border）
    propsList: Array<{
      prop?: string;
      label: string;
      type?: 'index' | 'selection' | 'handler' | 'custom' | 'time' | string;
      width?: number | string;
      fixed?: 'left' | 'right' | boolean;
      slotName?: string;
      sortable?: boolean;
      [key: string]: any;
    }>;
    pageListParams?: Record<string, any>;
    // 其他原有配置...
    energyConsumption?: boolean;
    energyConsumptionType?: boolean;
    // ...
  };
  sizes?: number[];
  showSummary?: boolean;
  summaryMethod?: () => any;
  subtotalNum?: number;
}
const props = withDefaults(defineProps<IProps>(), {
  sizes: () => [10, 50, 100, 300, 500],
  showSummary: false,
  customSubtotal: false,
});
const emit = defineEmits(['handleSelect', 'pageChanged']);

// 状态管理
const systemStore = useSystemStore();
const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
const loading = ref(true);
const multipleTableRef = ref<InstanceType<typeof Table>>();
const selectedItems = ref<any[]>([]);

// 初始化表格数据
onMounted(() => {
  fetchPageListData();
});

// 请求表格数据
async function fetchPageListData(queryInfo: Record<string, any> = {}) {
  loading.value = true;
  try {
    await systemStore.getPageListDataAction(props.contentConfig.pageName, {
      pageNum: systemStore.pageInfo.pageNum,
      pageSize: systemStore.pageInfo.pageSize,
      userId: userStore,
      status: props.contentConfig.status,
      createUser: props.contentConfig.createUser,
      oneself: props.contentConfig.oneself,
      ...queryInfo,
      ...props.contentConfig.pageListParams,
    });
  } finally {
    loading.value = false;
  }
}

// 监听页面操作后刷新表格
systemStore.$onAction(({ name }) => {
  if (['newPageDataAction', 'deletePageDataAction'].includes(name)) {
    systemStore.pageInfo.pageNum = 1;
    systemStore.pageInfo.pageSize = 50;
    fetchPageListData(); // 重新加载第一页
  }
});

// 表格选择事件
function handleSelectionChange(selection: any[]) {
  selectedItems.value = selection;
  emit('handleSelect', selection);
}

// 行唯一标识
const getRowKeys = (row: any) => row.checkId || row.id;

// 其他原有逻辑...
const clearFlag = ref(true);
const rowDate = reactive<any>([]);
// ...（省略原有其他状态逻辑，如 subtotal、energy 相关）...

// 监听 resDate 变化（原有逻辑保留）
watch(
  () => resDate,
  (newValue: any) => {
    if (props.contentConfig?.energyConsumption === true) {
      // ...原有能源统计逻辑...
    }
  },
  { deep: true }
);

// 暴露方法给父组件
defineExpose({
  fetchPageListData,
  clearSelection: () => multipleTableRef.value?.clearSelection(),
  // ...其他需要暴露的方法...
});
</script>

<style scoped lang="scss">
/* 容器样式：启用 Flex 布局 */
.contenBox {
	flex: 1;
  padding: 15px 20px 20px 20px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px; /* 可选：添加边框圆角 */
  display: flex; /* 核心：Flex 布局 */
  flex-direction: column; /* 垂直排列 */
  height: 100%; /* 继承父容器高度（需确保父容器有高度） */
  min-height: 400px; /* 最小高度，避免内容过少时表格过矮 */
  box-sizing: border-box; /* 包含 padding 计算高度 */
}

/* 标题栏样式 */
.table-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px; /* 固定高度，不参与弹性拉伸 */
  margin-bottom: 15px;
  padding: 0 5px;

  .customList {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .btns {
    display: flex;
    gap: 10px;
  }
}

/* 表格容器：铺满剩余高度 */
.table-container {
  flex: 1; /* 关键：占据父容器剩余所有空间 */
  min-height: 300px; /* 最小高度，确保表格可视 */
  overflow: hidden; /* 隐藏容器自身滚动条 */
  position: relative; /* 解决 loading 定位问题 */
}

/* 表格样式调整 */
.el-table {
  width: 100% !important;
  height: 100% !important; /* 表格高度铺满容器 */
  max-height: none !important; /* 移除原有最大高度限制 */
  display: flex;
  flex-direction: column;
}

/* 表头样式 */
.el-table__header-wrapper {
  flex-shrink: 0; /* 表头不收缩 */
  background-color: #f5f7fa; /* 表头背景色（可选） */
}

/* 表体样式：内容超出时滚动 */
.el-table__body-wrapper {
  flex: 1; /* 表体占据剩余空间 */
  overflow-y: auto !important; /* 垂直滚动 */
  overflow-x: auto !important; /* 水平滚动（内容过宽时） */
}

/* 修复固定列高度问题 */
.el-table__fixed, .el-table__fixed-right {
  height: 100% !important;
}
.el-table__fixed-body-wrapper, .el-table__fixed-right-body-wrapper {
  height: calc(100% - 41px) !important; /* 固定列表体高度（减去表头高度） */
}

/* 其他原有样式 */
/* ...（保留原有其他样式，如 customList、itemName 等）... */
.customList {
	color: #606266;
	font-weight: 700;
}

.itemName {
	margin: 0 10px 5px 10px;
}

.energyClass {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1;
}
</style>