<!--个人学习记录-->
<template>
  <div class="app-container recordListPage">
    <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">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              :highlight-current="true"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              node-key="id"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"/>
          </div>
        </div>
        <div class="center-max-box">

        </div>
        <div class="right-max-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <div >
              <el-form-item label="课程名称" prop="courseTitle" label-width="80px">
                <el-input
                  v-model="queryParams.courseTitle"
                  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>
              <!--<p style="flex:1;"></p>-->
              <!--<el-form-item class="button-box">-->
                <!--&lt;!&ndash;<p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>&ndash;&gt;-->
              <!--</el-form-item>-->
            </div>
          </el-form>
          <div class="min-list-box">
            <el-table v-loading="loading" border :data="el_courseList">
              <el-table-column label="课程名称" align="left" prop="courseTitle"  :show-overflow-tooltip="true"/>
              <el-table-column label="分类" align="left" prop="cateTitle" width="200"/>
              <el-table-column label="学习时间" align="left" prop="learnTime" width="200"/>
              <el-table-column label="学习时长" align="left" prop="learnDuration" 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+'秒':''}}{{scope.row.hour+scope.row.minute+scope.row.second>0?'':'未学习'}}</template>
              </el-table-column>
              <el-table-column label="奖励积分" align="left" prop="bonusPoints" width="100"/>
              <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 class="table-button-box">
                    <p class="table-button-null"></p>
                    <p class="table-button-p"
                       @click="clickInfo(scope.row)"
                    >点击查看</p>
                    <p class="table-button-null"></p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bottom-max-box">
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="recirdGetList"
        />
      </div>
    </div>
    <learning-record :infoId="infoId" v-if="pageType == 2"></learning-record>
  </div>
</template>

<script>
  import { listEl_category} from "@/api/exam/el_category";
  import { getLearnList } from "@/api/myPage/safeLearning";
  import learningRecord from "../safeLearning/learningRecord";
  export default {
    name: "recordListPage",
    components: {
      learningRecord
    },
    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:20,
          name:null,
        },
        //详情id
        infoId:"",
      }
    },
    created() {
      this.getTreeData();
    },
    methods: {
      //查看详情
      clickInfo(row){
        this.infoId = row.courseId;
        this.pageType = 2;
        console.log('查看详情',row)
      },
      outPage(){
        this.pageType = 1;
      },
      /** 查询分类树 */
      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.recirdGetList();
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.cateId = data.id;
        this.recirdGetList();
      },
      /** 查询学习资源列表 */
      recirdGetList() {
        let self = this;
        this.loading = true;
        getLearnList(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].learnDuration/3600);
            let hourNum = self.el_courseList[i].learnDuration - 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.recirdGetList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.$set(this,'queryParams',{
          pageNum: 1,
          pageSize:20,
          courseTitle:"",
          cateId:""
        });
        this.$refs.tree.setCurrentKey();
        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">
  .recordListPage{
    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>
