<template>
  <section class="awards-list-wrap">
    <h5header
      v-if="!isWeb"
      title="云鹊奖2019"
      :stage3BackBuried="'487#401002'"
      :stage3ShareBuried="'487#401001'"
      :isOpacity="false"
      :shareObj="shareObj"/>
    <div class="top-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
      <img src="~/assets/img/stage3/rule-btn.png" @click="goToRule" v-bp="{ component_tag: '487#401003'}" 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">机构{{rankName[mainInfo.hospitalType]}}榜</p>
          <p class="rank">第{{mainInfo.hospitalRank}}名</p>
          <p class="score">机构勤奋分 {{mainInfo.hospitalDiligence}}</p>
        </div>
      </div>
      <div class="my-grade" v-if="mainInfo.diligence" @click="goMyGrade" v-bp="{ component_tag: '487#401004'}">我的成绩</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" @click="goToLogin" v-bp="{ component_tag: '487#401005'}">立即登录</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">云鹊{{rankName[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="hospitalRankIcon[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)" v-bp="{ component_tag: '487#401010'}">查看榜单<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="appCallUrl"
      />
    </no-ssr>
    <finish-toast v-if="isGameOver"></finish-toast>
  </section>
</template>

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

  import h5header from '@/components/h5header';
  import finishToast from '@/components/finish-toast';
  import { Base64 } from 'js-base64';
  import { setCookie, getCookie, delCookie } from '@/utils/cookieFun';
  export default {
    name: "index",
    components: {
      h5header,
      finishToast
    },
    data() {
      return {
        isLogin: true,
        mainInfo: {},//顶部个人信息等相关数据
        isWeb: false,
        shareObj: {},
        mainInfoType: 1,//1,机构参加，2机构未参加
        rankName: {
          '0': '星火',
          '1': '萌芽',
          '2': '奋进',
          '3': '超越'
        },
        hospitalRankIcon: {
          '0': require('../../assets/img/stage3/hospital-rank1.png'),
          '1': require('../../assets/img/stage3/hospital-rank2.png'),
          '2': require('../../assets/img/stage3/hospital-rank3.png'),
          '3': require('../../assets/img/stage3/hospital-rank4.png')
        },
        appCallUrl: ''
      }
    },
    async asyncData() {
      const res = await isGameOver();
      const { data } = await getMainRank();
      return {
        isGameOver: res.data,
        joinDeatils:{
          count: data.count,
          hospitalCount: data.hospitalCount
        }, //参加人数参加机构
        hospitalTopVoList: data.hospitalTopVoList,
        doctorTopVo: data.doctorTopVo||{}
      }
    },
    created() {

    },
    mounted() {
      this.$rocNative.appInit();
      this.isWeb = this.$rocNative.isWeb;
      this.shareObj = {
        title1: '云鹊奖榜单公布',
        title2: '来看看全中国最杰出的医院机构和医生个人',
        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

      /*从app获取用户信息*/
      this.getUserInfo();
      const _this = this
      window.__refresh = function(params) {
        _this.getUserInfo();   // 判断是否登录
      }

    },
    methods: {
      goToRule() {
        let paramList = [
          {
            "key":"pageUrl",
            "value": 'https://phome.yunqueyi.com/template_v2/?id=628',
            "type":4,
            "seqNo":1
          }
        ];
        this.$rocNative.dispatchEventByModuleCode({
          modeCode: 'M300',
          jsonString: paramList
        });
      },
      goToLogin() {
        this.$rocNative.gotoLogin();
      },
      getUserInfo() { // 判断是否登录
        this.$rocNative.getUserInfo().then(res => {
          if(res.userMobile){
            setCookie('token', res.userToken)
            this.getMainInfo();
            this.isLogin = true;
          } else {
            this.isLogin = false;
          }
        })
      },
      goMyGrade() { //跳转我的成绩页
        this.$router.push({
          path: '/awards-list/personal-grade',
          query: {
            encyptId: Base64.encode(this.mainInfo.encyptId)
          }
        })
      },
      goRankList(type,hospitalType) { //跳转榜单页,type:1机构，2个人
        if (type == 1) {
          if (hospitalType == 0) {
            this.$sendBuriedData({
              component_tag: `487#401006`
            });
          } else if (hospitalType == 1) {
            this.$sendBuriedData({
              component_tag: `487#401007`
            });
          } else if (hospitalType == 2) {
            this.$sendBuriedData({
              component_tag: `487#401008`
            });
          } else if (hospitalType == 3) {
            this.$sendBuriedData({
              component_tag: `487#401009`
            });
          }

          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;
            }
          }
        })
      },
    }
  }
</script>
<style>
  @import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
  @import '../../assets/style/awards-list/index.less';
</style>