<template>
  <div class="team-member-table">
    <scroll-view scroll-x class="table-scroll">
      <table class="data-table">
        <thead>
          <tr>
            <th>部门</th>
            <th>员工数量</th>
            <th>党员数量</th>
            <th>平均年龄</th>
            <th>平均司龄</th>
            <th>证书数量</th>
            <th>开机年限</th>
            <th>综合得分</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in chartsData" :key="index">
            <td>{{ item.department }}</td>
            <td>{{ item.employeeCount }}</td>
            <td>{{ item.partyMemberCount }}</td>
            <td>{{ item.avgAge }}</td>
            <td>{{ item.avgTenure }}</td>
            <td>{{ item.certificateCount }}</td>
            <td>{{ item.machineYears }}</td>
            <td>{{ item.comprehensiveScore }}</td>
          </tr>
        </tbody>
      </table>
    </scroll-view>
  </div>
</template>

<script>
export default {
  name: 'TeamMemberTable',
  props: {
    chartsData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.team-member-table {
  .table-scroll {
    width: 100%;
  }
  
  .data-table {
    width: 100%;
    font-size: 24rpx;
    border-collapse: collapse;
    
    th, td {
      padding: 16rpx 8rpx;
      text-align: left;
      white-space: nowrap;
    }
    
    th {
      color: rgba(255, 255, 255, 0.5);
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
    }
    
    td {
      color: rgba(255, 255, 255, 0.9);
    }
  }
}
</style>
