<template>
  <div class="in-activity-wrap">
    <!-- 顶部的四个阶段 进度条 -->
    <ul class="top-process-bar">
      <!-- <li class="over">
        <p class="title">高血压学习</p>
        <p class="date">12月16至19日</p>
      </li>
      <li class="active">
        <p class="title">糖尿病学习</p>
        <p class="date">12月20至24日</p>
      </li>
      <li>
        <p class="title">中医科学习</p>
        <p class="date">12月24至27日</p>
      </li>
      <li>
        <p class="title">全科学习</p>
        <p class="date">12月27至30日</p>
      </li> -->

      <li v-for="item in stageDateList" :class="">
        <p class="title">{{ item.title }}</p>
        <p class="date">{{ item.date }}</p>
      </li>
    </ul>

    <div class="big-bg-wrap">
      <div class="award-wrap">
        <div class="stage-rule">
          <img class="stage-text" src="../assets/img/stageTwo/stage-01-text.png" alt="">
          <img class="rule-btn" src="../assets/img/stageTwo/rule-btn.png" alt="" @click="handleRuleBtnClick">
        </div>
        <img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt="">
      </div>

      <!-- 未登录 -->
      <div v-if="!isLogin" class="not-login-wrap">
        <img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
        <img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">  
        <div class="content-info">
          <p class="not-login-text">您还未登录</p>
          <p class="tips">登录并加入机构参加活动</p>
        </div>
        <div class="go-login login-but-no-join" @click="goToLogin">去登录<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
      </div> 

      <!-- 已登录，但没有加入机构  -->
      <div v-if="isLogin && !isJoin" class="not-login-wrap ">
        <img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
        <img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">  
        <div class="content-info">
          <p class="not-login-text">{{appUserInfo.userName}}</p>
          <p class="tips">尚未加入一个机构</p>
        </div>
        <div class="go-login login-but-nojoin" @click="goToJoin">加入机构<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
      </div> 


      <!-- 已登录 且 已加入机构 -->
      <div v-if="isLogin && isJoin" class="user-info-wrap">
        <img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
        <div class="basic-info">
          <div class="head-icon">
            <img src="../assets/img/stageTwo/default-doctor-icon.png" alt="">
          </div>
          <div class="name-info">
            <p class="name">召唤</p>
            <p class="company">上海复旦大学附属中山医院</p>
          </div>
          <div @click="goToUserDetail" class="detail">个人明细<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
        </div>

        <ul class="billboard-wrap">
          <li>
            <p class="title">个人今日勤奋分</p>
            <p class="score">{{doctorInfo.userDayScore}}</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名{{doctorInfo.userDayRank}}</p>
            <div @click="goToUserBoard" class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
          </li>
          <li class="organ">
            <p class="title">机构累计勤奋分</p>
            <p class="score">{{doctorInfo.hospitalScore}}</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">累计排名{{doctorInfo.hospitalRank}}</p>
            <div @click="goToOrganBoard" class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
          </li>
        </ul>
        <p class="score-tips">再获得{{doctorInfo.targetRequiredScore}}勤奋分即可上升到前{{doctorInfo.targetRank}}名获得?????????</p>
        <div class="bean-wrap">
          <p class="personal-total-get">累计个人获得：<span>{{doctorInfo.userTotalBonus}}云鹊豆</span></p>
          <div class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
        </div>
        <p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
        <div class="bean-stage">
          <img src="../assets/img/stageTwo/bean-stage01.png" alt="">
          <ul class="score-list">
            <li v-for="item in doctorInfo.hospitalLevelScore">达{{item}}分</li>
            <li>12月30日</li>
          </ul>
        </div>
      </div>

      
      
    </div>

    

    <!-- 邀请医生好友学课程 -->
    <div class="invite-doctor-wrap">
      <img class="top-head-icon" src="../assets/img/stageTwo/invite-doctor-top.png" alt="">
      <p class="invite-tips">每邀请1位医生好友领取课程，+20勤奋分 +20云鹊豆</p>
      <div class="invite-list-wrap">
        <ul class="invite-list">
          <!-- 已邀请的 -->
          <li v-for="item in inviteList">
            <img @click="eachDoctorClick" v-if="item.avatarImageUrl" class="doctor-icon" :src="item.avatarImageUrl" alt="">   
            <img @click="eachDoctorClick" v-else class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">   
            <p class="text">{{ item.doctorName ? item.doctorName : item.mobile }}</p>
          </li>
          <!-- 未邀请的 -->
          <template v-if="inviteList && inviteList.length < 4">
            <li v-for="item in notInviteShowList">
              <div class="add-btn" @click="eachDoctorClick">
                <img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
              </div>
            </li>
          </template>
          <!-- 查看更多 -->
          <li>
            <div @click="seeMore" class="add-btn">
              <img class="right-icon-big" src="../assets/img/stageTwo/right-icon-big.png" alt="">
            </div>
            <p class="text see-more">查看更多</p>
          </li>
        </ul>
      </div>
      <div class="invite-btn">
        <img src="../assets/img/stageTwo/invite-btn.png" alt="" class="invite-btn">
        <p @click="handleInviteClick" class="text">去邀请</p>
      </div>
      <div class="login-tips">被邀请好友登录APP，收益X4倍</div>
    </div>

    <!-- 每日任务 -->
    <div class="daily-task">
      <div class="top-center-bar">每日任务</div>
      <ul class="task-list">
        <li>
          <img class="left-icon" src="../assets/img/stageTwo/daily-clock-icon.png" alt="">
          <div class="center-wrap">
            <p class="title">每日打卡</p>
            <p class="detail-text">+5勤奋分 +5云鹊豆</p>
          </div>
          <div @click="handleClock" class="right-btn done">已打卡</div>
        </li>
        <li>
          <img class="left-icon" src="../assets/img/stageTwo/hypertension-icon.png" alt="">
          <div class="center-wrap">
            <p class="title">高血压课程学习</p>
            <p class="detail-text">+5勤奋分 +5云鹊豆</p>
          </div>
          <div @click="handleTaskClick" class="right-btn">去学习</div>
        </li>
        <li>
          <img class="left-icon" src="../assets/img/stageTwo/smo-icon.png" alt="">
          <div class="center-wrap">
            <p class="title">高血压SMO项目任务</p>
            <p class="detail-text">奖励xxx勤奋分</p>
          </div>
          <div @click="handleTaskClick" class="right-btn">去完成</div>
        </li>
      </ul>
    </div>

    <!-- 底部云鹊logo -->
    <div class="bottom-logo">
      <img src="" alt="">
    </div>

    <!-- 打卡成功 弹窗 -->
    <div v-if="clockSuccessVisible" class="toast-wrap" @touchmove.prevent>
      <div class="full-screen-mask"></div>
      <div class="content-wrap">
        <img class="back-image" src="../assets/img/stageTwo/clock-success-bg.png" alt="">
        <!-- <img class="back-image" src="../assets/img/stageTwo/win-award-bg.png" alt=""> -->
        <!-- <img class="back-image" src="../assets/img/stageTwo/award-cup-bg.png" alt=""> -->
        <p class="title">打卡成功</p>
        <p class="message">已获得: 5勤奋分, 5云鹊豆</p>
        <div class="bottom-btn">我知道了</div>
        <div class="close-btn"></div>
      </div>
    </div>

    <!-- 活动结束 弹窗-->
    <div v-if="activityEndVisible" class="toast-wrap" @touchmove.prevent>
      <div class="full-screen-mask"></div>
      <div class="content-wrap activity-end">
        <p class="content-text">本次活动已结束，感谢您的参与，最终获奖排名将于12月30日10点公布，届时查看</p>
        <ul class="btn-list">
          <li>我知道了</li>
          <li class="high-light">查看昨日获奖</li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  import { getInviteList } from '@/service/activityMainpage';

  let vm = null;
  export default {
    data () {
      return {
        // isFirstFresh: true,
        isLogin: false,  // 是否 已登录
        isJoin: true,    // 是否 已加入机构  默认为false

        stageDateList: [
          { date: '12月16至19日', beginDate: '2019-12-16', endDate: '2019-12-19', title: '高血压学习' },
          { date: '12月20至23日', beginDate: '2019-12-20', endDate: '2019-12-23', title: '糖尿病学习' },
          { date: '12月24至26日', beginDate: '2019-12-24', endDate: '2019-12-26', title: '中医科学习' },
          { date: '12月27至29日', beginDate: '2019-12-27', endDate: '2019-12-29', title: '全科学习'   },
        ],

        appUserInfo: {
          userName: '',
          userMobile: '',
          doctorId: '',
          userToken: '',
          // appVersion: '',
          // systemType: '',
        },

        doctorInfo: {
          userDayScore: '1000',                  // 用户当日勤奋分
          userDayRank: '5',                      // 用户当日排名
          hospitalScore: '6000',                 // 机构累计勤奋分
          hospitalRank: '8',                     // 机构累计排名
          userTotalBonus: '7777',                // 个人累计获得云鹊豆
          hospitalLevelScore: [100, 300, 700],   // 三阶段达标分值, 数组返回
          targetRequiredScore: '10',             // 再获得多少分  // 再获得10勤奋分即可上升到前10名获得欧姆龙温度计
          targetRank: '5',                       // 上升到多少名
        },
        championAward: [         // 第一名的奖励名称会根据日期变化
          '小米电视 4C 32英寸',   // 12.16-12.19
          '米家洗衣机',           // 12.20-12.23
          '米家两门冰箱',         // 12.24-12.26
          '荣耀 Play3',          // 12.27-12.29
        ],
        rankLittleTips: {
          first: '今日保持第1名，可获得小米电视',
          before3: '第1名可获得小米电视，今日再拿X分即有机会上升到第1名',
          before10: '前3名可获得血压计，今日再拿X分即有机会上升到第3名',
          after10: '前10名可获得体温计，今日再拿X分即有机会上升到第10名',
        },
        clockSuccessVisible: false,    // 是否显示 打卡成功 弹窗
        activityEndVisible: false,     // 是否显示 活动结束 弹窗

        inviteList: [],                // 已邀请的用户列表
        notInviteShowList: [],         // 未邀请的默认显示
        
      }
    },
    computed: {
      // loginUserIcon() {
      //   if(){

      //   }else{
      //     return '../assets/img/stageTwo/not-login-icon.png';
      //   }
      // },

      // 顶部类似tab的显示逻辑
      topDateStatus(item) {
        // 获取当前时间？  前端自己获取，还是 有个接口来返回服务器时间
        let currentTime = new Date().getTime();
        let beginDate = item.beginDate.split('-');
        let endDate = item.endDate.split('-');
        let beginTime = new Date(beginDate[0], beginDate[1], beginDate[2]).getTime();
        let endTime = new Date(endDate[0], endDate[1], endDate[2]).getTime();
        if( currentTime < beginTime ){  
          return '';
        }
      },
    },
    created() {
      vm = this;


    },
    mounted() {

      vm.$rocNative.appInit();
      vm.getUserInfo();   



      // if (process.client) {
      //     window.__refresh = function(params) {
      //         vm.isFirstFresh = false;
      //     }
      // }
    },
    methods: {
      // 判断用户是否登录？
      getUserInfo() {
        vm.$rocNative 
        .getUserInfo()
        .then(params => {
          // _seft.userToken = params.userToken;  // 存到store里
          alert(JSON.stringify(params));
          if(params && params.userMobile){
            vm.isLogin = true;
            vm.appUserInfo = params;
            alert('已经获取了 登录token了')
            // 登录且加入机构才获取医生邀请了的列表 ？？？？？？？？？？？？？？？？？？ 还是 已登录就获取，不论是否加入机构？

            vm.loginCallback();
          }else{
            // alert('没获取到登录信息！！！')
          }
        });
      },
      
      // 调用APP登录弹窗
      appLogin() {
        vm.$rocNative.gotoLogin();
      },
      // 登陆ok后 回调： 获取邀请的医生列表等。。
      loginCallback() {
        let token = '5463439BE4444FF8BC47CC4575E9D550';   //  开发时用这个调用数据
        // let token = vm.appUserInfo.userToken;          //  正式上线 用这个！！！！
        getInviteList(token).then(res => {
          alert(JSON.stringify('获取邀请的列表 OK'));
          alert(JSON.stringify(res));

          if(res && res.code == '000000'){
            // alert
            if(res.data && res.data.list){
              vm.inviteList = res.data.list;
              alert(vm.inviteList.length)
              if( vm.inviteList.length > 4 || vm.inviteList.length == 4 ){
                vm.inviteList.length = 4;
                vm.notInviteShowList = [];
              }else{
                let notInviteLength = 4 - vm.inviteList.length;
                for(let i=0; i<notInviteLength; i++){
                  vm.notInviteShowList.push({
                    notInvite: true
                  })
                }
              }
            }else{
              vm.inviteList = [];
            }

          }
        })
      },
      // 活动规则
      handleRuleBtnClick() {
        alert('跳转至 活动规则页面')
      },
      // 去登录
      goToLogin() {
        console.log('去登录...');
        vm.appLogin();
      },
      // 去加入机构
      goToJoin() {
        console.log('去加入机构...')
        // 用户点击【加入机构】，继续判断用户是否有创建机构在审核状态，若有，则弹出弹窗提示。若无则跳转加入机构页面
      },
      
      handleLoginCheck(cb) {
        if( !this.isLogin ){                       // 未登录 >>>  去登录
          this.goToLogin();
        }else if( this.isLogin && !this.isJoin ){  // 已登录 && 未加入机构  >>>>  去加入机构
          this.goToJoin();
        }else if( this.isLogin && this.isJoin ){   // 已登录 && 已加入机构  >>>>  去详情页？？
          cb && cb();
        }
      },

      // 跳转至 个人明细 
      goToUserDetail() {
        console.log('跳转至 个人明细')
      },
      // 查看个人榜单
      goToUserBoard() {
        console.log('跳转至 个人榜单')
        
      },
      // 查看机构榜单
      goToOrganBoard() {
        console.log('跳转至 机构榜单')
      },
      // 云鹊豆中心
      goToBeanCenter() {
        console.log('云鹊豆中心')
      },

      // “邀请医生好友学课程” 列表中的每一个医生点击事件
      eachDoctorClick() {
        let cb = this.goToDoctorPage;
        this.handleLoginCheck(cb);
      },
      // 去每个li医生详情页 ??????
      goToDoctorPage() {
        //“被邀请的用户模块“点击逻辑，点击用户头像、“+“或者查看更多，都跳转至邀请详情页
        console.log('去邀请详情页....')

      },

      //“邀请医生好友学课程” 查看更多
      seeMore() {
        let cb = this.seeInviteMore;
        this.handleLoginCheck(cb);
      },
      // 跳转至 “查看更多” 页面
      seeInviteMore() {
        console.log('去查看更多页面...');
      },

      // 去邀请 按钮
      handleInviteClick() {
        let cb = this.goToInvite;
        this.handleLoginCheck(cb);
      },
      goToInvite() {
        console.log('去邀请逻辑》》》')
      },

      // 去打卡 按钮
      handleClock() {
        let cb = this.goToClock;
        this.handleLoginCheck(cb);
      },
      goToClock() {
        console.log('执行打卡逻辑');
      },

      // 每个任务的跳转点击
      handleTaskClick() {
        let cb = this.goToTask;
        this.handleLoginCheck(cb);
      },
      goToTask() {
        console.log('do每个任务的跳转逻辑')
      },


      // request
      getDoctorInfo() {

      },

    },  
  }
</script>>

<style lang="less">
  @import '../assets/style/in-activity.less';
</style>