<template>
  <section class="hospital-ranking-wrap">
    <ranking-header
      :headBtn="headBtn"
      :activeBtnType="activeBtnType"
      @handleBtn="changeRanking">
    </ranking-header>
    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
      <div class="info info-hospital" v-if="activeBtnType">
        <img src="~/assets/img/hospital-ranking/icon-hospital.png" alt="">
        <div class="content" v-if="hospitalRanking.score">
          <div class="con main-name textOverflow">{{hospitalRanking.name}}</div>
          <div class="con details">
            <p class="item">
              <span class="label">累计排名</span>
              <span class="value">{{hospitalRanking.rank}}</span>
            </p>
            <p class="line"></p>
            <p class="item">
              <span class="label">累计勤奋分 </span>
              <span class="value">{{hospitalRanking.score}}</span>
            </p>
          </div>
        </div>
        <div class="not-join" v-else>
          <div class="con main-name textOverflow">{{hospitalRanking.name}}</div>
          <div class="con details">您的机构还未参与活动</div>
        </div>
      </div>
      <div class="info info-doctor" v-else>
        <img :src="contributionRanking.avatarImageUrl" alt="">
        <div class="content" v-if="contributionRanking.userTotalScore">
          <div class="con details details-d">
            <p class="item">
              <span class="label">我的贡献排名</span>
              <span class="value">{{contributionRanking.score?contributionRanking.rank:'-'}}</span>
            </p>
            <p class="line"></p>
            <p class="item">
              <span class="label">我贡献的勤奋分</span>
              <span class="value">{{contributionRanking.score}}</span>
            </p>
          </div>
          <div class="con main1-name">{{contributionRanking.hospital}}</div>
        </div>
        <div class="not-join" v-else>
          <div class="con main-name">您还未参加活动</div>
          <div class="con details">赶快参加为您的机构争取荣誉吧</div>
        </div>
      </div>
    </div>
    <div class="main-content" v-if="!noContributionRanking">
      <div class="description description-h" v-if="activeBtnType"><span>{{dealRankName(hospitalRanking.hospitalType)}}</span>排行实时刷新，部分原因存在几分钟延迟</div>
      <div class="description description-d" v-else>排行实时刷新，部分原因存在几分钟延迟</div>
      <div class="ranking-title">
        <span class="rank-name">{{activeBtnType?'TOP100':'排行'}}</span>
        <!--<span class="marginL">机构名称</span>
        <span class="marginAuto">机构勤奋分</span>-->
        <span class="marginL">{{activeBtnType?'机构名称':'机构成员'}}</span>
        <span class="marginAuto">{{activeBtnType?'机构勤奋分':'贡献勤奋分'}}</span>
      </div>
      <div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}` + 'Px'}">
        <div class="item" v-if="activeBtnType" v-for="(itemH,indexH) in topRankListH" :key="indexH">
          <img v-if="indexH<=2" :src="dealRankIcon(indexH)" alt="" class="ranking-icon">
          <p v-else class="icon-num" >{{indexH+1}}</p>
          <p class="hospital-name">{{itemH.name}}</p>
          <p class="num">{{itemH.score}}</p>
        </div>
        <div class="item" v-if="!activeBtnType"  v-for="(itemD,indexD) in topRankListC" :key="indexD">
          <img v-if="indexD<=2" :src="dealRankIcon(indexD)" alt="" class="ranking-icon">
          <p v-else class="icon-num" >{{indexD+1}}</p>
          <img :src="itemD.avatarImageUrl" alt="" class="doctor-photo">
          <p class="doctor-name">{{itemD.name}}</p>
          <p class="num">{{itemD.score}}</p>
        </div>
        <div class="no-more" v-if="activeBtnType&&topRankListH.length>=10">
          <span class="line"></span>
          <span class="text">到底啦</span>
          <span class="line"></span>
        </div>
        <div class="no-more" v-if="!activeBtnType&&topRankListC.length>=10">
          <span class="line"></span>
          <span class="text">到底啦</span>
          <span class="line"></span>
        </div>
      </div>
    </div>
    <div class="main-content" v-if="noContributionRanking">
      <div class="no-data">
        <img src="~/assets/img/icon-nodata.png" alt="">
        <p>您的机构还没有人参加活动</p>
        <div class="button" @click="goInActivity">立即参加</div>
      </div>
    </div>
    <footer-button
      v-if="!noContributionRanking"
      :btnText="btnText"
      :btnType="btnType">
    </footer-button>
  </section>
</template>

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

  import { getContributionRanking, getHospitalRanking} from '@/service/detailsAndRanking'
  export default {
    name: 'hospital-ranking',
    components: {
      RankingHeader,
      FooterButton
    },
    data() {
      return {
        showPop: false,
        title: '个人明细',
        headBtn: {
          leftName: '机构排行榜',
          rightName: '人员贡献榜'
        },
        activeBtnType: true, //true机构，false人员
        hospitalRanking: {},
        topRankListH: [],//机构排行
        contributionRanking: {},
        topRankListC: [], //贡献排行
        btnText: '助力机构 创造佳绩',
        btnType: true,
        noContributionRanking: false //是否有人员贡献榜单数据
      };
    },
    computed: {

    },
    mounted() {
      this.getRankData();
    },
    methods: {
      goInActivity() {
        this.$router.push('/activityPage')
      },
      changeRanking(val) {
        this.activeBtnType = val;
        this.getRankData()
      },
      dealRankName(hospitalType) {
        if(hospitalType == 0) {
          return '星火榜';
        } else if(hospitalType == 1) {
          return '萌芽榜';
        } else if(hospitalType == 2) {
          return '奋进榜';
        } else if(hospitalType == 3) {
          return '超越榜';
        }
      },
      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')
        }
      },
      getHospitalRanking() {
        this.noContributionRanking = false;
        getHospitalRanking().then(res => {
          if(res.code == '000000') {
            this.hospitalRanking = res.data;
            this.topRankListH = res.data.topRankList
          }
        })
      },
      getContributionRanking() {
        getContributionRanking().then(res => {
          if(res.code == '000000') {
            this.contributionRanking = res.data;
            this.topRankListC = res.data.topRankList
            if(this.contributionRanking.topRankList.length) {
              this.noContributionRanking = false;
            } else {
              this.noContributionRanking = true;
            }
          }
        })

      },
      getRankData() {
        if(this.activeBtnType) {
          this.getHospitalRanking();
        } else {
          this.getContributionRanking()
        }
      }
    },
  };
</script>

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