<!-- 学习课件 -->
<template>
  <div class="learningMaterials">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">开始学习</p>
      <p class="top-2-p" @click="backPage()">返回</p>
    </div>
    <div class="content-box">
      <div class="left-max-big-box">

      </div>
      <div class="right-max-big-box">
        <p class="title-p">{{learningData.data1}}</p>
        <div class="text-p" style="color:#666;">{{learningData.data2}}分钟丨{{learningData.data3}}学时丨{{learningData.data4}}积分</div>
        <div class="text-p">已学 {{learningData.data5}} / 总 {{learningData.data6}} 课件</div>
        <div class="progress-box">
          <p class="progress-title-box">学习进度</p>
          <div class="progress-min-box">
            <el-progress :stroke-width="12" :percentage="learningData.data7"></el-progress>
          </div>
        </div>
        <div class="learning-for-max-big-box scrollbar-box">
          <div class="for-max-big-box"
               v-for="(item,index) in learningData.dataList" :key="index">
            <div class="for-big-box" @click="checkLearningButton(index)"
                 :class="checkLearningIndex == index ?'check-for-box':''">
              <p>{{item.listData1}}</p>
              <p>已学习：{{formatTime(item.listData3)}} / {{formatTime(item.listData4)}}</p>
              <p :class="item.listData5 ==1 ?'colorA':''">{{item.listData5==1?'已学完':'未学完'}}</p>
            </div>
            <p class="for-button" @click="finishStudying(index)"
               v-if="item.listData5 == 0 && item.listData3 == item.listData4 && checkLearningIndex == index">
              若已完成学习，请点此确认
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        learningData:{
          data1:"课程名称",
          data2:"20",
          data3:"1",
          data4:"3",
          data5:"0",
          data6:"2",
          data7:"20",
          dataList:[
            {
              listData1:'课件名称',
              listData2:1,
              listData3:320,
              listData4:600,
              listData5:0,
            },
            {
              listData1:'课件名称',
              listData2:1,
              listData3:600,
              listData4:600,
              listData5:0,
            },
            {
              listData1:'课件名称',
              listData2:1,
              listData3:600,
              listData4:600,
              listData5:1,
            },
          ],
        },
        checkLearningIndex:0,

      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      /*
      this.$router.push({
        name: 'Detail',
        params: {
          id: 1,
          title: '消息标题'
        }
      })
      this.$route.params.title
      */
      //返回
      backPage() {
        this.$router.back()
      },
      //完成课件学习
      finishStudying(index){
        let self = this;
        this.$confirm('确认完成课件学习?', "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {

        }).catch(() => {});
      },
      //切换课件
      checkLearningButton(index){
        let self = this;
        if(this.checkLearningIndex != index){
          this.$confirm('确认切换课件?', "警告", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            self.$set(self,'checkLearningIndex',index);
          }).catch(() => {});
        }
      },
      //时间换算
      formatTime(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return '0秒';
        }
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        if (minutes > 0 && seconds > 0) {
          return `${minutes}分${seconds}秒`;
        } else if (minutes > 0 && seconds === 0) {
          return `${minutes}分`;
        } else {
          return `${seconds}秒`;
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .learningMaterials {
    flex:1;
    display: flex;
    flex-direction: column;
    background:#FFFFFF;
    border-radius:10px;
    overflow: hidden;
    padding:0;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    margin:10px;
    .content-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .left-max-big-box{
        flex:1;
        background-color: #dedede;
        margin:40px 20px;
        border-radius:10px;
        overflow: hidden;
      }
      .right-max-big-box{
        padding:40px 0;
        width:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .title-p{
          font-size:16px;
          font-weight:700;
          line-height:30px;
          padding:0 20px;
        }
        .text-p{
          font-size:14px;
          line-height:20px;
          margin-bottom:20px;
          padding:0 20px;
        }
        .progress-box{
          width:400px;
          height:20px;
          display: flex;
          padding:0 20px;
          .progress-title-box{
            font-size:14px;
            line-height:20px;
            font-weight:700;
          }
          .progress-min-box{
            flex:1;
            padding:0 0 0 20px;
            .el-progress{
              margin-top:1px;
            }
          }
        }
        .learning-for-max-big-box{
          flex:1;
          display: flex;
          flex-direction: column;
          padding:0 20px;
          .for-max-big-box{
            margin-top:40px;
            .for-big-box{
              cursor: pointer;
              border-radius:6px;
              border:1px solid #666;
              padding:15px 10px;
              position: relative;
              p{
                line-height:30px;
              }
              p:nth-child(1){
                font-size:16px;
                font-weight:700;
                /*单行省略号*/
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(2){
                font-size:14px;
              }
              p:nth-child(3){
                font-size:14px;
                position: absolute;
                bottom: 16px;
                right: 16px;
                color:#fff!important;
                background-color: #999;
                border-radius:4px;
                width:60px;
                line-height:24px;
                text-align: center;
              }
              .colorA{
                background-color: #0183fa!important;
              }
            }
            .for-button{
              margin-top:20px;
              background-color: #13CE66;
              color:#fff;
              text-align: center;
              line-height:30px;
              border-radius:4px;
              cursor: pointer;
              font-size:14px;
            }
            .check-for-box{
              background-color: rgba(1,131,250,0.1);
              border:1px solid #0183fa!important;
              p{
                color:#0183fa!important;
              }
            }
          }
        }
      }
    }
  }
</style>
