<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>
    </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 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 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">0</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名-</p>
            <div 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">0</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">排名-</p>
            <div class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
          </li>
        </ul>
        <p class="score-tips">再获得10勤奋分即可上升到前10名获得欧姆龙温度计</p>
        <div class="bean-wrap">
          <p class="personal-total-get">累计个人获得：<span>999999云鹊豆</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>达2000分</li>
            <li>达3000分</li>
            <li>达5000分</li>
            <li>12月30日</li>
          </ul>
        </div>
      </div> -->

      <!-- 未登录 -->
      <div class="not-login-wrap">
        <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>

    </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>
            <div class="add-btn">
              <img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
            </div>
            <!-- 注意 默认头像 -->
            <!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">    -->
            <p class="text">185****7666</p>
          </li>
          <li>
            <div class="add-btn">
              <img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
            </div>
            <!-- 注意 默认头像 -->
            <!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">    -->
            <p class="text">185****7666</p>
          </li>
          <li>
            <div class="add-btn">
              <img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
            </div>
            <!-- 注意 默认头像 -->
            <!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">    -->
            <p class="text">185****7666</p>
          </li>
          <li>
            <div class="add-btn">
              <img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
            </div>
            <!-- 注意 默认头像 -->
            <!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">    -->
            <p class="text">185****7666</p>
          </li>
          <!-- 查看更多 -->
          <li>
            <div 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 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 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 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 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>
  export default {
    data () {
      return {
        clockSuccessVisible: false,
        activityEndVisible: false,
      }
    },
    methods: {
      // 活动规则
      handleRuleBtnClick() {
        alert('跳转至 活动规则页面')
      },
    },  
  }
</script>>

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