<template>
  <div class="list-comp">
    <div class="title">邀请记录</div>
    <div :class="getClass" ref="header">
      <div class="header">
        <div style="width: 25%; text-align: left;">我邀请的好友</div>
        <div class="register-time">注册时间</div>
        <div style="width: 20%; text-align: right;">我的佣金</div>
      </div>
    </div>

    <Scroll ref="scroll" class="list" :options="scrollOptions" :data="list" v-if="list.length" @pulling-up="onPullingUp">
      <div class="item" v-for="item in list">
        <div class="name" style="width: 25%; text-align: center; text-overflow:ellipsis; overflow: hidden; white-space: nowrap;">{{item.nickname}}</div>
        <div class="register-time" >{{item.dateStr}}</div>
        <div class="amount" style="width: 20%; text-align: center;">{{item.amountStr}}</div>
      </div>
    </Scroll>

    <div class="empty" v-else>
      快去邀请好友吧！
    </div>

    <div>
    </div>
  </div>
</template>

<script>
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('gain');

export default {
  inject: ['getBody'],
  data() {
    return {
      scrollOptions: {
        pullUpLoad: true
      },
      fixed: false
    };
  },
  mounted() {
    this.fetchList();

    this.getBody(($body) => {
      this.$body = $body;
      $body.addEventListener('scroll', this.scroll);
    });
  },
  methods: {
    ...mapActions(['fetchList']),

    async onPullingUp() {
      const result = await this.fetchList();

      if (!result) {
        this.$refs.scroll.$forceUpdate();
      }
    },
    scroll() {
      if (this.$body.scrollTop >= this.$refs.header.offsetTop) {
        this.fixed = true;
      } else {
        this.fixed = false;
      }
    }
  },
  computed: {
    ...mapState(['list']),
    getClass() {
      return ['header-wrapper', {
        fixed: this.fixed
      }];
    }
  },
  components: {
    Scroll
  }
};
</script>

<style lang="scss" scoped>
  .list-comp {
    padding: 40px 30px 30px;
    margin-bottom: 98px;

    .title {
      font-size: 34px;
      color: #222;
      text-align: center;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .header-wrapper {
      position: relative;
      height: 100px;
    }

    .header {
      display: flex;
      font-size: 28px;
      color: #b0b0b0;
      justify-content: space-between;
      height: 100px;
      line-height: 100px;

      .fixed {
        position: absolute;
      }
    }

    .header:before {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #b0b0b0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .register-time {
      position: absolute;
      width: 100%;
      text-align: center;
    }

    .list {
      max-height: 1010px;
    }

    .item {
      height: 100px;
      font-size: 28px;
      color: #444;
      display: flex;
      border-bottom: 0.5PX solid #e0e0e0;
      line-height: 100px;
      position: relative;
      justify-content: space-between;
    }

    .empty {
      width: 100%;
      height: 350px;
      font-size: 28px;
      color: #b0b0b0;
      line-height: 350px;
      text-align: center;
    }


  }
</style>