<template>
  <section class="index-wrap" :class="{'padbtm50': (showFixed && showRemindBtn)}">
    <h5header v-if="!isWeb" title="云鹊奖2019" :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 v-show="loaded || isWeb" class="btn-appoint btn-app-share" id="imgHeight3">
      <img v-if="showRemindBtn&&!remindStatus" @click="setRemind" src="../assets/img/btn_appoint.png" />
      <div v-if="remindStatus">
        <img src="../assets/img/btn_appointed.png">
        <div class="appoint-time">12月16号我们会提示你参加活动</div>
      </div>
    </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">查看规则详情<img src="../assets/img/arrw.png"></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 && showRemindBtn" @click="setRemind" class="fix-btn">
      <div>开赛时提醒我</div>
    </div>
  </section>
</template>
<script>
import { Toast } from 'vant';
import { remind, getRemindStatus, checkHospitalStatus, getCnt, checkToken } from '@/service';
import h5header from '@/components/h5header';
import shareContainer from '@/components/share-container';

export default {
  // head() {
  //   return {
  //     title: '云鹊医-赋能基层医生',
  //   };
  // },
  components: {
    h5header,
    shareContainer
  },
  data() {
    return {
      showWxMask: false,
      showFixed: false,
      doctorIdCnt: '',
      hospitalIdCnt: '',
      scrollVal: 0,
      isWeb: false,
      remindStatus: false,
      isLogin: false,
      loaded: false,
      shareObj: {},
      userToken: ''
    }
  },
  created() {
    getCnt().then(res => {
      if (res.code == '000000') {
        this.doctorIdCnt = res.data.doctorIdCnt;
        this.hospitalIdCnt = res.data.hospitalIdCnt;
      }
    });
  },
  mounted() {
    const _seft = this;
    this.$rocNative.appInit();
    window.__refresh = function() {
      _seft.$rocNative
        .getUserInfo()
        .then(params => {
          _seft.userToken = params.userToken;
          getRemindStatus(_seft.userToken).then(res => {
            if(res.code=='000000'){
              _seft.isLogin = true;
              _seft.remindStatus = res.data;
            }else if(res.code=='200006'){
              _seft.isLogin = false;
            }
            _seft.loaded = true;
          });
        });
    }
    this.shareObj = {
      shareUrl: window.location.href,
      title1: '年底辛苦了，送您一份奖励',
      title2: '小小心意，20万奖品等瓜分',
      shareImageUrl: 'https://file.yunqueyi.com/h5/nzhd19/share.png'
    }
    this.isWeb = this.$rocNative.isWeb;
    // this.isWeb = false;
    // this.isLogin = true;
    // this.remindStatus = false;
    // this.loaded = true;
    // 通过获取token，初始化数据
    this.$rocNative.getToken().then(res => {
      const { userToken } = res;
      this.userToken = userToken;
      getRemindStatus(userToken).then(res => {
        if(res.code=='000000'){
          this.isLogin = true;
          this.remindStatus = res.data;
        }else if(res.code=='200006'){
          this.isLogin = false;
        }
        this.loaded = true;
      });
    });
    // 滚动交互
    this.scrollHandle();
    // 微信分享
    this.$picaWxShare({
      type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
      authUrl: wxShare.shareUrl
    },(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
      });
    })
  },
  computed: {
    showRemindBtn(){
      // 没办法，这里需要对按钮的显示与否进行优化
      // APP，已登录，等到加载完，再根据 [remindStatus] 显示按钮 
      // APP，未登录，直接显示【开赛提醒】按钮
      // web非APP，直接显示【开赛提醒】按钮
      let flag = false;
      if(this.isLogin){
        if(this.remindStatus){
          flag = false;
        }else{
          flag = true;
        }
      }else{
        flag = true;
      }
      return flag;
    },
  },
  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 {
        // if(!flag && !this.loaded){
        //   return;
        // }
        if(!this.loaded){
          return;
        }
        // this.$rocNative.getToken().then(data => {
        //   const { userToken } = data;
          checkToken(this.userToken).then(res=>{
            if(res.code=='200006' || res.code == '200000'){
              this.$rocNative.gotoLogin();
            }else{
              checkHospitalStatus(this.userToken).then(res => {
                const status = res.data.status;
                if (status == 1) { // 机构状态正常
                  remind({ token: this.userToken }).then(resD => {
                    if (resD.code == '000000' && resD.data) {
                      // if(!flag){
                        this.$dialog.alert({
                          title: '设置提醒成功',
                          message: '云鹊奖活动正式时间：12月16日 10:00开始，我们将会以APP消息提醒和短信形式提醒您，请记得及时参与活动',
                          confirmButtonText: '我知道了',
                          className: 'remind-success'
                        });
                      // }
                      this.remindStatus = true;
                    } else if(resD.code == '000000' && !resD.data){
                      this.$toast(resD.message);
                      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(() => {
                    this.checkVersion(()=>{
                      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(() => {
                    this.checkVersion(()=>{
                      if (this.$rocNative.isAndroid) {
                        this.$rocNative.setNeedClearUrl({ url: 'year_end_ssr' });
                      }
                      this.$rocNative.gotoActivityHospital({ url: window.location.href });
                    })
                  });
                }
              })
            }
          })
          
        // });
      }
    },
    checkVersion(callback){
      this.$rocNative.getAppVersionCode().then(res => {
        const appVersion = parseFloat(res.versionCode.replace(/\./g, ''));
        if(appVersion>=317){
          callback();
        }else{
          this.$dialog.alert({
            message: '当前app版本过低，请升级版本后继续操作',
            className: 'version-toast'
          });
        }
      });
    },
    // 微信分享
    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`
      });
      if(this.isWeb){
        window.location.href = 'https://phome.yunqueyi.com/template_v2/?id=594';
      }else{
        this.$rocNative.dispatchEventByModuleCode({
          modeCode: 'M300',
          jsonString: [
            {
              "key":"pageUrl",
              "value": 'https://phome.yunqueyi.com/template_v2/?id=594',
              "type":4,
              "seqNo":1
            },
            {
              "key":"showTitle",
              "value": false,
              "type":1,
              "seqNo":2
            },{
              "key":"title",
              "value": '',
              "type":1,
              "seqNo":3
            }
          ]
        })
      }
    }
  },
}
</script>
<style lang="less" scoped>
@import '../assets/style/index.less';
</style>
<style lang="less">
@import '../assets/style/revant.less';
</style>