<template>
  <div class="invite">
    <div class="invite__refresh">
      <div class="invite__refresh-main" @click="_getInvitationList"></div>
    </div>
    <div class="invite__list-box">
      <div class="invite__list-box__list">
        <div class="invite__list-box__list--topthree" v-if="threeList.length > 0">
          <div v-for="(item, index) in threeList" :key="index" style="display: inline-block;" :class="index === 0 ? 'first-box' : index === 1 ? 'second-box': 'third-box'">
            <div class="invite__list-box__list--topthree__item">
               <div class="invite__list-box__list--topthree__item--head second" v-if="index === 0">
                <img v-if="item.userHeadImg" :src="item.userHeadImg" :onerror="errorImg"/>
                <img v-else :src="channelInfo.defaultPhoneHeadAva" />
               </div>
               <div class="invite__list-box__list--topthree__item--head first" v-if="index === 1">
                 <img v-if="item.userHeadImg" :src="item.userHeadImg" :onerror="errorImg"/>
                 <img v-else :src="channelInfo.defaultPhoneHeadAva" data-idnex="12"/>
               </div>
               <div class="invite__list-box__list--topthree__item--head third" v-if="index === 2">
                 <img v-if="item.userHeadImg" :src="item.userHeadImg" :onerror="errorImg"/>
                 <img v-else :src="channelInfo.defaultPhoneHeadAva" />
               </div>
               <div class="invite__list-box__list--topthree__item--name">{{ item.userNick }}</div>
               <div class="invite__list-box__list--topthree__item--num">
                 邀请
                 <span>{{ item.times | formatNum }}</span>
                 人
               </div>
            </div>
          </div>
        </div>
        <div class="invite__list-box__list--item" v-for="(item, index) in afterList" :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>{{ index + 4 }}</span>
          </div>
          <div class="invite__list-box__list--item--head">
            <img v-if="item.userHeadImg" :src="item.userHeadImg" :onerror="errorImg"/>
            <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'
    }),
    threeList(){
      return this.list.slice(0, 3)
    },
    afterList() {
      return this.list.slice(3)
    },
    errorImg() {
      return 'this.src="' + this.channelInfo.defaultPhoneHeadAva + '"'
    }
  },
  mounted() {
    this._getInvitationList();
  },
  methods: {
    _tab(key) {
      this.tabIndex = key;
    },
    async _getInvitationList() {

      if (this.nowDate - this.prevTime < 1500) {
        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.15rem;
  top: 0.15rem;
  padding: 0.05rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  &-main {
    width: 100%;
    height: 100%;
    background-image: url(./img/icon-refresh.png);
    background-size: 100% 100%;
    filter: brightness(2.3);
    cursor: pointer;
  }
  &:active {
    opacity: 0.5;
  }
}
.invite__tab-box {
  padding: 0.15rem 0;
  text-align: center;
  .invite__tab-box__tab {
    display: inline-block;
    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(--chatBox-text-color);
      color: #fff;
    }
  }
}
.invite__list-box {
  .invite__list-box__list {
    background: rgba( 255, 255, 255, .1 );
    margin: 0.1rem 0.1rem 0 0.1rem;
    padding-bottom: 0.1rem;
    border-radius: .1rem;
    &--topthree {
      margin-bottom: .2rem;
      position: relative;
      height: 1.6rem;
      .first-box {
        position: absolute;
        left: calc(50% - 0.6rem);
        bottom: 0;
        width: 1.2rem;
      }
      .second-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1rem;
      }
      .third-box {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1rem;
      }
      &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.12rem;
        .first {
          &::after {
            position: absolute;
            top: -.2rem;
            left: calc(50% - .15rem);
            height: .2rem;
            width: .3rem;
            content: '';
            background-image: url(./img/second.png);
            background-size: 100% 100%;
          }
          position:relative;
          border: 3px solid #f7f2fc;
          box-shadow: 0 0 0.1rem #f7f2fc;
          height: .7rem;
          width: .7rem;
        }
        .second {
          &::after {
            position: absolute;
            top: -.233rem;
            left: calc(50% - .2rem);
            height: .233rem;
            width: .4rem;
            content: '';
            background-image: url(./img/first.png);
            background-size: 100% 100%;
          }
          position:relative;
          border: 3px solid #eda52a;
          box-shadow: 0 0 0.1rem #eda52a;
          height: .9rem;
          width: .9rem;
        }
        .third {
          &::after {
            position: absolute;
            top: -.2rem;
            left: calc(50% - .15rem);
            height: .2rem;
            width: .3rem;
            content: '';
            background-image: url(./img/third.png);
            background-size: 100% 100%;
          }
          position:relative;
          border: 3px solid #e96717;
          box-shadow: 0 0 0.1rem #e96717;
          height: .7rem;
          width: .7rem;
        }
        &--head {
          flex: 0 0 auto;
          width: 1rem;
          height: 1rem;
          border-radius: 100%;
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
        &--name {
          width: calc(100% - 0.16rem);
          margin: 0.08rem;
          font-size: 0.13rem;
          // line-height: 0.2rem;
          height: 0.16rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--chatBox-text-color);
          word-break: break-all;
          font-weight: 800;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          text-align: center;
        }
        &--num {
          flex: 0 0 auto;
          font-size: 0.12rem;
          color: var(--chatBox-text-color);
          span {
            color: #ff3b3b;
            font-weight: 800;
          }
        }
      }
    }
    .invite__list-box__list--item {
      display: flex;
      align-items: center;
      padding: 0 0.15rem;
      height: 0.55rem;
      // border-bottom: 0.01rem solid #e0e0e0;
      &:last-child {
        height: 0.65rem;
        margin-bottom: 0.1rem;
      }
      .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: var(--chatBox-text-color);
        word-break: break-all;
      }
      .invite__list-box__list--item--num {
        flex: 0 0 auto;
        font-size: 0.12rem;
        color: var(--chatBox-text-color);
        span {
          color: #ff3b3b;
          font-weight: 800;
        }
      }
    }
  }
}
</style>
