<template>
  <section class="awards-list-wrap">
    <h5header
      v-if="!isWeb"
      title="云鹊奖2019"
      :isOpacity="false"
      :shareObj="shareObj"/>
    <div class="top-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
      <img src="~/assets/img/stage3/rule-btn.png" alt="">
    </div>
    <!--已登录及个人未参加-->
    <div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb">
      <div class="info">
        <img :src="mainInfo.avatarImageUrl" alt="">
        <div class="right">
          <div class="name">{{mainInfo.name}}</div>
          <div class="hospital">{{mainInfo.hospitalName}}</div>
        </div>
      </div>
      <div class="self-grade">
        <div class="left">
          <p class="title">个人勤奋榜</p>
          <p class="rank" v-if="mainInfo.diligence">第{{mainInfo.personRank}}名</p>
          <p class="rank" v-else >未参与活动</p>
          <p class="score">个人勤奋分 {{mainInfo.diligence?mainInfo.diligence:'-'}}</p>
        </div>
        <div class="right">
          <p class="title">机构{{dealHospitalRankName(mainInfo.hospitalType)}}榜</p>
          <p class="rank">第{{mainInfo.hospitalRank}}名</p>
          <p class="score">机构勤奋分 {{mainInfo.hospitalDiligence}}</p>
        </div>
      </div>
      <div class="my-grade" @click="goMyGrade">我的成绩</div>
      <div class="bottom">
        <p class="text">参与人数 {{joinDeatils.count}}</p>
        <p class="line"></p>
        <p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
      </div>
    </div>
    <!--未登录-->
    <div class="person-details not-login" v-if="!isLogin">
      <div class="description">登录查看个人和机构排名</div>
      <div class="my-grade">立即登录</div>
      <div class="bottom">
        <p class="text">参与人数 {{joinDeatils.count}}</p>
        <p class="line"></p>
        <p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
      </div>
    </div>
    <!--个人机构均未参加-->
    <div class="person-details not-join" v-if="isLogin&&mainInfoType==2&&!isWeb">
      <div class="description">您和您的机构未参加本次活动</div>
      <div class="bottom">
        <p class="text">参与人数 {{joinDeatils.count}}</p>
        <p class="line"></p>
        <p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
      </div>
    </div>
    <!--微信打开页面-->
    <div class="person-details in-wx" v-if="isWeb">
      <div class="wx-left wx-item">
        <p class="num">{{joinDeatils.count}}</p>
        <p class="text">参与人数</p>
      </div>
      <div class="line"></div>
      <div class="wx-left wx-item">
        <p class="num"> {{joinDeatils.hospitalCount}}</p>
        <p class="text">参与机构数</p>
      </div>
    </div>
    <div class="main-container">
      <img class="top-img" src="~/assets/img/stage3/hospital-icon.png" alt="">
      <div class="award-container hospital-awards">
        <div class="item" v-for="(item, index) in hospitalTopVoList" :key="index">
          <div class="top">
            <div class="title">云鹊{{dealHospitalRankName(item.hospitalType)}}奖</div>
            <div class="operation" @click="goRankList(1,item.hospitalType)">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img :src="dealHospitalRankIcon(item.hospitalType)" alt="">
            <div class="details">
              <p class="name">{{item.hospitalName}}</p>
              <p class="grade">机构勤奋分 {{item.hospitalDiligence}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container">
      <img class="top-img" src="~/assets/img/stage3/person-icon.png" alt="">
      <div class="award-container person-awards">
        <div class="item">
          <div class="top">
            <div class="title">云鹊勤奋之星</div>
            <div class="operation" @click="goRankList(2)">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/person-rank.png" alt="">
            <div class="details">
              <p class="name">{{doctorTopVo.name}}</p>
              <p class="grade">个人累计勤奋分 {{doctorTopVo.diligence}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pica-icon" :class="{'padBott60': isWeb}">
      <img src="~/assets/img/stage3/pica-icon.png" alt="">
    </div>
    <no-ssr v-if="isWeb">
      <pica-call-app
        :text="'高效学习 轻松行医'"
        path="https://test1-m-ws.yunqueyi.com/search"
      />
    </no-ssr>
  </section>
</template>

<script>
  import { getThirdMainInfo, getMainRank } from '@/service/stage3Api'

  import h5header from '@/components/h5header';

  import { wxShare } from '@/configs/wxShare';
  import { setCookie, getCookie, delCookie } from '@/utils/cookieFun';
  export default {
    name: "index",
    components: {
      h5header
    },
    data() {
      return {
        isLogin: true,
        mainInfo: {},//顶部个人信息等相关数据
        isWeb: false,
        shareObj: wxShare,
        mainInfoType: 1,//1,机构参加，2机构未参加
      }
    },
    async asyncData() {
      const { data } = await getMainRank();
      return {
        joinDeatils:{
          count: data.count,
          hospitalCount: data.hospitalCount
        }, //参加人数参加机构
        hospitalTopVoList: data.hospitalTopVoList,
        doctorTopVo: data.doctorTopVo||{}
      }
    },
    created() {

    },
    mounted() {
      this.$rocNative.appInit();
      this.isWeb = this.$rocNative.isWeb;
      this.getMainInfo();
      this.shareObj.shareUrl = location.href; //微信分享链接
      /*从app获取用户信息*/
      this.getUserInfo();
      const _this = this
      window.__refresh = function(params) {
        _this.getUserInfo();   // 判断是否登录
      }

    },
    methods: {
      getUserInfo() { // 判断是否登录
        this.$rocNative.getUserInfo().then(res => {
          if(res.userToken){
            setCookie('token', res.userToken);
          } else {
            this.isLogin = false
          }
        })
      },
      goMyGrade() { //跳转我的成绩页
        this.$router.push({
          path: '/awards-list/personal-grade',
          query: {
            encyptId: this.mainInfo.encyptId
          }
        })
      },
      goRankList(type,hospitalType) { //跳转榜单页,type:1机构，2个人
        if (type == 1) {
          this.$router.push({
            path: '/awards-list/hospital-grades',
            query: {
              hospitalType: hospitalType
            }
          })
        } else if(type == 2) {
          this.$router.push({
            path: '/awards-list/personal-rank',
            query: {
            }
          })
        }

      },
      getMainInfo() { //top主要数据
        getThirdMainInfo().then(res => {
          if(res.code == '000000') {
            this.mainInfo = res.data;
            if(res.data.hospitalDiligence==0) {
              this.mainInfoType = 2;
            } else {
              this.mainInfoType = 1;
            }
          }
        })
      },
      dealHospitalRankName(hospitalType) { //机构，医生榜单
        if(hospitalType == 0) {
          return '星火';
        } else if(hospitalType == 1) {
          return '萌芽';
        } else if(hospitalType == 2) {
          return '奋进';
        } else if(hospitalType == 3) {
          return '超越';
        }
      },
      dealHospitalRankIcon(hospitalType) {
        if(hospitalType == 0) {
          return require('../../assets/img/stage3/hospital-rank1.png');
        } else if(hospitalType == 1) {
          return require('../../assets/img/stage3/hospital-rank2.png');
        } else if(hospitalType == 2) {
          return require('../../assets/img/stage3/hospital-rank3.png');
        } else if(hospitalType == 3) {
          return require('../../assets/img/stage3/hospital-rank4.png');
        }
      }
    }
  }
</script>
<style>
  @import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
  @import '../../assets/style/awards-list/index.less';
</style>