<template>
  <div style=" background-color: #fff; padding-top:0; overflow:hidden; height: 350px; position: relative;">
    <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 350px;">
    <el-table
      v-loading="loading"
      ref="rankTable"
      :data="rankList"
      v-if="rankList.length > 0"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ textAlign : 'left' }">


      <el-table-column :show-overflow-tooltip="true" label="队长排名" prop="target_name" width="120px">
        <template slot-scope="scope">
          <div class="rank_head"><img v-if="scope.row.img_url != null" v-bind:src="scope.row.img_url" width="42px" height="42px"/>


            <img v-if="scope.row.img_url == null" src="static/images/head_default.png" width="42px" height="42px"/>
            {{scope.row.employee_name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <div class="table-font-number" v-if="scope.row.rank <= 3">
            <img src="static/images/rank_01.png" width="20" v-if="scope.row.rank == 1">
            <img src="static/images/rank_02.png" width="20" v-if="scope.row.rank == 2">
            <img src="static/images/rank_03.png" width="20" v-if="scope.row.rank == 3">
          </div>


          <div class="table-font-number" v-if="scope.row.rank > 3">
            No.{{scope.row.rank }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <div v-if="scope.row.point>=0" style="font-size: 16px; color:#409EFF">
            {{ scope.row.point }}分
          </div>
          <div v-if="scope.row.point<0" style="font-size: 16px; color:#f00">
            {{ scope.row.point }}分
          </div>
        </template>
      </el-table-column>

    </el-table>
    </el-scrollbar>


    <div v-if="rankList.length == 0" style="
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -115px;
">
      <img src="static/images/nodata.png" style="display: block; margin:0 auto;" class="no-data-img">
      <p style="color:#ccc; text-align: center">暂无队长排名</p>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => {return []}
      }
    },
    data() {
      let rankList = this.list
      return {
        pk_id: 0,
        loading:false,
        rankList: rankList,
      }
    },
    watch: {
      list(val){
        this.rankList = val
      }
    },
    created() {
    }
  }
</script>

<style>
  .rank_head img{width:30px;
    height: 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px; margin-right:5px;}
  .rank_head *{
    vertical-align: middle;}
  .no-data-img{max-width:100%;}
</style>
