<template>
  <section class="hospital-grade-wrap rank-wrap">
    <h5header
      v-if="!isWeb"
      :title="title.hospitalType"
      isGoHistory="1"
      :isOpacity="false"
      :shareObj="shareObj"/>
    <div class="rank-list" :class="{'padBott60': isWeb}" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
      <div class="rank-item" v-for="(item, index) in rankList" :key="index">
        <img v-if="index<=2" src="~/assets/img/stage3/rank-icon1.png" alt="" class="rank-icon">
        <p v-else class="rank-num">{{index+1}}</p>
        <div class="info">
          <div class="details">
            <p class="name">{{item.hospitalName}}</p>
            <p class="awards">奖励: {{item.bonus}}云鹊豆</p>
          </div>
        </div>
        <div class="score">
          <p class="num">{{item.hospitalDiligence }}</p>
          <p class="name">勤奋分</p>
        </div>
      </div>
      <div class="no-more" :style="{marginBottom: `${50+homeIndicatorHeight}` + 'Px'}">
        <span class="line"></span>
        <span class="text">到底啦</span>
        <span class="line"></span>
      </div>
    </div>
    <div class="footer" v-if="!isWeb" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
      <div class="content">
        <div class="left">
          <p class="score">我的机构勤奋分<span>{{personalData.hospitalDiligence}}</span></p>
          <p class="rank">恭喜您的机构上榜排名<span>{{personalData.hospitalRank}}</span></p>
        </div>
        <div class="right" @click="share">分享排名</div>
      </div>
    </div>
    <no-ssr v-if="isWeb">
      <pica-call-app
        :text="'高效学习 轻松行医'"
        path="https://test1-m-ws.yunqueyi.com/search"
      />
    </no-ssr>
  </section>
</template>

<script>
  import { getHospitalRank, getPersonScore, } from '@/service/stage3Api';
  import { wxShare } from '@/configs/wxShare';
  import h5header from '@/components/h5header';
  export default {
    name: "hospital-grades",
    components: {
      h5header
    },
    data() {
      return {
        isWeb: false,
        personalData: {},
        shareObj: wxShare,
        title: {
          0: '星火榜榜单',
          1: '萌芽榜榜单',
          2: '奋进榜榜单',
          3: '超越榜榜单'
        }
      }
    },
    async asyncData( { query } ) {
      const { data } = await getHospitalRank({ type: query.hospitalType });
      return {
        hospitalType: query.hospitalType,
        rankList: data
      }
    },
    created() {
    },
    mounted() {
      this.$rocNative.appInit();
      this.isWeb = this.$rocNative.isWeb;
      this.shareObj.shareUrl = location.href; //微信分享链接
      if(!this.isWeb) {
        this.getPersonScore();
      };
    },
    methods: {
      getPersonScore() {
        getPersonScore().then(res => {
          this.personalData = res.data
        })
      },
      share() {
        this.$rocNative.shareWechat(this.shareObj);
      }
    }
  }
</script>
<style>
  @import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
  @import "../../assets/style/awards-list/rank.less";

</style>