<template>
  <section class="screen ranking-list-container">

    <flat-list
      @fetch="fetch"
      :paging="false"
    >
      <template v-slot:item="{item,index}">
        <section class="ranking-list-width">
          <aside class="ranking-list-item rowACenter"
                 :class="{
                'ranking-item-front': rankingData[index]
              }"
                 :key="'ranking-item-'+index"
          >
            <div class="ranking-list-number-wrap">
              <img v-if="rankingData[index]" :src="rankingData[index].icon" class="ranking-list-number-icon" />
              <div v-else class="ranking-list-number center">{{index + 1}}</div>
            </div>

            <layout-avatar class="ranking-list-avatar" :dressPlaySrc="item.avatar_play_image" :src="item.head_pic" radius="50%"></layout-avatar>

            <div class="flex-1 ranking-list-content">
              <header class="rowACenter">
                <div class="ranking-list-username line-1">{{item.nick_name}}</div>
                <layout-sex :type="item.sex" :birthday="item.birthday"></layout-sex>
              </header>
              <div class="ranking-list-id">ID：{{ item.uid }}</div>
            </div>

            <article class="center">
              <div class="ranking-list-value">{{item.rank_value}}</div>
              <div class="ranking-list-introduce">财富值</div>
            </article>
          </aside>
          <div v-if="rankingData[index] && rankingData[index].line" class="ranking-item-line"></div>
        </section>
      </template>

    </flat-list>



  </section>
</template>

<script>
import {
  vImage,
  FlatList
} from '$components';
import props from '../props';
import rankingData from '../data/ranking';
import layoutSex from '$layout/layout-sex';
import layoutAvatar from '$layout/layout-avatar';
export default {
  name: "ranking-tab",
  data(){
    return {
      rankingData
    }
  },

  methods:{
    fetch(obj){
      return this.$request({
        url:'room/get_user_rank',
        data:{
          time: this.time,
          type: this.type
        },
        token:true
      }).then((data)=>{
        data.data = data.data || {};
        return obj.success(data.data.list || []);
      }).catch(obj.fail);
    }
  },

  props,
  components:{
    vImage,
    layoutSex,
    FlatList,
    layoutAvatar
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
