<!--学习记录-学生列表-->
<template>
  <div class="detail-page">
    <div class="detail-page-one" v-if="pageType==1">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item class="button-box" style="float: right">
          <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
        </el-form-item>
        <!--<el-form-item label="学院" prop="scopeType" label-width="90px">-->
          <!--<el-select v-model="queryParams.dictType" placeholder="请选择学院">-->
            <!--<el-option-->
              <!--v-for="item in deptOptions"-->
              <!--:key="item.deptId"-->
              <!--:label="item.deptName"-->
              <!--:value="item.deptId"-->
            <!--&gt;-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="专业" prop="scopeType" label-width="60px">-->
          <!--<el-select v-model="queryParams.dictType" placeholder="请选择专业">-->
            <!--<el-option-->
              <!--v-for="item in deptOptions"-->
              <!--:key="item.deptId"-->
              <!--:label="item.deptName"-->
              <!--:value="item.deptId"-->
            <!--&gt;-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item label="人员名称" prop="joinUserId" label-width="80px">
          <el-select
            v-model="queryParams.joinUserId"
            filterable
            remote
            clearable
            reserve-keyword
            @change="selectClick"
            @clear="clearClick"
            placeholder="请输入至少2个字符"
            :remote-method="userSelectList"
            :loading="loading">
            <el-option
              v-for="item in optionsUser"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="recordList">
        <el-table-column label="姓名" align="left" prop="nickName" />
        <el-table-column label="分类名称" align="left" prop="cateTitle" />
        <el-table-column label="课程名称" align="left"  prop="courseTitle" />
        <el-table-column label="学习时间" align="left"  prop="learnTime" />
        <el-table-column label="学习时长" align="left"  prop="learnDurationStr" />
        <el-table-column label="操作" align="left" width="120px">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="goInfo(scope.row)"
              >查看</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <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="getList"
      />
    </div>
    <chapter-page v-if="pageType==2" :userData="userData"></chapter-page>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { getLearnList, } from "@/api/exam/el_course";
  import { selectListUser } from "@/api/system/user";
  import chapterPage from "./chapter.vue";
  export default {
    name: "detail",
    props:{
      infoId:{},
    },
    components: {
      chapterPage
    },
    data() {
      return {
        userData:{},
        pageType:1,
        //加载状态
        loading:false,
        // 显示搜索条件
        showSearch: true,
        //选择人员
        optionsUser: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
          joinUserId: null,
        },
        recordList:[],
        total:0,
        //学院
        deptOptions:[],
      }
    },
    created(){
      console.log('this.infoId',this.infoId);
    },
    mounted(){
      this.getList();
      this.getDeptList();
    },
    methods:{
      /* 查询学院列表 */
      getDeptList(){
        listDepartments().then(response => {
          // this.deptOptions = response.data;
          this.$set(this, 'deptOptions', response.data)
        });
      },
      goInfo(row){
        this.userData.id = this.infoId.id;
        this.userData.userId = row.joinUserId;
        this.pageType = 2;
      },
      backPageMin(){
        this.pageType = 1;
      },
      //返回
      backPage(){
        this.$parent.goPageEdit(4);
      },
      //选中触发
      selectClick(data){
        if(data){
          this.getList();
        }
      },
      //清空触发
      clearClick(){
        this.optionsUser = [];
        this.getList();
      },
      /** 查询数据 */
      getList() {
        this.loading = true;
        this.queryParams.courseId = this.infoId.id;
        getLearnList(this.queryParams).then( response => {
          this.recordList =  response.rows;
          this.total =  response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryParams");
        this.recordList = [];
        this.handleQuery();
      },
      /** 下列人员-懒加载 */
      userSelectList(query) {
        if (query !== '' && query.length>1) {
          this.loading = true;
          this.userSelectList.nickName=query;
          selectListUser(this.userSelectList).then(response => {
            this.optionsUser = response.data;
            this.loading = false;
          });
        } else {
          this.optionsUser = [];
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .detail-page {
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .detail-page-one{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
      margin:20px;
    }
  }
</style>
