<template>
    <div class="home">
      <!-- 任务进度条 -->
      <el-card class="task-process">
        <div class="task-item active">
          <div class="task-icon">
            <span class="circle">1</span>
          </div>
          <div class="task-text">任职申请</div>
        </div>
        <div class="line-horizontal"></div>
        <div class="task-item active">
          <div class="task-icon">
            <span class="circle">2</span>
          </div>
          <div class="task-text">学习考试</div>
        </div>
        <div class="line-horizontal"></div>
        <div class="task-item">
          <div class="task-icon">
            <span class="circle">3</span>
          </div>
          <div class="task-text">专业回馈</div>
        </div>
        <div class="line-horizontal"></div>
        <div class="task-item" >
          <div class="task-icon">
            <span class="circle">4</span>
          </div>
          <div class="task-text">个人行为举证</div>
        </div>
      </el-card>
      <!--申报页面-->
      <el-card v-if="isDeclared" class="declared-content">
        <div style="margin-bottom:20px;width: 100%;float: left">
          <label style="color: #000000; padding-top:8px; margin-bottom:40px; float: left">已经完成任职资格申请，请前往v学苑进行学习考试。(点击右侧图标进入V学苑)</label>
          <label style="color: #000000;margin-right: 20px;float: left">
            <a :href="yunUrl" target="_blank">
              <img src="@/assets/study.png" style="width: 36px"/>
            </a>
          </label>
        </div>
        <label style="color: #000000;margin-right: 20px;vertical-align: top; float: left">课程清单</label>
        <div style="width: 81%; float: left; border: 1px solid #EBEEF5; margin-bottom: 20px" >
          <div style="height:300px;overflow:auto">
            <el-tree
                class="filter-tree"
                :data="courseList"
                :props="defaultProps"
                default-expand-all
                ref="tree">
            </el-tree>
          </div>
        </div>
      </el-card>
      <!--未申报页面-->
      <el-card v-else class="undeclared-content">
        暂时未有需学习的任职资格序列申请，请先完成任职资格申请。
      </el-card>

    </div>
</template>
<script>
import {baseUrl, isLearningExamInProgress, yunUrl} from "@/api/userMG";

export default {
  computed: {
  },
  // 注册组件
  components: {
  },
  data() {
    return {
      yunUrl:yunUrl,
      url: baseUrl,
      sequence:'',
      level:'',
      isDeclared:true,
      courseList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    // 是否有学习中的任职资格申报
    isLearningExam() {
      isLearningExamInProgress({}).then(res => {
        let { code, msg, data } = res;
        if(code == 200) {
          this.isDeclared = true;
          const keys = Object.keys(data);
          for (let key = 0; key < keys.length; key++) {
            let dataItem = data[keys[key]]
            let courseList = []
            if(dataItem !== undefined && dataItem !== null && dataItem.tasks !== undefined && dataItem.tasks !== null){
              for (let i = 0; i < dataItem.tasks.length; i++) {
                let courseItem = {}
                let item = dataItem.tasks[i]
                courseItem.label = item.name
                courseItem.children = []
                if(item.kngs !==undefined && item.kngs !== null){
                  for (let j = 0; j < item.kngs.length; j++) {
                    let kng = item.kngs[j]
                    let kngLabel = kng.kngTitle
                    courseItem.children.push({label:kngLabel})
                  }
                }
                courseList.push(courseItem)
              }
            }else {
              courseList.push({label:'暂无课程信息'})
            }
            this.courseList.push({label:keys[key],children:courseList})
          }
        }else {
          this.isDeclared = false;
        }
      });
    }
  },
  created() {
    this.isLearningExam();
  }
};
</script>
<style lang="scss" scoped>
.home {
  margin-left: 2%;
  margin-right: 2%;
  width: 96%;
}
.task-process {
  //width: 100%;
  //display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 20px;
  padding-left: 15%;
  //height: 65px;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
  background-color: white;
}

.task-item {
  float: left;
  //display: flex;
  flex-direction: column;
  align-items: center;
}

.task-icon {
  text-align: center;
  font-size: 30px;
  color: #999;
  margin-bottom: 5px;
}

.task-text {
  font-size: 14px;
  color: #666;
  width: 90px;
  text-align: center;
}

.line-horizontal {
  float: left;
  width: 15%;
  height: 1px;
  background-color: #999;
  margin: 20px 0;
  position: relative;
}

.line-horizontal::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -10px;
  border: 5px solid transparent;
  border-left-color: #999;
  transform: rotate(0deg);
}

.active .task-icon {
  color: orangered;
}

.active .task-text {
  color: orangered;
}

.circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #999;
  text-align: center;
  line-height: 24px;
}

.active .circle {
  background-color: orangered;
  color: #fff;
}
.page-title{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.declared-content{
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}
.undeclared-content{
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}
.job-application{
  //display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}
.application-rule{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}
.application-item{
  padding-bottom: 10px;
}
.el-icon-success{
  color: green;
}
.el-icon-error{
  color: red;
}

.el-table__header .cell{
  color: #324C99;
  font-weight: bold;
}
.submit-btn{
  margin-top: 10px;
  margin-left: 45%;
}
</style>
