<template>
  <section class="person-detail-wrap">
    <normal-header
      :title="title"
      :backType="1">
    </normal-header>
    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
      <div class="info">
        <img :src="avatarImageUrl" alt="">
        <div class="content">
          <p class="item">
            <span class="label">累计排名</span>
            <span class="value">{{userRank?userRank.rank:'-'}}</span>
          </p>
          <p class="line"></p>
          <p class="item">
            <span class="label">累计勤奋分 </span>
            <span class="value">{{userRank?userRank.score:'0'}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="main-content">
      <!--<div class="get-container">
        <div class="top">
          <div class="title">累计获得奖励</div>
          <div class="how-to-get">如何领取<img src="~/assets/img/person-detail/icon-right.png" alt=""></div>
        </div>
        <div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
      </div>-->
      <div class="detail-list" v-if="personDetails.length" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <div class="item" v-for="item in personDetails">
          <div class="left">
            <img :src="detailTaskIcon(item.resourceType)" alt="">
          </div>
          <div class="right">
            <div class="r-left">
              <p class="detail-name">{{item.taskName}}</p>
              <p class="time">{{item.finishTime}}</p>
            </div>
            <div class="r-right">
              <div class="award-item" v-for="item1 in item.timsRewardResp">
                <span class="num">+{{item1.rewardQuantity}}</span>
                <span class="award-name">{{detailAwardsName(item1.rewardType)}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="no-more" v-if="noMore">
          <span class="line"></span>
          <span class="text">到底啦</span>
          <span class="line"></span>
        </div>
      </div>
      <div class="no-data" v-if="!personDetails.length">
        <img src="~/assets/img/icon-nodata.png" alt="">
        <p>暂无记录,您还没有参加活动</p>
        <div class="button" @click="goInActivity">立即参加</div>
      </div>
    </div>
  </section>
</template>

<script>;
  import NormalHeader from '@/components/normal-header';
  import { getPersonDetails } from '@/service/detailsAndRanking'
  export default {
    name: 'person-detail',
    components: {
      NormalHeader
    },
    data() {
      return {
        showPop: false,
        title: '个人明细',
        personDetails: [],
        busy: true, //分页参数--start
        pageNo: 0,
        noMore: false,//分页参数--end
        userRank: null,
        avatarImageUrl: ''
      };
    },
    computed: {

    },
    mounted() {
      this.pageNo++;
      this.getPersonDetails();
    },
    methods: {
      goInActivity() {
        this.$router.push('/activityPage')
      },
      detailTaskIcon(taskType) {
        if(taskType == 4) { //smo
          return require('../../assets/img/task-icon/smo-icon.png')
        } else if(taskType == 1) { //课程
          return require('../../assets/img/task-icon/lesson-icon.png')
        } else if(taskType == 6) { //打卡
          return require('../../assets/img/task-icon/daily-clock-icon.png')
        } else if(taskType == 7) { //邀请
          return require('../../assets/img/task-icon/invite-icon.png')
        } else if(taskType == 0) { //机构
          return require('../../assets/img/task-icon/ranking-icon.png')
        }
      },
      detailAwardsName(type) {
        //type 1.云鹊豆 2.现金 3.勤奋分 4.短信额度
        if(type == 1) {
          return '云鹊豆'
        } else if(type == 2) {
          return '现金'
        } else if(type == 3) {
          return '勤奋分'
        } else if(type == 4) {
          return '短信额度'
        }
      },
      getPersonDetails() {
        getPersonDetails({
          pageNo: this.pageNo,
          activityId: this.$route.query.activityId
        }).then(res => {
          console.log(res)
          if(res.code == '000000') {
            this.userRank = res.data.userRank;
            this.avatarImageUrl = res.data.avatarImageUrl;
            if(res.data.personalDetails) {
              if(this.pageNo ==1) {
                this.personDetails = res.data.personalDetails
                if(res.data.hasNextPage) {
                  this.noMore = true;

                } else {
                  this.busy = false;
                }
              } else {
                if(res.data.hasNextPage) {
                  this.personDetails = this.personDetails.concat(res.data.personalDetails);
                  this.busy = false;
                } else {
                  this.noMore = true
                }

              }
            } else {
              this.personDetails = []
            }

          }
        })
      },
      loadMore() {
        this.busy = true;
        this.pageNo++
        //this.changeRecordType();
        this.getPersonDetails()
      }
    },
  };
</script>

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