<!--学习记录详情-->
<template>
  <div class="learningRecord">
    <div v-if="pageType == 1">
      <div style="display: flex">
        <p style="flex:1;"></p>
        <p class="reset-button-one" style="margin:20px 20px 0 0;" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="learn-list scrollbar-box">
        <div class="course-info">
          <div class="name-max-box">
            <p>{{infoData.title}}{{infoData.cateTitle}}</p>
            <p>已学习时长：{{infoData.learnDurationStr}}</p>
          </div>
          <div class="time-box">
            <div>
              <img src="@/assets/ZDimages/icon_ksxt_xxsc.png">
              <p>课程时长：{{infoData.durationStr}}</p>
            </div>
            <div>
              <img src="@/assets/ZDimages/icon_ksxt_yxq.png">
              <p>有效期：{{infoData.ceType==0?'永久有效':infoData.ceTime}}</p>
            </div>
          </div>
          <p class="num-p">已有{{infoData.learns}}人学习</p>
        </div>
        <div class="for-chapter-box" v-for="(item,index) in infoData.chapterList" v-if="item.children[0]">
          <div class="title-max-p">
            <p class="position-p">{{index+1}}</p>
            <p class="title-p">{{item.title}}</p>
          </div>
          <div class="for-festival-max-box">
            <div class="for-festival-box" v-for="(minItem,minIndex) in item.children">
              <p class="festival-p"></p>
              <p class="name-p">{{minItem.title}}</p>
              <p class="time-p" v-if="minItem.duration>0">时长：{{minItem.hour>0?minItem.hour+'小时':''}}{{minItem.minute>0?minItem.minute+'分钟':''}}{{minItem.second>0?minItem.second+'秒':''}}</p>
              <p class="null-p"></p>
              <img v-if="minItem.learnStatus == 1 && minItem.assessStatus==1" class="festival-img" src="@/assets/ZDimages/icon_xxjl_ywc.png"><!--已完成-->
              <img v-if="minItem.learnStatus == 1 && minItem.assessStatus==0" class="festival-img" src="@/assets/ZDimages/icon_xxjl_dkh.png"><!--待审核-->
              <img v-if="minItem.learnStatus == 0" class="festival-img" src="@/assets/ZDimages/icon_xxjl_xxz.png"><!--学习中-->
              <p class="button-right-p" v-if="minItem.hasAssess>0" @click="goAssessList(minItem,infoData.cateTitle)">考核记录</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <assessList v-if="pageType == 2" :chapterId="chapterId" :cateTitle="cateTitle"></assessList>
  </div>
</template>

<script>
  import assessList from './assessList.vue'
  import { getLearnInfo } from "@/api/myPage/safeLearning";
  export default {
    name: "learningRecord",
    components: {
      assessList
    },
    props:{
      infoId:{},
    },
    data() {
      return {
        pageType:1,
        infoData:{},
        chapterId:"",
        cateTitle:"",
      }
    },
    created(){
      console.log(this.infoId);
      // this.id = this.$route.query.id;
      this.getInfo();
      // console.log("课程id",this.$route.query.id);
    },
    methods:{
      offMinPage(){
        this.pageType = 1;
      },
      goAssessList(minItem,cateTitle){
        this.chapterId = minItem.id;
        this.cateTitle = cateTitle;
        this.pageType = 2;
      },
      //退出上一页
      backPage(){
        this.$parent.outPage();
      },
      /** 查询分类树 */
      getInfo() {
        let self = this;
        getLearnInfo(this.infoId).then( res => {
          let newList = res.data;
          for(let i=0;i<newList.chapterList.length;i++){
            for(let o=0;o<newList.chapterList[i].children.length;o++){
              let hour = parseInt(newList.chapterList[i].children[o].duration/3600);
              let hourNum = newList.chapterList[i].children[o].duration - this.accMul(hour,3600);
              let minute = parseInt(hourNum/60);
              let second = hourNum - this.accMul(minute,60);
              newList.chapterList[i].children[o].hour = hour;
              newList.chapterList[i].children[o].minute = minute;
              newList.chapterList[i].children[o].second = second;
            }
          }
          self.infoData = newList;
          console.log("newList",newList);
        });
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    },
  }
</script>

<style scoped lang="scss">
  .learningRecord{
    /*height:100%;*/
    /*width:100%;*/
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
      padding:0;
      font-weight:500;
      color:#333;
    }
    .learn-top-user-info-box{
      display: flex;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      .logo-img{
        height:57px;
        width:57px;
        margin:21px 20px 0 40px;
      }
      .title-p{
        width: 300px;
        font-size:18px;
        font-weight:700;
        line-height:100px;
      }
      .time-p{
        flex:1;
        font-weight:700;
        line-height:100px;
        font-size:14px;
      }
      .home-box{
        width:100px;
        display: flex;
        margin-top:35px;
        margin-right:30px;
        img{
          width:30px;
          height:30px;
          margin-right:20px;
        }
        p{
          line-height:30px;
        }
      }
      .user-box{
        min-width:100px;
        display: flex;
        margin-top:35px;
        margin-right:30px;
        img{
          width:30px;
          height:30px;
          margin-right:20px;
        }
        p{
          line-height:30px;
        }
      }
      .button-p{
        width:82px;
        height:34px;
        background: #0045af;
        color:#fff;
        text-align: center;
        line-height:34px;
        margin:33px 20px 0 0;
        border-radius:4px;
        cursor:pointer;
      }
    }
    .learn-list{
      flex:1;
      overflow-y:scroll;
      margin:0;
      padding:9px 0 20px;
      /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
      .course-info{
        .name-max-box{
          display: flex;
          margin:0 42px;
          p{
            flex:1;
            font-size:18px;
            line-height:52px;
            font-weight:700;
          }
          p:nth-child(1){
            color:#333;
          }
          p:nth-child(2){
            text-align: right;
            color:#0183fa;
          }
        }
        .time-box{
          display: flex;
          margin:0 40px;
          div{
            display: flex;
            margin-right:100px;
            img{
              width:20px;
              height:20px;
              margin:15px 10px 0 0;
            }
            p{
              line-height:50px;
              font-size:16px;
              color:#333;
              font-weight:700;
            }
          }
        }
        .num-p{
          font-size:16px;
          line-height:52px;
          margin:0 40px;
          padding-bottom:10px;
          color:#0183fa;
          font-weight:700;
          border-bottom:3px dashed #dedede;
        }
      }
      .for-chapter-box{
        margin:5px 0 20px;
        .title-max-p{
          display: flex;
          .position-p{
            width:80px;
            height:50px;
            line-height: 50px;
            text-align: center;
            background: #0045af;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            color:#fff;
            font-size:24px;
            margin-top:15px;
            margin-right:37px;
          }
          .title-p{
            line-height:85px;
            font-size:19px;
            p{
              color:#02A7F0;
              text-align: right;
              margin-right:20px;
              flex:1;
            }
          }
        }
        .for-festival-max-box{
          padding:10px 0;
          background: #eaf5ff;
          margin:0 120px;
          .for-festival-box{
            padding:0 10px;
            display: flex;
            .festival-p{
              border-radius:50%;
              width:18px;
              height:18px;
              margin:26px 21px 0 38px;
              background: #349cfb;
            }
            .name-p{
              line-height: 67px;
              font-size:17px;
              color:#349cfb;
              width:550px;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .time-p{
              width:400px;
              line-height: 67px;
              font-size:16px;
            }
            .null-p{
              flex:1;
            }
            .festival-img{
              height:52px;
              width:60px;
              margin:7px 54px 0 0;
            }
            .button-right-p{
              margin:13px 28px 0 0;
              line-height:40px;
              width:120px;
              height:40px;
              font-size:16px;
              text-align: center;
              color:#fff;
              background: #349cfb;
              border-radius:10px;
              cursor:pointer;
            }
          }
        }
      }
    }
  }
</style>
