<template>
  <div class="keep-learn">
    <div v-show="isShow" class="border-bottom keep-learnbox">
      <div class="learning-txt">
        <div class="gray keepon-title">{{parmObj.name || '糖尿病诊疗'}}</div>
        <div class="keepon-txt">
          <span class="gray fs24 keepon-right">已学习：{{parmObj.day}} 天</span>
          <span class="gray fs24 keepon-right">剩余：{{parmObj.remanentCourseNum}}%</span>
          <span class="gray fs24 continue-study" @click="continueStudy(parmObj)">继续学习></span>
        </div>
        
      </div>
      <span class="close-m">
        <img @click="cancel" src="../../images/close.png"/>
      </span>

    </div>
  </div>
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
  name: 'YqyHomeKeepon',
  data(){
    return {
      isShow: true,
      parmObj:{}
    }
  },
  props:{
    userMobile:{
      default:'',
      type:String
    },
    userToken:{
      type:String,
      default:''
    }
  },
  mounted(){
   

    if(this.userMobile != ''){
      this.getData();
    }else{
      this.isShow = false;
    }
    
  },
  methods: {
    continueStudy(item){
      
      this.pageBurialPoin({
          menuLevel:1,
          menuCode:'m_home',
          functionCode:'f_course',
          actionCode:'c_play',
          labelId:itemData.id,
          //labelvalue:itemData.name,
      })
      let itemData={
          "title":item.name,
          "imageUrl":"",
          "appModuleInfo":{
              "code":"M200",
              "type":4,
              "name":"课程介绍页",
              "paramFlag":1,
              "paramList":[
                  {
                      "key":"className",
                      "value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
                      "type":4,
                      "seqNo":1
                  },
                  {
                      "key":"courseId",
                      "value":`${item.id}`,
                      "type":1,
                      "seqNo":2
                  }
              ]
          }
      };
      let paramList = this.setEventByModuleCode(itemData);
      rocNative.dispatchEventByModuleCode({
          modeCode: itemData.appModuleInfo.code,
          jsonString: paramList
      });
      this.isShow = false;
    },
    cancel(){
      this.pageBurialPoin({
          menuLevel:1,
          menuCode:'m_home',
          functionCode:'f_course',
          actionCode:'c_close',
          //labelId:itemData.id,
          //labelvalue:itemData.name,
      })
      this.isShow = false
    },
    getData(){
      let _this = this,
      parm = {
       
        token:_this.userToken,
        setEntry: 'headers'
      }
      _this.GET('contents/courses/continueLearningCourse',parm).then(function(res){

        if(res.code === '000000'){
          _this.parmObj =  res.data && res.data.continueLearningCourseModel || {};

          if(_this.parmObj.remanentCourseNum == 0){
            _this.isShow = false;
          }else{
            _this.isShow = _this.parmObj.showFlag ? true : false;
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keep-learn{
  width: 100%;
  padding: 0 px2rem(15px);
  margin-top: px2rem(15px);

  .keep-learnbox{
   
    padding: px2rem(10px);
    position: relative;
  }
  .border-bottom{
    width: 100%;
    border-bottom: 1px solid RGBA(231, 231, 231, 1);
    padding-bottom: px2rem(10px);
  }
  .keepon-title{
    font-size: px2rem(14px);
    color:#666;
    line-height: px2rem(19px);
  }
  .keepon-txt{
    margin-top:px2rem(5px);
    line-height: px2rem(17px);
    height: px2rem(17px);
    span{
      float: left;
    }
  }
  .continue-study{
    color: RGBA(31, 121, 115, 1);
  }
  .keepon-right{
    margin-right: px2rem(15px);
  }
  .learning-txt{
    position: relative;
  }
  .close-m{
    position: absolute;
    width: px2rem(25px);
    height: px2rem(25px);
    display: inline-block;
    right: px2rem(10px);
    top:50%;
    margin-top:-(px2rem(8px));
    img{
      width: 100%;
      display: block;
    }
  }
}
</style>
