<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>
            <th>开机年限</th>
            <th>综合得分</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in chartsData" :key="index">
            <td>{{ item.personName }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.workYears }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.nation }}</td>
            <td>{{ item.politicalStatus }}</td>
            <td>{{ item.roleNames }}</td>
            <td>{{ item.qualificationLevel }}</td>
            <td>{{ item.xrayOperatorYears }}</td>
            <td>{{ item.totalScore }}</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>
