<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%"
      @filter-change="filterHandler"
      :header-cell-style="{ textAlign : 'left' }">


      <el-table-column :show-overflow-tooltip="true" :label="title" column-key="team_id" :filterMultiple="false" :filters="team_list" prop="target_name">
        <template slot-scope="scope">
          <div class="rank_head" style="width:90px;">

            <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 []}
      },
      teams: {
        type: Array,
        default: () => {return []}
      }
    },
    data() {
      let teams = JSON.parse(JSON.stringify(this.teams))
      let list = JSON.parse(JSON.stringify(this.list))
      let team_list = []
      for(let i in teams){
        team_list.push({text: teams[i].team_name, value: i})
      }
      return {
        title:'全员排名',
        pk_id: 0,
        loading:false,
        rankList: list,
        team_list:team_list,
        team_id:0,
        teams_list: teams
      }
    },
    watch: {
      list(val){
        this.rankList = JSON.parse(JSON.stringify(val))
      },
      teams(val){
        this.teams_list = JSON.parse(JSON.stringify(val))
        this.team_list = []
        for(let i in this.teams_list){
          this.team_list.push({text: this.teams_list[i].team_name, value: i})
        }
      }
    },
    methods: {
      filterHandler:function(value) {
        this.team_id = value.team_id.length > 0 ? value.team_id[0] : -1
        this.title = '全员排名'
        for(let i in this.team_list){
          if(this.team_id == i){
            this.title = this.team_list[i].text+'排名'

          }
        }
        this.loadRankList(this.team_id)
      },
      loadRankList: function (team_id) {
        if(team_id < 0){
          this.rankList = JSON.parse(JSON.stringify(this.list))
          //全员排名
        }else{
          //团队内成员排名
          this.rankList = this.teams_list[team_id].ranking
        }
      }
    },
    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>
