<template>
  <div class="project-table-container">
    <el-card class="table-card" shadow="hover">
      <el-table
        v-loading="loading"
        :data="dataList"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
      >
        <!-- 序号 -->
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        />

        <!-- 项目名称 -->
        <el-table-column
          label="项目名称"
          min-width="160"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div class="project-name-cell">
              <div class="name">{{ scope.row.projectName }}</div>
              <div class="desc">{{ scope.row.projectDesc }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="110"
          align="center"
        />

        <!-- 状态 -->
        <el-table-column
          label="状态"
          prop="projectStatus"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.projectStatus)"
              size="medium"
              effect="plain"
            >
              {{ getStatusLabel(scope.row.projectStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 目标人数 -->
        <el-table-column
          label="目标人数"
          prop="targetCount"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span class="count-number">{{ scope.row.targetCount }}</span>
          </template>
        </el-table-column>

        <!-- 预警人数 -->
        <el-table-column
          label="预警人数"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="getWarningClass(scope.row)">{{ scope.row.warningCount }}</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
          class-name="operation-column"
        >
          <template slot-scope="scope">
            <div class="operation-buttons">
              <!-- 进行中项目 -->
              <template v-if="scope.row.projectStatus === '0'">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-data"
                  @click="handleEnter(scope.row)"
                >进入项目</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  @click="handleReAnalyze(scope.row)"
                >重新分析</el-button>
              </template>

              <!-- 已完成项目 -->
              <template v-else-if="scope.row.projectStatus === '1'">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewResult(scope.row)"
                >查看结果</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  @click="handleReAnalyze(scope.row)"
                >重新分析</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-folder"
                  @click="handleArchive(scope.row)"
                >归档</el-button>
              </template>

              <!-- 已归档项目 -->
              <template v-else>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document"
                  @click="handleDetail(scope.row)"
                >查看详情</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="pageParams.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParams.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProjectTable',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    pageParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10
      })
    }
  },
  methods: {
    /** 获取状态类型 */
    getStatusType(status) {
      const statusMap = {
        '0': 'primary',    // 进行中
        '1': 'success',    // 已完成
        '2': 'info'        // 已归档
      }
      return statusMap[status] || 'info'
    },
    /** 获取状态标签 */
    getStatusLabel(status) {
      const statusMap = {
        '0': '进行中',
        '1': '已完成',
        '2': '已归档'
      }
      return statusMap[status] || '未知'
    },
    /** 获取预警数量样式类名 */
    getWarningClass(row) {
      if (row.warningCount > 20) return 'warning-high'
      if (row.warningCount > 10) return 'warning-medium'
      return 'warning-normal'
    },
    /** 进入项目 */
    handleEnter(row) {
      this.$emit('enter', row)
    },
    /** 查看详情 */
    handleDetail(row) {
      this.$emit('detail', row)
    },
    /** 查看结果 */
    handleViewResult(row) {
      this.$emit('view-result', row)
    },
    /** 重新分析 */
    handleReAnalyze(row) {
      this.$emit('re-analyze', row)
    },
    /** 归档 */
    handleArchive(row) {
      this.$emit('archive', row)
    },
    /** 分页大小变化 */
    handleSizeChange(val) {
      this.$emit('pagination', { pageSize: val, pageNum: 1 })
    },
    /** 当前页变化 */
    handleCurrentChange(val) {
      this.$emit('pagination', { pageNum: val })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-table-container {
  margin-bottom: 12px;
}

.table-card {
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

  :deep(.el-card__body) {
    padding: 0;
  }
}

.project-name-cell {
  .name {
    font-weight: 500;
    color: #303133;
    margin-bottom: 2px;
    font-size: 14px;
  }

  .desc {
    font-size: 12px;
    color: #909399;
  }
}

.count-number {
  font-weight: 500;
  color: #606266;
}

.warning-count-cell {
  .warning-high {
    color: #F56C6C;
    font-weight: 600;
  }

  .warning-medium {
    color: #E6A23C;
    font-weight: 500;
  }

  .warning-normal {
    color: #67C23A;
    font-weight: 400;
  }
}

.pagination-container {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #EBEEF5;
}

// 表格行样式优化
:deep(.el-table) {
  .el-table__row {
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }
  }

  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #dcdfe6;
      border-radius: 3px;

      &:hover {
        background-color: #c0c4cc;
      }
    }
  }

  // 操作列样式
  .operation-column {
    .cell {
      padding: 0 8px;
    }
  }
}

.operation-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
  white-space: nowrap;

  :deep(.el-button--mini) {
    padding: 4px 6px;
    font-size: 12px;
  }

  :deep(.el-button--mini .el-icon--left) {
    margin-right: 2px;
  }

  :deep(.el-button + .el-button) {
    margin-left: 0;
  }
}
</style>
