<template>
  <div class="invite">
    <div class="invite__refresh" @click="_getInvitationList"></div>
    <div class="invite__tab-box">
      <div class="invite__tab-box__tab">
        <div class="invite__tab-box__tab--item">
          邀请榜
        </div>
      </div>
    </div>
    <div class="invite__list-box">
      <div class="invite__list-box__list">
        <div class="invite__list-box__list--item" v-for="(item, index) in list" :key="index">
          <div class="invite__list-box__list--item--no">
            <img v-if="index == 0" src="./img/no-1.png" />
            <img v-else-if="index == 1" src="./img/no-2.png" />
            <img v-else-if="index == 2" src="./img/no-3.png" />
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="invite__list-box__list--item--head">
            <img v-if="item.userHeadImg" :src="item.userHeadImg" />
            <img v-else :src="channelInfo.defaultPhoneHeadAva" />
          </div>
          <div class="invite__list-box__list--item--name">
            {{ item.userNick }}
          </div>
          <div class="invite__list-box__list--item--num">
            邀请
            <span>{{ item.times | formatNum }}</span>
            人
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getInvitationList } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
export default {
  name: 'menu-invite',
  data() {
    return {
      list: [],
      prevTime: 0
    };
  },
  computed: {
    ...mapGetters({
      nowDate: 'nowDate',
      channelInfo: 'channelInfo'
    })
  },
  mounted() {
    this._getInvitationList();
  },
  methods: {
    _tab(key) {
      this.tabIndex = key;
    },
    async _getInvitationList() {
      if (this.nowDate - this.prevTime < 5000) {
        this.$layer.msg('操作太频繁了，先休息下');
        return false;
      }
      this.prevTime = this.nowDate;
      this.list = [];
      const res = await getInvitationList({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        page: 1
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.list = res.data;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.invite {
  position: relative;
  height: 100%;
  overflow: auto;
}
.invite__refresh {
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  width: 0.2rem;
  height: 0.2rem;
  background-image: url(./img/icon-refresh.png);
  background-size: 100% 100%;
  cursor: pointer;
}
.invite__tab-box {
  padding: 0.1rem 0;
  text-align: center;
  .invite__tab-box__tab {
    display: inline-block;
    border: 0.01rem solid var(--main-color);
    font-size: 0;
    border-radius: 0.05rem;
    overflow: hidden;
    .invite__tab-box__tab--item {
      display: inline-block;
      width: 0.8rem;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      font-size: 0.14rem;
      background: var(--main-color);
      color: #fff;
    }
  }
}
.invite__list-box {
  .invite__list-box__list {
    .invite__list-box__list--item {
      display: flex;
      align-items: center;
      padding: 0 0.15rem;
      height: 0.55rem;
      border-bottom: 0.01rem solid #e0e0e0;
      .invite__list-box__list--item--no {
        flex: 0 0 auto;
        margin-right: 0.1rem;
        width: 0.21rem;
        color: #409eff;
        text-align: center;
        font-size: 0.12rem;
        img {
          display: block;
          width: 100%;
        }
      }
      .invite__list-box__list--item--head {
        flex: 0 0 auto;
        width: 0.4rem;
        img {
          display: block;
          width: 0.4rem;
          height: 0.4rem;
          border-radius: 100%;
        }
      }
      .invite__list-box__list--item--name {
        flex: 1;
        margin: 0 0.08rem;
        font-size: 0.12rem;
        color: #808080;
        word-break: break-all;
      }
      .invite__list-box__list--item--num {
        flex: 0 0 auto;
        font-size: 0.12rem;
        color: #808080;
        span {
          color: #ff3b3b;
        }
      }
    }
  }
}
</style>
