<template>
  <div>
    <div class="paddingBox">
      <div class="title">请选择全勤打卡活动开始日期</div>
      <div class="tip">全勤打卡活动：全勤打卡返66云币奖学金</div>
      <div class="list_box">
        <div  v-for="(item,index) in can_select"  :class="istrue==index?'item sec':'item'" ref="item"  @click="secItem(item,index)" >
          <div class="text">
            <div class="title1">
              {{item.active_start_at_name}} 开始全勤打卡活动
            </div>
            <div class="title2">
              课程观看时间：{{item.course_start_at_name}}-永久
            </div>
          </div>
          <div class="imgbox">
            <img :src="item.icon" alt="">
          </div>
        </div>
        <div class="item full" v-for="(item,index) in can_not_select">
          <div class="text">
            <div class="title1">
              {{item.active_start_at_name}} 开始全勤打卡活动
            </div>
            <div class="title2">
              课程观看时间：{{item.course_start_at_name}}-永久
            </div>
          </div>
          <div class="imgbox">
            <img :src="fullUrl" alt="">
          </div>
        </div>
      </div>
    </div>
     <div class="fix">
        <div class="btn" ref="btn" @click="postYujiList()" >确定</div>
        <div class="tip" ref="tip" @click="showTipF">
          <i class="iconfont icon-dagou"></i>
          全勤打卡活动须知
        </div>
     </div>
     <mt-popup
      v-model="showShare"
      :closeOnClickModal="closeOnClickModal"
      class="refer-share"
      position="top">
      <div class="box">
        <h3>提示</h3>
          {{msg}}
        <div class="goIndex" @click="goIndex">
          查看课程
        </div>  
      </div>
    </mt-popup>
    <mt-popup
      v-model="showTip"
      class="refer-share"
      position="top">
      <div class="tipWord">
        <div class="colse-btn"><img :src="closeUrl"  @click="showTip=false"></div>
        <div>
          <h2>全勤打卡活动须知</h2>
          <p>钻石会员参与66云币奖学金活动规则</p>
          <p>在4月23日下单的钻石会员可参与奖学金活动。</p>
          <p>参与奖学金活动需完成两个任务：</p>
          <p>任务一：20天内集齐60课程星星</p>
          <p>自您选择的打卡开始日期起20天内，完成每节课3个模块的学习，点亮本节课3颗星星，20天内完成20节课学习，集齐60颗星星则视为任务一完成。</p>
          <p>任务二：云集发现社区打卡</p>
          <p>自您选择的打卡开始日期起20天内，在云集发现社区#我家英语小牛娃#话题下分享宝贝学习视频（1个即可），关联商品<复旦妈妈推荐的哈佛英语启蒙课>，则视为任务二完成。</p>
          <p>活动审核：</p>
          <p>完成以上两个任务后3日内，请将参与打卡的店铺id和订单号发送给客服，申请审核，自申请日起7个工作日内工作人员会完成审核和奖励发放。</p>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {getYujiListUrlApi,postYujiListApi,getCourseStatusApi} from "../../service/api";
  import closeUrl from '../../assets/newLesson/audio-close.png'
  import fullUrl from '../../assets/full.png'
  import { Toast } from 'vant';
  import common from '../../util/common'
  export default {
    name: "inspectorList",
    mounted(){
      this.$sa.track('ViewSelectdatepage',{
      });
      getCourseStatusApi().then(res => {
        if(res.status==1||res.status==2){
          this.$router.replace({ name: "index" });
          //  debugger
        }else if(res.status==3){
          this.msg = res.msg
          Toast(this.msg)
        }else if(res.status==4){
          this.$router.replace({ name: "inspectorActivit" });
        }
        console.log(res)
      })
      this.getYuji()
    },
    data(){
      return {
        istrue:0,
        can_select:[],
        can_not_select:[],
        secItems:{},
        showShare:false,
        showTip:true,
        closeOnClickModal:false,
        msg:"",
        closeUrl:closeUrl,
        fullUrl:fullUrl
      }
    },
    methods:{
      showTipF(){
        this.$sa.quick('trackHeatMap',this.$refs.tip)
        this.showTip=true
      },
      goIndex(){
        this.$router.push({ name: "index" });
      },
      getYuji(){
        getYujiListUrlApi().then(res=>{
          this.can_select = res.can_select
          if(res.can_select){
           this.secItems = this.can_select[0]
          }
          this.can_not_select = res.can_not_select
          console.log(res)
        })
      },
      secItem(item,index){
        this.istrue = index
        this.secItems = item
        this.$sa.quick('trackHeatMap',this.$refs.item)
      },
      postYujiList(){
        this.$sa.quick('trackHeatMap',this.$refs.btn)
        postYujiListApi(this.secItems.periods_id).then(res=>{
          this.$masseges
          // Toast("提交成功")
          this.$router.push({ name: "index" });
          console.log(res)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .paddingBox{
     padding: 24*@toVw 20*@toVw 110*@toVw;
    .title{font-size: 24*@toVw;font-weight: 600;line-height: 33*@toVw;}
    .tip{font-size: 12*@toVw;line-height: 17*@toVw;color:rgba(153,153,153,1);margin: 8px 10px 14px 0;}
    .item{display: flex;border:1px dashed black;padding: 20*@toVw 18*@toVw;margin-bottom:5px;
    .text{
      margin-left: 0;
      .title2{color: #666666;line-height: 25*@toVw;}
      }
    .imgbox{
      margin-right: 10*@toVw;
      img{width:44*@toVw ; height: 55*@toVw;}
    } 
   }
   .sec{border:2px solid #FF7875;}
   .full{
     .text{
      .title1{color: #999999;line-height: 25*@toVw;}
      .title2{color: #999999;line-height: 25*@toVw;}
      }
      .imgbox{
      margin-right: 10*@toVw;
      img{width:50*@toVw ; height: 50*@toVw;}
    } 
   }
  }
  .fix{
    position: fixed;text-align: center;width: 100%;bottom: 0;padding:10px 0;background: white;
    .btn{width: 273*@toVw;height: 47*@toVw;background:#FF7875;color: white;line-height:47*@toVw; border-radius: 4px; }
    .tip{
      color:rgba(153,153,153,1);font-size: 12px;line-height: 30px;
      .iconfont{font-size: 12px;}
      }
  }
  .refer-share{

    .box{
    position: fixed;top: 50%;height: 200px;width: 200px;background: white;left: 50%;padding: 20px;transform: translate(-120px,120px);border-radius: 20px;
    h3{text-align: center;margin-bottom: 30px;}
    .goIndex{width: 180px;height: 30px;border-radius: 15px;border:1px solid #999999;line-height: 30px;text-align: center;margin-top: 30px; } 
     }
     .tipWord{
       height: 80vh;
       overflow-y:scroll;
      .colse-btn{
        background: white;
        position: fixed;
        top: 50*@toVw;
        right: -119*@toVw;  
      img{width: 20px;}
      }
       background: white;top: 6vh;position: absolute;width: 80vw;left: -40vw;padding: 20px;box-sizing: border-box;line-height: 26px;
       p{margin-bottom: 6px;color: #666666;font-size: 12px;}
       h2{font-size: 18px;margin-bottom: 6px;text-align: center;}
      }
  } 
  
</style>
