<template>
  <section class="room-published-container">

    <header class="room-published flex">
      <div @click="switchType" class="rowACenter cursor-pointer">
        <span>{{ time === 1 ?'查看总榜':'查看日榜' }}</span>
        <icon type="more" class="room-published-more"></icon>
      </div>
    </header>

    <section class="user-ranking-container rowACenter">
      <aside
        v-for="(item,index) in orderData"
        :key="'user-ranking-'+index"
        class="user-ranking-item flex-1 aCenter"
        :class="['user-ranking-item-'+(item.size || 'small')]"
      >
        <v-image class="user-ranking-avatar"
                 radius="50%"
                 :border-width="2"
                 :border-color="item.color"
                 :class="{'cursor-pointer': loadingStatus?false:userRank[item.index]}"
                 @click.stop="openUserInfo($event,userRank[item.index])"
                 :src="loadingStatus ? '' : userRank[item.index] && userRank[item.index].head_pic"
        >
          <img :src="item.icon" class="absolute user-ranking-crown" />
        </v-image>
        <div class="user-ranking-trophy relative">
          <img :src="item.trophyIcon" class="screen" />
          <div class="absolute user-ranking-trophy-number center">{{item.label}}</div>
        </div>
        <div class="line-1 user-ranking-title">{{loadingStatus ?'':userRank[item.index] ? userRank[item.index].nick_name:'虚位以待'}}</div>
        <div class="line-1 user-ranking-number">{{loadingStatus ?'':userRank[item.index] && userRank[item.index].contribution_value || 0}}</div>
      </aside>
    </section>

    <!--  后7位  -->
    <section class="user-ranking-after overflow"
      :style="{
        'height': (value ? defaultAllHeight : 0) +'px'
      }"
    >
      <template
          v-for="(item,index) in defaultNumber"
      >
        <aside
            :key="'user-ranking-item-'+index"
            class="rowACenter user-ranking-default"
            v-if="userRank[2+item]"
        >
          <div class="ranking-default-number">{{3+item}}</div>
          <div class="flex-1">
            <div class="line-1">{{ userRank[2+item].nick_name }}</div>
          </div>
          <div>{{ userRank[2+item].contribution_value }}</div>
        </aside>
      </template>

    </section>

    <!-- 展示或者不展示 -->
    <div class="user-ranking-display center overflow relative">
      <div class="absolute ranking-display-wrap aCenter">
        <div class="ranking-display-graphical cursor-pointer" @click="toggleWhole"></div>
      </div>
      <icon type="down" class="ranking-display-icon"
        :class="{'ranking-display-icon-reverse':value}"
      ></icon>
    </div>

  </section>
</template>

<script>
import {
  icon
} from '$components';
import orderData from '../data/order';
import mixins from '../mixins';
import {
  vImage
} from "$components";
import unit from '$utils/unit/unit';
import props from '../props';
export default {
  name: "room-ranking-list",
  data(){
    return {
      orderData,
      defaultNumber:7,
      defaultUseHeight:unit.unitPx(30)
    }
  },
  components:{
    vImage,
    icon
  },

  computed:{
    defaultAllHeight(){
      return this.defaultNumber * this.defaultUseHeight
    }
  },

  methods:{

    toggleWhole(){
      return this.$emit('update:value',!this.value);
    }

  },

  mixins,

  props

}
</script>

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