<template>
  <section class="invite-details-wrap">
    <normal-header
      :title="title"
      :barHeight="barHeight"
      :barColor="barColor"
      :backType="1">
    </normal-header>
    <div class="main-container" :style="{ marginTop: `${44+barHeight}Px`}">
      <div class="invite-explain">
        <p class="title">邀请形式</p>
        <div class="picture-explain">
          <div class="left">
            <div class="step-num">1</div>
            <div class="dotted-line"  />
            <div class="step-num">2</div>
            <div class="dotted-line height50"  />
            <div class="step-num">3</div>
          </div>
          <div class="right">
            <div class="bubble_diailog">
              <i class="l"></i>
              <b class="l"></b>
              邀请医生好友
            </div>
            <div class="bubble_diailog marginTop16">
              <i class="l"></i>
              <b class="l"></b>
              <p class="text">输入手机号领取课程</p>
              <p class="awards">+20勤奋分 +20云鹊豆</p>
            </div>
            <div class="bubble_diailog marginTop20">
              <i class="l"></i>
              <b class="l"></b>
              <p class="text">使用手机号登录云鹊APP</p>
              <p class="awards">+80勤奋分 +80云鹊豆</p>
            </div>
          </div>
        </div>
      </div>
      <div class="gray-line"></div>
      <div class="record-details">
        <div class="tab-nav">
          <div class="item left-item" :class="{activeItem:recordType==1}" @click="changeRecordType">
            领取记录
            <p class="active-line" v-if="recordType==1"></p>
          </div>
          <div class="item right-item" :class="{activeItem:recordType==2}" @click="changeRecordType">
            登录记录
            <p class="active-line" v-if="recordType==2"></p>
          </div>
        </div>
        <div class="record-list">
          <p class="sum" v-if="recordTotal">共{{recordTotal}}人</p>
          <div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
               infinite-scroll-distance="10">
            <div class="record-item" v-if="inviteList.length" v-for="item in inviteList">
              <img :src="item.avatarImageUrl" alt="" class="person-photo">
              <div class="person-info">
                <p class="phone">{{item.mobile}}</p>
                <p class="time">{{item.inviteDate}}</p>
              </div>
              <div class="awards">
                <p class="item" v-for="item1 in dealJsonData(item.rewardJsonInfo)">
                  <span class="num">+{{item1.rewardQuantity}}</span>
                  <span class="award-name">{{changeAwardsName(item1.rewardType)}}</span>
                </p>
              </div>
            </div>
            <div class="no-more" v-if="noMore&&inviteList.length">
              <span class="line"></span>
              <span class="text">到底啦</span>
              <span class="line"></span>
            </div>
          </div>

        </div>
        <div class="no-data" v-if="!inviteList.length">
          <img src="~/assets/img/icon-nodata.png" alt="">
          <p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦！</p>
          <p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
        </div>
        <div class="footer-btn">
          <div class="btn">去邀请</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

  import NormalHeader from '@/components/normal-header'
  import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking'
  export default {
    name: "index",
    components: {
      NormalHeader
    },
    data() {
      return {
        showPop: false,
        title: '邀请明细',
        barHeight: 0,
        barColor: '#fff',
        inviteList: [],
        recordTotal: 0,
        recordType: 1,
        busy: true, //分页参数--start
        pageNo: 0,
        pageSize: 10,
        noMore: false,//分页参数--end
      };
    },
    mounted() {
      this.pageNo++
      this.getOneInviteDetails();

      window.addEventListener('scroll', function (e) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        //获取recordDetails到顶部距离
        const recordDetails = document.getElementsByClassName('record-details')[0];
        let recordDetailsHeight = recordDetails.getBoundingClientRect().top;
        //获取headDiv部分高度
        const headDiv = document.getElementsByClassName('header-container')[0];
        let headDivHeight = headDiv.offsetHeight;
        //获取窗口高度
        const lastHeight = window.innerHeight;
        console.log('recordDetailsHeight',recordDetailsHeight);
        console.log('headDivHeight',headDivHeight);
       const tabNab=document.getElementsByClassName('tab-nav')[0];
        if(recordDetailsHeight<=headDivHeight) {
          tabNab.setAttribute('style',`position:fixed;top: ${44}px;`);
        } else {
         console.log('sdd')
          tabNab.removeAttribute('style');
        }

      });
    },
    methods: {
      getOneInviteDetails() { //领取记录数据
        getOneInviteDetails({
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }).then(res => {
          if(res.code == '000000') {
            this.recordTotal = res.data.total;
            if(res.data.list.length>0) {
              if(this.pageNo ==1) {
                this.inviteList = res.data.list
              } else {
                this.inviteList = this.inviteList.concat(res.data.list);
              }
              this.busy = false;
              this.noMore = false;
            }else {
              if(this.pageNo ==1) {
                this.noMore = false;
              } else {
                this.noMore = true;
              }

            }
          }
        })
      },
      getTwoInviteDetails() { //登记记录数据
        getTwoInviteDetails({
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }).then(res => {
          if(res.code == '000000') {
            this.recordTotal = res.data.total
            if(res.data.list.length>0) {
              if(this.pageNo ==1) {
                this.inviteList = res.data.list
              } else {
                this.inviteList = this.inviteList.concat(res.data.list);
              }
              this.busy = false;
              this.noMore = false;
            }else {
              if(this.pageNo ==1) {
                this.noMore = false;
              } else {
                this.noMore = true;
              }

            }
          }
        })
      },
      dealJsonData(data) {
        if(data) {
          return JSON.parse(data)
        }
      },
      changeAwardsName(type) {
        if(type == 1) {
          return '云鹊豆'
        } else if(type == 2) {
          return '现金'
        } else if(type == 3) {
          return '勤奋分'
        } else if(type == 4) {
          return '短信额度'
        }
      },
      changeRecordType() {
        this.recordType = this.recordType==1?2:1;
        this.pageNo = 1;
        this.inviteList = [];
        this.noMore = false;
        this.getData()

      },
      getData() {
        if(this.recordType == 1) {
          this.getOneInviteDetails();
        } else if(this.recordType == 2) {
          this.getTwoInviteDetails();
        }
      },
      loadMore() {
        this.busy = true;
        this.pageNo++
        //this.changeRecordType();
        this.getData()
      },
    },
  }
</script>

<style scoped lang="less">
  @import 'index.less';
</style>