<template>
  <section class="personal-grade-wrap">
    <h5header
      v-if="!isWeb"
      title="云鹊奖2019"
      :stage3BackBuried="'488#402002'"
      :stage3ShareBuried="'488#402001'"
      isGoHistory="1"
      :isOpacity="false"
      :shareObj="shareObj"/>
    <div class="wrap-container" :class="{'marginBott60': isWeb}" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
      <img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
      <img :src="rewardIcon[myGrades.rewardType]" alt="" class="awards-grade">
      <div class="personal-info">
        <img :src="myGrades.avatarImageUrl" alt="">
        <div class="right">
          <p class="name">{{myGrades.name?myGrades.name:myGrades.mobilePhone}}</p>
          <p class="hospital">{{myGrades.hospitalName}}</p>
        </div>
      </div>
      <div class="join-num">活动总计参与人数:{{myGrades.count}}</div>
      <div class="grade-details">
        <div class="left">
          <p class="title">{{isWeb?'TA':'您'}}的成绩:</p>
          <div class="item">
            <div class="line" :class="{'line168': !myGrades.diligence }"></div>
            <div class="content">
              <p class="label">累计获得勤奋分</p>
              <p class="grade">{{myGrades.diligence}}</p>
              <div class="trapezoid" v-if="myGrades.diligence">
                <p class="detail-bg"></p>
                <p class="detail-text">超过{{myGrades.superCount||0}}%的医生</p>
              </div>
              <div class="detail" v-else>未参与本次活动</div>
            </div>
          </div>
          <div class="item marginItem">
            <div class="line line168"></div>
            <div class="content">
              <p class="label">累计获得云鹊豆</p>
              <p class="grade">{{myGrades.bonus}}</p>
              <div class="detail">{{myGrades.bonus?'记得去云鹊豆中心进行兑换哦':'未参与本次活动'}}</div>
            </div>
          </div>
          <div class="item">
            <div class="line line168"></div>
            <div class="content">
              <p class="label">进每日TOP10</p>
              <p class="grade">{{myGrades.userDayTop10Count}}次</p>
              <div class="detail">{{myGrades.userDayTop10Count?'拿奖拿到手发软':'下次记得心动就行动'}} </div>
            </div>
          </div>
        </div>
        <div class="right">
          <p>{{rewardText[myGrades.rewardType].rightText1}}</p>
          <p>{{rewardText[myGrades.rewardType].rightText2}}</p>
        </div>
      </div>
      <div class="task-details">
        <div class="task-item">
          <img src="~/assets/img/stage3/task-icon1.png" alt="">
          <p class="num">{{myGrades.clockCount}}次</p>
          <p class="name">活动打卡</p>
        </div>
        <div class="task-item">
          <img src="~/assets/img/stage3/task-icon2.png" alt="">
          <p class="num">{{myGrades.courseCount}}门</p>
          <p class="name"> 学习课程</p>
        </div>
        <div class="task-item">
          <img src="~/assets/img/stage3/task-icon3.png" alt="">
          <p class="num">{{myGrades.inviteCount}}人</p>
          <p class="name">邀请好友</p>
        </div>
      </div>
      <div class="share-btn" @click="share" v-if="!isWeb"  v-bp="{ component_tag: '488#402003'}">分享我的成绩</div>
      <p class="footer-text" v-if="!isWeb">共同推进医防融合 齐心聚力机构发展</p>
      <no-ssr v-if="isWeb">
        <pica-call-app
          :text="'高效学习 轻松行医'"
          :path="appCallUrl"
        />
      </no-ssr>
      <finish-toast v-if="isGameOver"></finish-toast>
    </div>
  </section>
</template>

<script>
  import { getMyGrades,isGameOver } from '@/service/stage3Api';
  import h5header from '@/components/h5header';
  import finishToast from '@/components/finish-toast';
  import { Base64 } from 'js-base64';
  export default {
    name: "personal-grade",
    components: {
      h5header,
      finishToast
    },
    data() {
      return {
        shareObj: {},
        isWeb: false,
        appCallUrl: '',
        rewardIcon: {
          0: '',
          1: require('../../assets/img/stage3/awards-icon1.png'),// 1-金色云鹊勋章	0%~10%	勤学不辍，必有收获
          2: require('../../assets/img/stage3/awards-icon2.png'),//2-银色云鹊勋章	11%-40%	学无止境，不知疲倦
          3: require('../../assets/img/stage3/awards-icon3.png'),//3-铜色云鹊勋章	41%-100%	学而不倦，可圈可点
        },
        rewardText: {
          0: {},
          1: {// 1-金色云鹊勋章	0%~10%	勤学不辍，必有收获
            rightText1: '勤学不辍',
            rightText2: '必有收获'
          },
          2:  {//2-银色云鹊勋章	11%-40%	学无止境，不知疲倦
            rightText1: '学无止境',
            rightText2: '不知疲倦'
          },
          3:  {//3-铜色云鹊勋章	41%-100%	学而不倦，可圈可点
            rightText1: '学而不倦',
            rightText2: '可圈可点'
          },
        },
      }
    },
    async asyncData({query}) {
      const res = await isGameOver();
      const { data } = await getMyGrades({id: Base64.decode(query.encyptId)});
      return {
        isGameOver: res.data,
        encyptId: Base64.decode(query.encyptId),//加密doctorId
        myGrades: data
      }
    },
    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
    },
    methods: {
      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/personal-grade.less';
</style>