<template>
  <div class="invite">
    <div class="top">
      <div class="refresh" @click="_getInvitationList"></div>
      邀请榜单
      <div class="close" @click="isShow = false"></div>
    </div>
    <div class="list">
      <div class="top3">
        <div class="no" :class="`no${index + 1}`" v-for="(item, index) in top3List" :key="index">
          <div class="box">
            <img v-if="item.userHeadImg" :src="item.userHeadImg" />
            <img v-else :src="channelInfo.defaultPhoneHeadAva" />
          </div>
          <div class="num">
            邀请
            <span>{{ item.times | formatNum }}</span>
            人
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in otherList" :key="index">
        <div class="no">{{ index + 4 }}</div>
        <div class="img">
          <img v-if="item.userHeadImg" :src="item.userHeadImg" />
          <img v-else :src="channelInfo.defaultPhoneHeadAva" />
        </div>
        <div class="name">
          {{ item.userNick || '啊发发啊发f啊发发啊发f啊发发啊发f啊发发啊发f' }}
        </div>
        <div class="num">
          邀请
          <span>{{ item.times | formatNum }}</span>
          人
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getInvitationList } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
export default {
  name: 'vertical-invite-box',
  props: {
    value: {}
  },
  data() {
    return {
      list: [],
      prevTime: 0
    };
  },
  computed: {
    ...mapGetters({
      nowDate: 'nowDate',
      channelInfo: 'channelInfo'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    top3List() {
      const list = this.list || [];
      return list.slice(0, 3);
    },
    otherList() {
      const list = this.list || [];
      return list.slice(3);
    }
  },
  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 {
  padding-top: 0.4rem;
  position: relative;
  height: 100%;
  background: #fff;
  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
  }
}
.top {
  text-align: center;
  font-size: 0.12rem;
  color: #666666;
  .refresh {
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    width: 0.2rem;
    height: 0.2rem;
    background-image: url(./img/icon-refresh.png);
    background-size: 100% 100%;
    cursor: pointer;
  }
  .close {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    width: 0.2rem;
    height: 0.2rem;
    background-image: url(./img/icon-close.png);
    background-size: 100% 100%;
    cursor: pointer;
  }
}
.list {
  height: 100%;
  overflow: auto;
  .top3 {
    position: relative;
    height: 1.3rem;
    .no {
      &.no1 {
        position: absolute;
        bottom: 0;
        left: calc(50% - 0.5rem);
        width: 1rem;
        text-align: center;
        .box {
          padding: 0.28rem 0.03rem 0.03rem 0.03rem;
          margin: auto;
          width: 0.9rem;
          height: 1.15rem;
          background: url(./img/no1.png) no-repeat center bottom;
          background-size: 100% auto;
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }
      &.no2 {
        position: absolute;
        bottom: 0;
        left: calc(50% - 1.5rem);
        width: 1rem;
        text-align: center;
        .box {
          padding: 0.2rem 0.03rem 0.03rem 0.03rem;
          margin: auto;
          width: 0.55rem;
          height: 0.72rem;
          background: url(./img/no2.png) no-repeat center bottom;
          background-size: 100% auto;
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }
      &.no3 {
        position: absolute;
        bottom: 0;
        left: calc(50% + 0.5rem);
        width: 1rem;
        text-align: center;
        .box {
          padding: 0.2rem 0.03rem 0.03rem 0.03rem;
          margin: auto;
          width: 0.55rem;
          height: 0.72rem;
          background: url(./img/no3.png) no-repeat center bottom;
          background-size: 100% auto;
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }
      .num {
        margin-top: 0.05rem;
        font-size: 0.09rem;
        color: #000;
        span {
          color: #409eff;
        }
      }
    }
  }
  .item {
    padding: 0.1rem 0.12rem;
    display: flex;
    align-items: center;
    height: 0.5rem;
    .no {
      flex: 0 0 auto;
      width: 0.2rem;
      font-size: 0.09rem;
      color: #000;
    }
    .img {
      flex: 0 0 auto;
      img {
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 100%;
      }
    }
    .name {
      padding: 0 0.1rem;
      flex: 1;
      width: 0;
      line-height: 0.15rem;
      font-size: 0.12rem;
      color: #000;
    }
    .num {
      flex: 0 0 auto;
      font-size: 0.09rem;
      color: #000;
      span {
        color: #409eff;
      }
    }
  }
}
</style>
