<!--个人安全学习-->
<template>
  <div class="app-container safeLearning">
    <div class="list-max-big-box" v-if="pageType == 1">
      <div class="top-max-box">
        <div class="left-max-box">
          <div class="left-tree-box scrollbar-box">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              :highlight-current="true"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
          <!--<p class="left-tree-bottom-button inquire-button-one" @click="goPage(2)">学习记录</p>-->
        </div>
        <div class="center-max-box">

        </div>
        <div class="right-max-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="课程名称" prop="title" label-width="80px">
              <el-input
                v-model="queryParams.title"
                placeholder="请输入课程名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" @click="handleQuery">查询</p>
              <p class="reset-button-one" @click="resetQuery">重置</p>
            </el-form-item>
          </el-form>
          <div class="min-list-box">
            <el-table v-loading="loading" border :data="el_courseList">
              <el-table-column label="课程名称" align="left" prop="title" :show-overflow-tooltip="true"/>
              <el-table-column label="分类" align="left" prop="cateTitle" width="200"/>
              <el-table-column label="章节数" align="left" prop="chapters" width="100"/>
              <el-table-column label="时长" align="left" prop="durations" width="100">
                <template slot-scope="scope">{{scope.row.hour>0?scope.row.hour+'小时':''}}{{scope.row.minute>0?scope.row.minute+'分钟':''}}{{scope.row.second>0?scope.row.second+'秒':''}}</template>
              </el-table-column>
              <el-table-column label="上传时间" align="left" prop="createTime" width="180"/>
              <el-table-column label="查看次数" align="left" prop="accessNum" width="100"/>
<!--  learnStatus    accessStatus        -->
              <el-table-column label="状态" align="left" prop="learnStatus" width="100">
                <template slot-scope="scope">
                  <span style="color: #0183FA" v-if="scope.row.learnStatus==0">学习中</span>
                  <span  v-if="scope.row.learnStatus==2">未学习</span>
                  <span style="color: #FF9600" v-if="scope.row.learnStatus==3">待考核</span>
                  <span style="color: #19AD1D" v-if="scope.row.learnStatus==1">已完成</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="110">
                <template slot-scope="scope">
                  <div style="display: flex">

                    <p class="table-min-button"
                       @click="goPage(3,scope.row.id)"
                    >点击查看</p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bottom-max-box">
        <pagination
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!--<record-list-page v-if="pageType == 2"></record-list-page>-->
    <start-learning :infoId="infoId" v-if="pageType == 3"></start-learning>
  </div>
</template>

<script>
  import { listEl_category} from "@/api/exam/el_category";
  import {courseList, listEl_course,} from "@/api/myPage/safeLearning";
  // import recordListPage from "./recordListPage";
  import startLearning from "./startLearning";
  export default {
    name: "index",
    components: {
      // recordListPage,
      startLearning
    },
    data() {
      return {
        //页面状态
        pageType: 1,
        //树数据
        treeData:[],
        defaultProps: {
          children: "children",
          label: "title"
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 学习资源表格数据
        el_courseList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          title:'',
        },
        //详情id
        infoId:"",
        //页面返回参数判断
        pageId:"",
      }
    },
    created() {
      this.getTreeData();
      if(localStorage.getItem('startLearningInfoId')){
        this.infoId = localStorage.getItem('startLearningInfoId');
        this.pageId = 1;
        this.pageType = 3;
        localStorage.removeItem('startLearningInfoId');
      }
    },
    methods: {
      //页面切换
      goPage(type,id){
        if(type == 1){
          this.pageType = 1;
          this.getList();
        }else if(type == 2){
          this.pageType = 2;
        }else if(type == 3){
          this.infoId = id;
          this.pageId = 1;
          this.pageType = 3;
        }else if(type == 4){
          this.infoId = id;
          this.pageId = 2;
          this.pageType = 3;
        }
      },
      outPage(){
        if(this.pageId == 1){
          this.pageType = 1;
        }else if(this.pageId == 2){
          this.pageType = 2;
        }
      },
      /** 查询分类树 */
      getTreeData() {
        this.loading = true;
        listEl_category({},2).then( response => {
          let list = [];
          let obj = {
            children:[],
            title:"所有分类",
            id:"",
          };
          list.push(obj);
          for(let i=0;i<response.data.length;i++){
            list.push(response.data[i]);
          }
          this.treeData =  list;
          this.getList();
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.cateId = data.id;
        this.getList();
      },
      /** 查询学习资源列表 */
      getList() {
        let self = this;
        this.loading = true;
        this.queryParams.status = 1;
        courseList(this.queryParams).then( response => {
          this.el_courseList =  response.rows;
          for(let i=0;i<self.el_courseList.length;i++){
            let hour = parseInt(self.el_courseList[i].durations/3600);
            let hourNum = self.el_courseList[i].durations - this.accMul(hour,3600);
            let minute = parseInt(hourNum/60)
            let second = hourNum - this.accMul(minute,60);
            self.el_courseList[i].hour = hour;
            self.el_courseList[i].minute = minute;
            self.el_courseList[i].second = second;
          }
          this.total =  response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.$set(this,'queryParams',{
          pageNum: 1,
          pageSize: 10,
          title:"",
          cateId:"",
        });
        this.handleQuery();
      },
      //乘法
      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">
  .safeLearning{
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .list-max-big-box{
      flex:1;
      display: flex!important;
      flex-direction: column;
      padding:20px!important;
      overflow: hidden;
      .top-max-box{
        flex:1;
        display: flex;
        overflow: hidden!important;
        .left-max-box{
          width:250px;
          display: flex;
          flex-direction: column;
          .left-tree-box{
            flex:1;
          }
          .left-tree-bottom-button{
            width:120px;
            margin:20px auto 0;
          }
        }
        .center-max-box{
          border-right:2px dashed #E0E0E0;
          margin-right:30px;
          margin-top:20px;
        }
        .right-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden!important;
          .min-list-box{
            flex: 1;
            overflow: hidden!important;
            display: flex;
            margin-bottom:15px;
            .button-box{
              width:300px;
              display: flex;
            }
          }
        }
      }
      .bottom-max-box{
        height:50px;
      }
    }
  }
</style>
