<template>
  <view class="student-item" >
    
    <view class="left" >
      <image class="rank-img" v-if="rank < 4" :src="rankReat" />
      <view class="rank-flag" v-else >
        <text>{{rankReat}}</text> 
      </view>
    </view>
    <view class="right" >
      <student-info :itemData='itemData'/>
    </view>
    
  </view>
</template>

<script>
export default {
  name: 'student-item',
  props: {
    rank: Number,
    itemData: {
      type: Object,
      require: true
    }
  },
  computed: {
    rankReat () {
      if (this.rank < 4) {
        return require(`@/static/competition/rank${this.rank}.png`)
      } else {
        return this.rank
      }
    }
  }
}
</script>

<style lang="less" scoped>
.student-item {
  // width: 104rpx;
  display: flex;
  // justify-content: center;
  align-items: center;
  height: 164rpx;
  box-sizing: border-box;
  padding-left: 56rpx;
  
  .left {
    .rank-img {
      width: 60rpx;
      height: 60rpx;
      margin-right: 14rpx;
    }
    .rank-flag {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      text {
        width: 40rpx;
        height: 40rpx;
        background: rgba(153, 153, 153, 0.2);
        border-radius: 50%;
        font-size: 24rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 26rpx;
      }
    }
  }
}
</style>