<template>
  <div class="tab-table-wrapper">
    <!-- 表格头部：标题自定义 + 新增按钮（显隐可控） -->
    <div class="table-header">
      <!-- 标题：父组件传递，默认空 -->
      <h3>{{ tableTitle }}</h3>
      <!-- 新增按钮：通过showAddBtn控制显隐 -->
      <div>
        <el-button
          v-if="showAddBtn"
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAddClick"
        >
          新增
        </el-button>
        <el-button
          v-if="showOwnBtn"
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleOwnClick"
        >
          自用新增
        </el-button>
        <el-button
          v-if="showSharingBtn"
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleSharingClick"
        >
          共享新增
        </el-button>
        <el-button
          v-if="showRentalBtn"
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleRentalClick"
        >
          外租新增
        </el-button>
      </div>

    </div>

    <!-- 表格滚动容器：独立滚动，表头固定 -->
    <div class="table-content" v-loading="loading">
      <el-table
        class="project-table"
        :data="tableData"
        highlight-current-row
        border
        stripe
        :empty-text="emptyText"
      >
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="calcTableIndex"
        />
        <!-- 改造后完整表格列代码（兼容Vue2/Vue3） -->
        <el-table-column
          v-for="(column, index) in tableColumns"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          :min-width="column.minWidth"
          align="center"
          show-overflow-tooltip
        >
          <!-- 作用域插槽：获取当前行数据scope.row，当前列配置column -->
          <template slot-scope="scope"> <!-- Vue3可写v-slot="scope"，效果一致 -->
            <!-- 判断：当前列有dictMap映射 → 渲染映射文字，无则渲染原始值 -->
            <span v-if="column.dictMap">
      <!-- 若字段值可能为null/undefined，添加兜底显示 -->
      {{ column.dictMap[scope.row[column.prop]] || '未知' }}
    </span>
            <span v-else>
      {{ scope.row[column.prop] || '-' }} <!-- 原始值兜底：空值显示- -->
    </span>
          </template>
        </el-table-column>
        <!-- 操作列：通过showActionCol控制显隐 -->
        <el-table-column
          v-if="showActionCol"
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" text-color="danger" @click="handleDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件：无数据时隐藏 -->
    <div class="pagination-wrapper" v-if="total > 0">
      <pagination
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
        background
        layout="total, sizes, prev, pager, next"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'EquipmentTable',
  // 父组件传递的属性：新增标题、新增按钮显隐、操作列显隐配置，均添加默认值
  props: {
    // 新增：表格标题（自定义）
    tableTitle: {
      type: String,
      default: ''
    },
    // 新增：是否显示新增按钮（true显示/false隐藏）
    showAddBtn: {
      type: Boolean,
      default: true
    },
    showOwnBtn: {
      type: Boolean,
      default: true
    },
    showSharingBtn: {
      type: Boolean,
      default: true
    },
    showRentalBtn: {
      type: Boolean,
      default: true
    },
    // 新增：是否显示操作列（true显示/false隐藏）
    showActionCol: {
      type: Boolean,
      default: true
    },
    // 原有属性：保持不变
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    tableColumns: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      required: true,
      default: 1
    },
    pageSize: {
      type: Number,
      required: true,
      default: 10
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    }
  },
  methods: {
    // 计算表格序号：基于父组件传递的分页参数
    calcTableIndex(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1
    },
    // 触发新增事件：通知父组件打开新增弹窗
    handleAddClick() {
      this.$emit('add')
    },
    handleOwnClick() {
      this.$emit('own')
    },
    handleSharingClick() {
      this.$emit('sharing')
    },
    handleRentalClick() {
      this.$emit('rental')
    },
    // 触发删除事件：传递当前行数据给父组件
    handleDeleteClick(row) {
      this.$emit('delete', row)
    },
    // 触发分页切换事件：传递新的分页参数给父组件
    handlePageChange() {
      this.$emit('pagination', {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

<style scoped lang="scss">
// 完全复用原有表格样式，兼容无标题/无按钮的布局
.tab-table-wrapper {
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;

  .table-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    justify-content: space-between;
    // 兼容无标题时的布局，避免按钮左移
    h3 {
      margin: 0;
      white-space: nowrap;
    }
  }

  .table-content {
    flex: 1;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .pagination-wrapper {
    margin-top: 12px;
    text-align: right;
    flex-shrink: 0;
    padding-right: 4px;
  }
}

.project-table {
  width: 100%;
  --el-table-row-height: 56px;
  --el-table-header-text-color: #333;
  --el-table-header-background-color: #fafafa;
  --el-table-row-hover-bg-color: #f6fbfa;

  :deep(.el-table__header-wrapper) {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--el-table-header-background-color) !important;
  }

  :deep(.el-table__header th) {
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    white-space: nowrap;
    font-weight: 600;
  }

  :deep(.el-table__body tr:hover > td) {
    background-color: var(--el-table-row-hover-bg-color) !important;
  }

  :deep(.el-table__fixed-right) {
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.02);
  }
}

// 空数据样式
:deep(.el-table__empty-text) {
  color: #909399;
  font-size: 14px;
  padding: 20px 0;
}
</style>
