<template>
  <section class="hospital-grade-wrap rank-wrap">
    <h5header
      v-if="!isWeb"
      :title="`${title[this.hospitalType]}榜榜单`"
      :stage3BackBuried="backBuried[this.hospitalType]"
      :stage3ShareBuried="shareBuried[this.hospitalType]"
      isGoHistory="1"
      :isOpacity="false"
      :shareObj="shareObj"/>
    <div
      class="rank-list"
      :class="{'padBott60': isWeb}"
      :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`,marginBottom: isWeb?0:`${50+homeIndicatorHeight}` + 'Px'}">
        <div class="rank-item" v-for="(item, index) in rankList" :key="index">
          <img v-if="index<=2" :src="rankIcon[index]" 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" v-if="rankList.length>=10" >
          <span class="line"></span>
          <span class="text">到底啦</span>
          <span class="line"></span>
        </div>
    </div>
    <div class="footer" v-if="!isWeb&&isLogin" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
      <div class="content">
        <div class="left">
          <p class="score">我的机构勤奋分<span>{{personalData.hospitalDiligence}}</span></p>
          <!--刘蓓测试需要改成8条，没那么多数据，测完需要改成100-->
          <p class="rank" v-if="personalData.hospitalRank<=8&&personalData.hospitalRank">恭喜您的机构上榜排名<span>第{{personalData.hospitalRank}}</span></p>
          <p class="rank" v-else>很遗憾，您的机构未上榜</p>
        </div>
        <div class="right" @click="share">分享排名</div>
      </div>
    </div>
    <no-ssr v-if="isWeb">
      <pica-call-app
        :text="'高效学习 轻松行医'"
        :path="appCallUrl"
      />
    </no-ssr>
    <finish-toast v-if="isGameOver"></finish-toast>
  </section>
</template>

<script>
  import { getHospitalRank, getPersonScore, isGameOver } from '@/service/stage3Api';
  import h5header from '@/components/h5header';
  import finishToast from '@/components/finish-toast';
  import { setCookie, getCookie, delCookie } from '@/utils/cookieFun';
  export default {
    name: "hospital-grades",
    components: {
      h5header,
      finishToast
    },
    data() {
      return {
        isWeb: false,
        personalData: {},
        shareObj: {},
        title: {
          '0': '星火',
          '1': '萌芽',
          '2': '奋进',
          '3': '超越'
        },
        hospitalTypeName: {
          '0': '微型',
          '1': '小型',
          '2': '中型',
          '3': '大型'
        },
        shareBuried: {
          '0': '489#403001',
          '1': '490#404001',
          '2': '491#405001',
          '3': '492#406001'
        },
        backBuried: {
          '0': '489#403002',
          '1': '490#404002',
          '2': '491#405002',
          '3': '492#406002'
        },
        rankIcon: {
          0: require('../../assets/img/stage3/rank-icon1.png'),
          1: require('../../assets/img/stage3/rank-icon2.png'),
          2: require('../../assets/img/stage3/rank-icon3.png'),
        },
        appCallUrl: '',
        isLogin: true
      }
    },
    async asyncData( { query } ) {
      const res = await isGameOver();
      const { data } = await getHospitalRank({ type: query.hospitalType });
      return {
        isGameOver: res.data,
        hospitalType: query.hospitalType,
        rankList: data
      }
    },
    head () {
      return {
        title: `${this.title[this.hospitalType]}榜榜单`,
      }
    },
    created() {
    },
    mounted() {
      this.$rocNative.appInit();
      this.isWeb = this.$rocNative.isWeb;
      this.shareObj = {
        title1: `云鹊${this.title[this.hospitalType]}奖榜单公布`,
        title2:  `全国最杰出的${this.hospitalTypeName[this.hospitalType]}机构在这里`,
        shareImageUrl: 'https://file.yunqueyi.com/h5/images/hd/icon-share.png',
        shareUrl: location.href, //微信分享链接
      };
      this.appCallUrl = location.href; //唤起app页面
      //微信分享初始化--start
      this.$picaWxShare({
        type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
        authUrl: window.location.href,
      },(wx)=>{
        const title = this.shareObj.title1;
        const desc = this.shareObj.title2;
        const link = window.location.href;
        const imgUrl = this.shareObj.shareImageUrl;
        // 分享给朋友
        wx.onMenuShareAppMessage({
          title,desc,link,imgUrl
        });
        // 分享到朋友圈
        wx.onMenuShareTimeline({
          title,desc,link,imgUrl
        });
      });
      //微信分享初始化--end
      if(!this.isWeb) {
        this.getUserInfo();
      };
      window.__refresh = function(params) {
        _this.getUserInfo();   // 判断是否登录
      }
    },
    methods: {
      getUserInfo() { // 判断是否登录
        this.$rocNative.getUserInfo().then(res => {
          if(res.userMobile){
            setCookie('token', res.userToken);
            this.getPersonScore();
            this.isLogin = true;
          } else {
            this.isLogin = false;
          }
        })
      },
      getPersonScore() {
        getPersonScore().then(res => {
          this.personalData = res.data
        })
      },
      share() {
        this.$rocNative.shareWechat(this.shareObj);
        if(this.hospitalType == '0') {
          this.$sendBuriedData({
            component_tag: `489#403003`
          });
        } else if(this.hospitalType == '1') {
          this.$sendBuriedData({
            component_tag: `490#404003`
          });
        } else if(this.hospitalType == '2') {
          this.$sendBuriedData({
            component_tag: `491#405003`
          });
        } else if(this.hospitalType == '3') {
          this.$sendBuriedData({
            component_tag: `492#406003`
          });
        }
      }
    }
  }
</script>
<style>
  @import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
  @import "../../assets/style/awards-list/rank.less";

</style>