<template>
  <section class="yesterday-prize-wrap">
    <normal-header
      :title="title"
      :rightText="rightText"
      :backType="1">
    </normal-header>
    <div class="prize-list" :style="{ marginTop: `${44+statusBarHeight}Px`,marginBottom: `${50+homeIndicatorHeight}Px`}">
      <div class="item" v-for="(item, index) in rewardsList">
        <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
        <p v-else class="icon-num" >{{index+1}}</p>
        <div class="item-right">
          <img :src="item.avatarImageUrl" alt="" class="doctor-photo">
          <div class="doctor-info">
            <p class="name">{{item.name}}</p>
            <p class="grade">昨日勤奋分:<span>{{item.score}}</span></p>
          </div>
          <p class="awards">{{index==0?'小米电视机1台':'温度计'}}</p>
        </div>
      </div>
    </div>
    <footer-button
      :btnText="btnText"
      :btnType="btnType">
    </footer-button>
  </section>
</template>

<script>
  import NormalHeader from '@/components/normal-header';
  import FooterButton from '@/components/footer-button';

  import { getYesterdayRanking } from '@/service/detailsAndRanking'
  export default {
    name: "index",
    components: {
      NormalHeader,
      FooterButton
    },
    data() {
      return {
        showPop: false,
        title: '昨日获奖名单',
        rightText: '如何领奖',
        rewardsList: [],
        btnText: '今日我要拿奖',
        btnType: true
      };
    },
    mounted() {
      this.getRewardList();
    },
    methods: {
      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')
        }
      },
      getRewardList() {
        getYesterdayRanking().then(res => {
          if(res.code == '000000') {
            this.rewardsList = res.data.topRankList;
          }
        })
      }
    },
  }
</script>

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