<template>
  <section class="index-wrap">
    <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>2394847</h1>
          <h5>已参与人数</h5>
        </div>
        <div>
          <h1>23948</h1>
          <h5>已参与机构</h5>
        </div>
      </div>

    </div>
    <div class="btn-appoint btn-app-share" id="imgHeight3" @click="setRemind"><img src="../assets/img/btn_appoint.png"/>
    </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 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 class="btn-rule">查看规则详情</div>
      </div>
      <img class="bird" src="../assets/img/bird.png">
    </div>
    <div v-if="showFixed" @click="setRemind" class="fix-btn">
      <div>开赛时提醒我</div>
    </div>
  </section>
</template>
<script>
  // import { Toast } from 'vant';
  // import { mapMutations } from 'vuex'
  // import request from '@/service/api';
  import {remind, getRemindStatus, checkHospitalStatus} from '@/service';
  // import popAll from '../components/popAll.vue';

  // import { getBaseMainUrl, getCookie, delCookie, setCookie } from '../utils/index';

  const cookies = require('cookie-universal')();
  const token = '3D093CC8931C4F73A938CD8939E1A640';


  export default {
    head() {
      return {
        title: '云鹊医-赋能基层医生',
      };
    },
    async asyncData({query}) {
      const {data} = await getRemindStatus(token);
      console.log('服务端', data)
      const remindStatus = data;
      return {
        remindStatus
      }
    },
    data() {
      return {
        showFixed: false,
      }
    },
    created() {
    },
    mounted() {
      console.log('愉悦状态', this.remindStatus)
      this.scrollHandle();

    },
    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;
          if (scrollVal >= heightVal) {
            _self.showFixed = true;
          } else {
            _self.showFixed = false;

          }
        }
      },
      setRemind() {
        checkHospitalStatus(token).then(res => {
          console.log(res)
          // status ： 0无机构 1正常 2机构已关闭 5退出 10移除 15创建机构审核中 20创建机构审核不通过 25创建机构未提交
          if (res.data.status == 1) {

          }
          if (!res.data.status) { // 0无机构
            // native gotoActivityHospital
          } else if (res.data.status == 15) { // 15创建机构审核中
            // native gotoInstitutionalReview
          } else {
            remind({token}).then(res => {
              console.log('res=>', res)
            })
          }
        })
      }
    },
  }
</script>
<style lang="less">
  @import '../assets/style/index.less';
</style>