<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+barHeight}Px`}">
      <div class="info">
        <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
        <div class="right">
          <div class="content">
            <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>
          <p class="text" v-if="activeBtnType">再获得{{rankData.targetRequiredScore}}分即可上升到前{{rankData.targetRank}}名并可获得iPhone手机</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">
        <div class="item" v-for="(item,index) in rankData.topRankList">
          <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>
      <div class="footer-btn">
        <div class="btn">获得更多勤奋分</div>
      </div>
    </div>
  </section>
</template>

<script>
  import RankingHeader from '@/components/ranking-header'
  export default {
    name: 'person-ranking',
    components: {
      RankingHeader
    },
    data() {
      return {
        showPop: false,
        title: '个人明细',
        barHeight: 0,
        barColor: '#fff',
        rankData: {},
        rightBtn: '昨日获奖',
        headBtn: {
          leftName: '今日排行榜',
          rightName: '累计排行榜'
        },
        activeBtnType: true, //true今日，false累计
      };
    },
    computed: {

    },
    mounted() {
      this.getRankingList()
    },
    methods: {
      changeRanking() {
        this.activeBtnType = !this.activeBtnType
      },
      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')
        }
      },
      getRankingList() {
        this.rankData = {
          name: '戴医生',
          hospital: '测试医院',
          avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
          rank: 33,
          score: 1212,
          targetRank: 3,
          targetRequiredScore: 10,
          topRankList: [
            {
              name: '张医生',
              avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
              rank: 0,
              score: 10000
            },
            {
              name: '李医生',
              avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
              rank: 1,
              score: 9343
            },
            {
              name: '王医生',
              avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
              rank: 2,
              score: 8888
            },
            {
              name: '刘医生',
              avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
              rank: 3,
              score: 8200
            }
          ],
        }
      }
    },
  };
</script>

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