<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2022-08-25 15:01:55
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-25 17:48:55
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails.vue
 * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
-->
<template>
  <div class="app-main">
    <section class="base-info-wrap">
      <div class="app-main-box u-flex u-col-top u-row-between">
        <div class="base-info-left u-flex u-col-top">
          <el-image
            style="width: 260px; height: 260px"
            :src="details.img"
            fit="cover"
          ></el-image>
          <div class="text">
            <div class="text-item name">{{ details.name }}</div>
            <div class="text-item u-flex">
              <span>难度：</span>
              <el-rate v-model="details.difficult" disabled></el-rate>
            </div>
            <div class="text-item">培训学校：{{ details.schoolName }}</div>
            <div class="text-item">培训导师：{{ details.teacherName }}</div>
            <div class="text-item">培训周期：{{ details.cycle }}</div>
            <div class="text-item">报名人数：{{ details.applyCount }}</div>
            <div class="text-item">开班时间：{{ details.openingTime }}</div>
            <div class="text-item progress">
              <div>学习进度</div>
              <el-progress
                :percentage="details.finishPercent || 0"
              ></el-progress>
            </div>
          </div>
        </div>
        <div class="base-info-right">
          <div class="certificate" @click="jumpPage('/achievementCertificate')">
            <div class="img-wrap u-flex u-row-center">
              <el-image
                :src="require('@/assets/images/certificate-icon.svg')"
                style="width: 48px; height: 58px"
              ></el-image>
            </div>
            <span class="certificate-text">成绩与证书</span>
          </div>
        </div>
      </div>
    </section>
    <div class="app-main-box">
      <div class="app-main-box-content">
        <el-tabs
          v-model="classTypeActive"
          @tab-click="classTypeClick"
        >
          <el-tab-pane
            v-for="(item, index) in classTypeList"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
            <div class="" v-if="classTypeActive==0">
            <el-row :gutter="16" v-if="onLineCourselist && onLineCourselist.length">
              <el-col
                class="course-item"
                :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="12"
                v-for="(item, index) in onLineCourselist"
                :key="index"
              >
                <div @click="jumpPage('/coursevideo',{id:item.id})" class="course u-flex u-row-between" >
                  <div class="left u-flex">
                    <el-image
                        style="width: 87px; height: 65px"
                        :src="item.img"
                        fit="cover"
                    ></el-image>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
                    </div>
                  </div>
                  <div class="right">
                    
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-else description="暂无线上课程"></el-empty>
            </div>
            
            <div class="" v-if="classTypeActive==1">
             <el-row :gutter="16" v-if="offLineCourselist && offLineCourselist.length">
              <el-col
                class="course-item"
                :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="12"
                v-for="(item, index) in onLineCourselist"
                :key="index"
              >
                <div @click="goDetails(item.id)" class="course u-flex u-row-between" >
                  <div class="left u-flex">
                    <el-image
                        style="width: 87px; height: 65px"
                        :src="item.img"
                        fit="cover"
                    ></el-image>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div class="info">{{` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% `}}</div>
                    </div>
                  </div>
                  <div class="right">
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-else description="暂无线下课程"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getTrainDetail } from "@/api/SkillTraining";
export default {
  name: "",
  components: {},
  data() {
    return {
        classTypeActive:0,
        details: {},
        classTypeList:[
            {label:'线上课程',name:'0'},
            {label:'线下实训',name:'1'},
        ],
        onLineCourselist:[],
        offLineCourselist :[]
    };
  },
  created() {
    this.handleGetTrainDetail();
  },
  methods: {
    handleGetTrainDetail() {
      getTrainDetail({ id: this.$route.query.id }).then((res) => {
        this.details = res?.data;
        this.onLineCourselist = this.details.onLineCourselist;
        console.log("getTrainDetail", res);
      });
    },
    classTypeClick(){

    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path, param) {
      if (path) {
        this.$router.push({ path: path, query: param });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.base-info-wrap .app-main-box {
  margin-top: 0;
}
.app-main > .app-main-box{
    min-height: calc( 100vh - 73px - 400px - 100px - 23px);
}
.base-info-wrap {
  background: #43565f;
  padding: 35px 0 100px;
  .base-info-left {
    // width: 60%;
    .text {
      // width: 80%;
      margin-left: 30px;
      .text-item {
        color: #fff;
        font-size: 16px;
        margin-bottom: 5px;
      }
      .name {
        font-size: 20px;
        margin-bottom: 25px;
      }
      .progress {
        margin-top: 20px;
      }
    }
  }

  .base-info-right {
    .certificate {
      background: #6a767d;
      width: 88px;
      overflow: hidden;
      border-radius: 4px;
      text-align: center;
      .img-wrap {
        text-align: center;
        height: 80px;
        background: #fff;
      }
      .certificate-text {
        color: #fff;
        font-size: 14px;
        line-height: 35px;
      }
    }
  }
}
.course{
    cursor: pointer;
    padding: 20px;
    margin-bottom: 20px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    transition: all 0.3s;
    &:hover{
        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.11);
    }
    .text{
        color: #666;
        margin-left: 15px;
        font-size: 14px;
        .name{
            font-size: 20px;
            margin-bottom: 10px;
            color: #222;
        }
    }
}
:deep(.el-tabs){
    &::after{
        background-color: transparent;
    }
    .el-tabs__nav-wrap{
        &::after{
            background-color: transparent;
        }
    }
    .el-tabs__header{
        margin-bottom: 48px;
    }
    .el-tabs__item{
        font-size: 20px;
        &.is-active,&:hover{
            color: #416050;
        }
    }
    .el-tabs__active-bar{
        background-color: #416050;
    }
}
</style>