<template>
  <section class="index-wrap">
    <h5header v-if="!isWeb" title="云鹊奖" :scrollVal="scrollVal" :baseShowHeight="25" :shareObj="shareObj" :setedScroll="true" />
    <div id="imgHeight1">
      <img src="../assets/img/img1.png" />
      <img src="../assets/img/img2.png" />
      <img src="../assets/img/img3.png" />
    </div>
    <div class="wrap-join" id="imgHeight2">
      <div class="wrap-count">
        <div>
          <h1>{{doctorIdCnt}}</h1>
          <h5>已参与人数</h5>
        </div>
        <div>
          <h1>{{hospitalIdCnt}}</h1>
          <h5>已参与机构</h5>
        </div>
      </div>
    </div>
    <div class="btn-appoint btn-app-share" id="imgHeight3">
      <img v-if="!remindStatus" @click="setRemind" src="../assets/img/btn_appoint.png" />
      <template v-else>
        <img src="../assets/img/btn_appointed.png">
        <div class="appoint-time">12月16号我们会提示你参加活动</div>
      </template>
    </div>
    <div>
      <img src="../assets/img/img6.png" />
      <img src="../assets/img/img7.png" />
      <img src="../assets/img/img8.png" />
      <img src="../assets/img/img9.png" />
      <img src="../assets/img/img10.png" />
    </div>
    <div class="btn-share btn-app-share"><img @click="goShare" src="../assets/img/btn_share.png" /></div>
    <div class="rule-show">
      <img src="../assets/img/rule_title.png" />
      <div class="rule-bg">
        <section>
          <h1>每日任务，攒勤奋分</h1>
          <p><span>比赛时间：</span>2019.12.16 10:00-2019.12.30 00:00</p>
          <p><span>医生机构：</span>根据机构内注册医生的勤奋分总额排名，活动结束后机构榜单指定名次可获得云鹊豆，榜单第一可获得云鹊机构奖荣誉。</p>
          <p><span>医生个人：</span>完成每日学习任务可积攒勤奋分和云鹊豆，每日个人排行榜前十可获得相应实物奖品，个人累计排行第一获得云鹊勤奋之星荣誉、iphone11(64G)一台及云鹊豆奖品。</p>
        </section>
        <section class="margin-top-20">
          <h1>公布排名</h1>
          <p><span>公布时间：</span>2019.12.30 10:00-2020.1.5</p>
          <p>公布个人获奖名单和机构获奖名单</p>
        </section>
        <div class="line"></div>
        <div @click="ruleLink" class="btn-rule">查看规则详情</div>
      </div>
      <img class="bird" src="../assets/img/bird.png">
    </div>
    <share-container
      v-if="showWxMask"
      @closeShare="showWxMask=false"
    />
    <div class="abs-btn">
      <img @click="ruleLink" src="../assets/img/btn_rules.png">
    </div>
    <div v-if="showFixed && !remindStatus" @click="setRemind" class="fix-btn">
      <div>开赛时提醒我</div>
    </div>
  </section>
</template>
<script>
import { Toast } from 'vant';
import { remind, getRemindStatus, checkHospitalStatus, getCnt } from '@/service';
import h5header from '@/components/h5header';
import shareContainer from '@/components/share-container';
import { BASE_URL } from '@/utils/enumerate';

export default {
  head() {
    return {
      title: '云鹊医-赋能基层医生',
    };
  },
  components: {
    h5header,
    shareContainer
  },
  data() {
    return {
      showWxMask: false,
      showFixed: false,
      remindStatus: false,
      doctorIdCnt: '',
      hospitalIdCnt: '',
      scrollVal: 0,
      isWeb: false,
      shareObj: {}
    }
  },
  created() {
    getCnt().then(res => {
      if (res.code == '000000') {
        this.doctorIdCnt = res.data.doctorIdCnt;
        this.hospitalIdCnt = res.data.hospitalIdCnt;
      }
    });
  },
  mounted() {
    this.shareObj = {
      shareUrl: window.location.href,
      title1: '云鹊奖活动在即，火速开启提醒',
      title2: '边学习边获益，最高20万元奖品等你瓜分！',
      shareImageUrl: 'https://files.yunqueyi.com/qiniu/image/certifies/2019-11-26-20-4-37-share.png'
    }
    this.isWeb = this.$rocNative.isWeb;
    this.$rocNative.getToken().then(res => {
      const { userToken } = res;
      getRemindStatus(userToken).then(res => {
        this.remindStatus = res.data;
      });
    });
    // 滚动交互
    this.scrollHandle();
    // 微信分享
    this.$picaWxShare({
      // baseUrl: BASE_URL[process.env.NUXT_ENV_APP],
      baseUrl: 'https://test1-sc.yunqueyi.com',
      authUrl: window.location.href,
      isDebug: false,
      type: 15,
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
      ]
    },(wx)=>{
       // 分享给朋友
      wx.onMenuShareAppMessage({
        title: this.shareObj.title1,
        desc: this.shareObj.title2,
        link: window.location.href,
        imgUrl: this.shareObj.shareImageUrl,
      });

      // 分享到朋友圈
      wx.onMenuShareTimeline({
        title: this.shareObj.title1,
        desc: this.shareObj.title2,
        link: window.location.href,
        imgUrl: this.shareObj.shareImageUrl,
      });
    })
  },
  methods: {
    // 处理滚动按钮悬浮事件
    scrollHandle() {
      const _self = this;
      const imgHeight1 = document.getElementById('imgHeight1').offsetHeight;
      const imgHeight2 = document.getElementById('imgHeight2').offsetHeight;
      const imgHeight3 = document.getElementById('imgHeight3').offsetHeight;
      let bodyScrollTop = 0,
        documentScrollTop = 0;
      window.onscroll = () => {
        if (document.body) {
          bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
          documentScrollTop = document.documentElement.scrollTop;
        }
        const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
        const scrollVal = bodyScrollTop || documentScrollTop;
        this.scrollVal = scrollVal;
        if (scrollVal >= heightVal) {
          _self.showFixed = true;
        } else {
          _self.showFixed = false;

        }
      }
    },
    // 提醒预约
    setRemind() {
      this.$sendBuriedData({
        component_tag: `301#301004`
      });
      if (this.isWeb) {
        this.$dialog.confirm({
          title: '提醒',
          message: '请前往云鹊医APP参与活动',
          confirmButtonText: '下载APP',
          cancelButtonText: '我知道了',
          className: 'remind-success',
        }).then(() => {
          window.location.href = 'https://android.myapp.com/myapp/detail.htm?apkName=com.picahealth.yunque&ADTAG=mobile';
        });
      } else {
        this.$rocNative.getToken().then(data => {
          const { userToken } = data;
          checkHospitalStatus(userToken).then(res => {
            const status = res.data.status;
            if (status == 1) { // 机构状态正常
              remind({ token: userToken }).then(resD => {
                if (resD.code == '000000') {
                  this.$dialog.alert({
                    title: '设置提醒成功',
                    message: '云鹊奖活动正式时间：12月16日 10:00开始，我们将会以APP消息提醒和短信形式提醒道您，请记得及时参与活动',
                    confirmButtonText: '我知道了',
                    className: 'remind-success'
                  });
                  this.remindStatus = true;
                } else {
                  this.$toast(resD.message)
                }
              })
            } else if (status == 15) { // 15创建机构审核中
              let hospital = '默认机构名称';
              if (res.data && res.data.hospital) {
                hospital = res.data.hospital
              }
              this.$dialog.confirm({
                title: '提醒',
                message: `抱歉，您创建的机构【${hospital}】正在审核中，审核通过后可参与活动<br/><br/>如有疑问可联系客：<span>400-920-8877</span><br/>(周一至周五9:00-18:00)`,
                confirmButtonText: '查看进度',
                cancelButtonText: '我知道了',
                className: 'remind-success',
              }).then(() => {
                if (this.$rocNative.isAndroid) {
                  this.$rocNative.setNeedClearUrl({ url: 'year_end_ssr' });
                }
                this.$rocNative.gotoInstitutionalReview({ url: window.location.href });
              });
            } else { // 除了1都是未加入机构
              this.$dialog.confirm({
                title: '提醒',
                message: '抱歉，您暂未加入机构，需加入机构才可参与活动',
                confirmButtonText: '加入机构',
                cancelButtonText: '我知道了',
                className: 'remind-success',
              }).then(() => {
                if (this.$rocNative.isAndroid) {
                  this.$rocNative.setNeedClearUrl({ url: 'year_end_ssr' });
                }
                this.$rocNative.gotoActivityHospital({ url: window.location.href });
              });
            }
          })
        });
      }
    },
    // 微信分享
    goShare() {
      this.$sendBuriedData({
        component_tag: `301#301005`
      });
      if(this.isWeb){
        this.showWxMask = true;
      }else{
        this.$rocNative.shareWechat(this.shareObj);
      }
    },
    // 活动规则
    ruleLink() {
      this.$sendBuriedData({
        component_tag: `301#301003`
      });
      window.location.href = 'https://phome.yunqueyi.com/template_v2/?id=594';
    }
  },
}
</script>
<style lang="less" scoped>
@import '../assets/style/index.less';
</style>
<style lang="less">
@import '../assets/style/revant.less';
</style>