<template>
  <section class="person-detail-wrap">
    <normal-header
      :title="title"
      :barHeight="barHeight"
      :barColor="barColor"
      :backType="1">
    </normal-header>
    <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
      <div class="info">
        <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
        <div class="content">
          <p class="item">
            <span class="label">累计排名</span>
            <span class="value">105</span>
          </p>
          <p class="line"></p>
          <p class="item">
            <span class="label">累计勤奋分 </span>
            <span class="value">105</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" >
        <div class="item" v-for="item in personDetails">
          <div class="left">
            <img :src="detailTaskIcon(item.taskName)" 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>
     <!-- <div class="no-more">
        <span class="line"></span>
        <span class="text">到底啦</span>
        <span class="line"></span>
      </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: '个人明细',
        barHeight: 0,
        barColor: '#fff',
        personDetails: [],
      };
    },
    computed: {

    },
    mounted() {
      this.getPersonDetails();
    },
    methods: {
      detailTaskIcon(taskName) {
        if(taskName == '打卡') {
          return require('../../assets/img/person-detail/icon-invite.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().then(res => {
          console.log(res)
          if(res.code == '000000') {
            this.personDetails = res.data.personalDetails
          }
        })
      },
      loadMore() {

      }
    },
  };
</script>

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