<style scoped>
  @import "../financial/css/cssReset.css";

  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

  .studentTracking td:first-child {
    background-color: #E6E6E6;
    position: sticky;
    left: 0px;
  }

  .studentTracking th:first-child {
    position: sticky;
    left: 0px;
  }

  .stulistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

</style>
<template>
  <div class="page-body studentTracking">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <p style="margin-bottom:10px;"> 学生姓名：<strong style="color:red;">{{this.$route.query.StuName}}</strong></p>
          <q-select dense filled option-value="CourseId" option-label="CourseName" v-model="msg.CourseId"
            :options="allCourseList" emit-value map-options label="课程名称" @update:model-value="getCourseId"
            @input="refreshPage" />
        </div>
      </div>
      <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增考试" @click="AddExam(2)" />
      <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增月度总结" @click="AddExam(3)" />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="上课记录" name="first"></el-tab-pane>
      <el-tab-pane label="月度总结" name="second"></el-tab-pane>
    </el-tabs>
    <div style="width: 100%;margin-top: 20px" v-if="activeName=='first'">
      <stufollowlist :dataObj="dataList" :CourseRateName="CourseRateName" :BaseInfo="msg" @success="refreshPage"
        :titlelist="titlelist" :loading="loading" ref="stuFollowList" :AuthObj="AuthObj"></stufollowlist>
    </div>
    <div style="width: 100%;margin-top: 20px" v-if="activeName=='second'">
      <studentStudylMonthlist :dataObj="dataList" :CourseRateName="CourseRateName" :BaseInfo="msg"
        @success="refreshPage" :titlelist="titlelist" :loading="loading" ref="studentStudylMonthlist"
        :AuthObj="AuthObj"></studentStudylMonthlist>
    </div>
    <q-dialog persistent v-model="isShowManagerForm">
      <studentStudyAddForm :saveObj="managerOption" :BaseInfo="msg" @close="closeStuForm" @success="refreshPage">
      </studentStudyAddForm>
    </q-dialog>

  </div>
</template>
<script>
  import {
    GetStuStudyList,
    GetStuStudyMonthList,
  } from '../../api/studyabroad/index'
  import {
    queryStuOrderPage, //学员订单分页列表
  } from '../../api/customerstudent/customerstudent';

  import stufollowlist from "../../components/school/student/studentStudylist";
  import studentStudylMonthlist from "../../components/school/student/studentStudylMonthlist";
  import studentStudyAddForm from "../../components/school/student/studentStudyAddForm";
 
  export default {
    meta: {
      title: "学员学习情况"
    },
    props: {},
    components: {
      stufollowlist,
      studentStudylMonthlist,
      studentStudyAddForm
    },
    data() {
      return {
        activeName: 'first',
        AccountType: 2,
        IsLeave: 1,
        titlelist: [],
        msg: {
          CourseId: 0,
          StuId: 0,
          GuestId: 0,
          ClassScrollType: 0,
          OrderId: 0,
        },
        loading: false,
        isShowManagerForm: false,
        dataList: null, //列表数据
        managerOption: 0,
        PageCount: 0,
        CourseRateName: '',
        allCourseList: [], //课程
        myCourseList: [],
        customMsg: {
          pageIndex: 1,
          pageSize: 10000,
          StuId: 0,
        },
        AuthObj: {
          isShowSaleInfo: false,
        }
      }
    },
    created() {
      if (this.$route.query) {
        if (this.$route.query.StuId) {
          this.msg.StuId = this.customMsg.StuId = parseInt(this.$route.query.StuId)
        }
        if (this.$route.query.GuestId) {
          this.msg.GuestId = this.customMsg.GuestId = parseInt(this.$route.query.GuestId)
        }
        if (this.$route.query.ClassScrollType) {
          this.msg.ClassScrollType = this.customMsg.ClassScrollType = parseInt(this.$route.query.ClassScrollType)
        }
        if (this.$route.query.CourseRateName) {
          this.CourseRateName = this.$route.query.CourseRateName
        }
      }
      this.getCourseList(); //获取课程下拉
    },
    mounted() {},
    methods: {
      handleClick(tab, event) {
        this.refreshPage()
      },
      AddExam(type) {
        this.isShowManagerForm = true;
        this.managerOption = type;
      },
      //关闭表单
      closeStuForm() {
        this.isShowManagerForm = false;
      },
      getCourseId(val) {
        for (let i = 0; i < this.allCourseList.length; i++) {
          if (this.allCourseList[i].CourseId == val) {
            this.msg.ClassScrollType = this.allCourseList[i].ClassScrollType
            this.msg.OrderId = this.allCourseList[i].OrderId
          }
        }
        this.refreshPage()
      },
      //刷新页面
      refreshPage() {
        this.getList()
      },
      //获取课程
      getCourseList() {
        queryStuOrderPage(this.customMsg).then(res => {
          if (res.Code == 1) {
            let data = res.Data.PageData
            this.allCourseList = JSON.parse(JSON.stringify(data));
            this.myCourseList = JSON.parse(JSON.stringify(data));
            if (this.allCourseList && this.allCourseList.length > 0) {
              this.msg.CourseId = this.allCourseList[0].CourseId
              this.msg.ClassScrollType = this.allCourseList[0].ClassScrollType
              this.msg.OrderId = this.allCourseList[0].OrderId
              this.getList(); //获取列表
            }
          }
        });
      },
      getList() {
        this.loading = true;
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (this.activeName == 'first') {
          GetStuStudyList(this.msg).then(res => {
              this.loading = false;
              var pageData = JSON.parse(JSON.stringify(res.Data));
              this.dataList = pageData;
            })
            .catch(() => {
              this.loading = false;
            });
        } else if (this.activeName == 'second') {
          GetStuStudyMonthList(this.msg).then(res => {
              this.loading = false;
              var pageData = JSON.parse(JSON.stringify(res.Data));
              this.dataList = pageData;
            })
            .catch(() => {
              this.loading = false;
            });
        }

      },

      filterFnkec(val, update) { //课程的栓选
        update(() => {
          if (val === '') {
            this.myCourseList = this.allCourseList
          } else {
            const needle = val.toLowerCase();
            this.myCourseList = this.allCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
<style scoped>
  /deep/.el-input__inner,
  /deep/.el-range-input {
    background-color: transparent;
    border: none;
  }

  .stics {
    padding: 10px 20px;
    background: #DDDEE0;
    border-radius: 4px;
    font-size: 13px;
    color: #000000;
    font-weight: bold
  }

  .stics .stics-name {
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 10px
  }

  .roatImg {
    transform: rotate(180deg);
  }

</style>
