<template>
  <div class="member-list">
    <div class="member-list__count">已有 {{ memberNum }}人 开通</div>
    <cr-notice-bar v-if="list.num" scrollable speed="40">
      <div v-for="(item, index) in list.list" :key="index" class="member-list__item">
        <cr-image
          :src="item.avatarUrl || avator"
          width="0.32rem"
          height="0.32rem"
          class="member-list__item__avator"
        />
        <span class="member-list__item__name">{{ item.nickName }} 已开通Max会员</span>
      </div>
    </cr-notice-bar>
  </div>
</template>
<script>
import avator from '@/assets/images/maxMember/avator-man.png';
export default {
  props: {
    list: {
      type: Object,
      default() {
        return {
          num: 0,
          list: []
        };
      }
    },
    avator: {
      type: String,
      default() {
        return avator;
      }
    }
  },
  computed: {
    memberNum() {
      const { num } = this.list;
      // const num = 999999999999;
      const param = {};
      const maxNum = 10000;
      const sizes = ['', '万', '亿', '万亿'];
      let sizeIndex = 0;
      if (num < maxNum) {
        param.value = num;
        param.unit = '';
      } else {
        sizeIndex = Math.floor(Math.log(num) / Math.log(maxNum));
        param.value = (num / Math.pow(maxNum, sizeIndex)).toFixed(1);
        if (param.value.split('.')[1] === '0') param.value = param.value.split('.')[0];
        if (param.value === '10000') {
          param.value = '1';
          sizeIndex++;
        }
        param.unit = sizes[sizeIndex];
      }
      return `${param.value}${param.unit}`;
    }
  }
};
</script>
<style lang="less" scoped>
.member-list {
  margin: @padding-sm -@padding-sm @padding-sm 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__count {
    .text-size(14px);
    font-weight: 500;
    color: fade(#001746, 70%);
  }
  &__item {
    display: flex;
    align-items: center;
    background: fade(#dce9ff, 20%);
    border-radius: 12px;
    border: 1px solid fade(#497bfb, 20%);
    margin-right: @padding-xs;
    padding: 2px 5px;
    &__avator {
      border: 1px solid @white;
      border-radius: 50%;
      overflow: hidden;
    }
    &__name {
      .text-size(12px);
      margin-left: @padding-unit;
      color: fade(#001746, 56%);
    }
  }
  @{deep} .cr-notice-bar {
    background-color: transparent;
    flex: 1;
    padding: 0 0 0 @padding-sm;
    height: 24px;
    &__left,
    &__right {
      display: none;
    }
    &__content {
      display: flex;
    }
  }
}
</style>
