<template>
  <section class="person-ranking-wrap">
    <ranking-header
      :rightBtn="rightBtn"
      :headBtn="headBtn"
      :activeBtnType="activeBtnType"
      @handleBtn="changeRanking"
      @handleRightBtn="handleRightBtn">
    </ranking-header>
    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
      <div class="info">
        <img :src="rankData.avatarImageUrl" alt="">
        <div class="right">
          <div class="content" v-if="rankData.score">
            <p class="item">
              <span class="label">{{activeBtnType?'今日':'累计'}}排名</span>
              <span class="value">{{rankData.rank}}</span>
            </p>
            <p class="line"></p>
            <p class="item">
              <span class="label">{{activeBtnType?'今日':'累计'}}勤奋分 </span>
              <span class="value">{{rankData.score}}</span>
            </p>
          </div>
          <div class="not-join" v-else>
            <div class="con main-name">{{activeBtnType?'今日您还未参加活动':'您还未参加活动'}}</div>
            <div class="con details">赶快参与活动赢每日奖品</div>
          </div>
          <p class="text" v-if="activeBtnType&&rankData.score">{{rankAwards}}</p>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="description">排行实时刷新，部分原因存在几分钟延迟</div>
      <div class="ranking-title">
        <span>TOP100</span>
        <span class="marginL">用户名称</span>
        <span class="marginAuto">{{activeBtnType?'今日':'累计'}}勤奋分</span>
      </div>
      <div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}Px`}">
        <div class="item" v-for="(item,index) in topRankList" :key="index">
          <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
          <p v-else class="icon-num" >{{index+1}}</p>
          <img :src="item.avatarImageUrl" alt="" class="doctor-photo">
          <p class="doctor-name">{{item.name}}</p>
          <p class="num">{{item.score}}</p>
        </div>
        <div class="no-more" v-if="topRankList.length>=10">
          <span class="line"></span>
          <span class="text">到底啦</span>
          <span class="line"></span>
        </div>
      </div>
      <footer-button
        :btnText="btnText"
        :btnType="btnType">
      </footer-button>
    </div>
  </section>
</template>

<script>
  import RankingHeader from '@/components/ranking-header';
  import FooterButton from '@/components/footer-button';

  import { getTodayUserRanking, getAllUserRanking} from '@/service/detailsAndRanking'
  import { getFirstAwards } from '@/utils'
  export default {
    name: 'person-ranking',
    components: {
      RankingHeader,
      FooterButton
    },
    data() {
      return {
        showPop: false,
        title: '个人明细',
        rankData: {},
        topRankList: [], //排行榜list
        rightBtn: '',
        headBtn: {
          leftName: '今日排行榜',
          rightName: '累计排行榜'
        },
        activeBtnType: true, //true今日，false累计
        btnText: '获得更多勤奋分',
        btnType: true,
        rankAwards: '',
        todayDate: ''
      };
    },
    computed: {

    },
    mounted() {
      this.getData();
    },
    watch: {
      todayDate(val) {
        if(Date.parse(new Date(val.replace(/-/g, "/")))<=Date.parse(new Date(('2019-12-16 23:59:59').replace(/-/g, "/")))) {
          this.rightBtn = ''
        } else {
          this.rightBtn = '昨日获奖'
        }
      }
    },
    methods: {
      changeRanking(val) {
        this.activeBtnType = val;
        this.getData();
      },
      handleRightBtn() {
        this.$router.push({
          path: '/yesterday-prize'
        })
      },
      dealRankIcon(index) {
        if(index == 0) {
          return require('../../assets/img/icon-gold.png')
        } else if(index == 1) {
          return require('../../assets/img/icon-silver.png')
        } else if(index == 2) {
          return require('../../assets/img/icon-copper.png')
        }
      },
      getData() {
        if(this.activeBtnType) {
          this.getTodayRankingList();
        } else {
          this.getUserRankingList();
        }
      },
      getRankAwards(rankData,firstTime) {
        if(rankData.targetRank == 0) {
          this.rankAwards = `今日保持第1名，即可获得${getFirstAwards(firstTime)}`;
        } else if(rankData.targetRank == 1) {
          this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第1名并可获得${getFirstAwards(firstTime)}`;
        } else if(rankData.targetRank == 3) {
          this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第3名并可获得欧姆龙血压计`;
        } else if(rankData.targetRank == 10) {
          this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第10名并可获得欧姆龙体温计`;
        }
      },
      getTodayRankingList() {
        getTodayUserRanking().then(res => {
          if(res.code == '000000') {
            this.rankData = res.data;
            this.topRankList = res.data.topRankList
            this.getRankAwards(this.rankData,res.data.todayDate);
            this.todayDate = res.data.todayDate;
            if(this.rankData.score) {
              this.btnText = '获得更多勤奋分'
            } else {
              this.btnText = '参与活动得勤奋分'
            }
          }
        })
      },
      getUserRankingList() {
        getAllUserRanking().then(res => {
          if(res.code == '000000') {
            this.rankData = res.data;
            this.topRankList = res.data.topRankList
            if(this.rankData.score) {
              this.btnText = '获得更多勤奋分'
            } else {
              this.btnText = '参与活动得勤奋分'
            }
          }
        })

      }
    },
  };
</script>

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