<template>
  <div class="custom-table" ref="tableContainer">
    <el-table
      ref="elTableRef"
      :data="tableData"
      :max-height="computedTableHeight"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
      :border="border"
      :highlight-current-row="highligt"
    >
      <el-table-column v-if="showSelection" type="selection" width="55" />
      <el-table-column v-if="showIndex" type="index" width="50" label="序号" />
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column v-bind="column" :prop="column.prop" :label="column.label">
          <template #default="scope">
            <slot :name="column.prop" :row="scope.row">
              <template v-if="column.type === 'multiButton'">
                <div class="button-group">
                  <el-button
                    v-for="(userName, userIndex) in scope.row[column.prop]"
                    :key="userIndex"
                    type="text"
                    size="small"
                    @click="handleButtonClick(userName, column.prop)"
                  >
                    {{ userName }}
                  </el-button>
                </div>
              </template>
              <template v-else-if="column.type === 'status'">
                <span v-if="column.callback" v-html="column.callback(scope.row[column.prop], scope.row)"></span>
                <span v-else>
                  {{ scope.row[column.prop] }}
                </span>
              </template>
              <template v-else>
                {{ scope.row[column.prop] }}
              </template>
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination-container" ref="paginationContainer" v-if="showPagination">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import useTableResize from '@/hooks/useTableResize'

const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  showSelection: {
    type: Boolean,
    default: false,
  },
  showIndex: {
    type: Boolean,
    default: false,
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50],
  },
  maxHeight: {
    type: String,
    default: '100%',
  },
  offsetHeight: {
    type: Number,
    default: 0,
  },
  border: {
    type: Boolean,
    default: false,
  },
  multiSelect: {
    type: Boolean,
    default: true,
  },
  highligt: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['selection-change', 'size-change', 'current-change', 'button-click'])

const currentPage = ref(1)
const pageSize = ref(10)
const tableContainer = ref(null)
const paginationContainer = ref(null)
const computedTableHeight = ref(null)
const elTableRef = ref(null)

const handleSelectionChange = selection => {
  emit('selection-change', selection)
}

const handleSizeChange = val => {
  pageSize.value = val
  emit('size-change', val)
}

const handleCurrentChange = val => {
  currentPage.value = val
  emit('current-change', val)
}

const updateTableHeight = () => {
  nextTick(() => {
    if (tableContainer.value) {
      const parentElement = tableContainer.value.parentElement
      const parentHeight = parentElement.clientHeight
      const tableTop = tableContainer.value.getBoundingClientRect().top - parentElement.getBoundingClientRect().top
      const paginationHeight = props.showPagination ? paginationContainer.value.offsetHeight + 30 : 0 // 加上 margin-top
      computedTableHeight.value = parentHeight - tableTop - paginationHeight
    }
  })
}

// 暴露 el-table 的方法
defineExpose({
  clearSelection: () => elTableRef.value?.clearSelection(),
  toggleRowSelection: (row, selected) => elTableRef.value?.toggleRowSelection(row, selected),
  setCurrentRow: row => elTableRef.value?.setCurrentRow(row),
  // 可以根据需要暴露更多的方法
})

onMounted(() => {
  updateTableHeight()
  window.addEventListener('resize', updateTableHeight)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateTableHeight)
})
</script>

<style scoped>
.custom-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pagination-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
:deep(.el-scrollbar__wrap--hidden-default) {
  min-height: 100px;
}
:deep(.el-table) {
  --el-table-text-align: center;
}

:deep(.el-table th) {
  text-align: center;
}

:deep(.el-table .cell) {
  text-align: center;
}

/* 如果操作列需要特殊处理，可以添加以下样式 */
:deep(.operation-column .cell) {
  text-align: center;
  display: flex;
  justify-content: center;
}
:deep(.el-table__inner-wrapper::before) {
  display: none;
}
:deep(.el-table-column--selection) {
  text-align: center;
}
</style>
