<style>
  .record_Main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .StuCkedType {
    color: #3470ff;
    font-weight: 700;
  }
  .record_cala_Num {
    height: 20px;
    padding-left: 14px;
    background: #d0d5db;
    border-radius: 10px;
    margin: 10px 20px 0 0;
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -10px;
  }

 .record_cala_Num>span {
    min-width: 24px;
    height: 24px;
    padding: 4px;
    margin: -2px -4px 0 0;
    background: #d0d5db;
    display: block;
    border-radius: 20px;
  }

 .record_cala_Num>span>i {
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    line-height: 16px;
    background: #fff;
    font-size: 12px;
    font-family: Arial;
    color: #a8a8b3;
    border-radius: 20px;
    display: block;
    text-align: center;
    font-style: normal;
  }
</style>
<template>
  <div>
    <div>
        <q-tabs v-model="ckedTab" @input="getTabcheck()" dense align="left" class="text-teal" style="margin-bottom:20px;">
            <q-tab v-for="(item,index) in dataList" :key="index" :name="index" :label="item.CourseName+'('+item.OrderId+')'" />
        </q-tabs>
    </div>
    <div class="record_Main">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>课程进度：{{CourseChapterNo}}/{{TotalChapterNo}}</div>
        <div>
          <q-select dense filled v-model="Status" @input="getStatus" style="width:160px;margin-right:10px;" :options="StatusList" option-label="Name" option-value="Id"
            emit-value map-options label="状态" />
        </div>
      </div>
      <div>
          <el-table :data="chapterList" v-loading="loading" ref="table" :height="tableHeight" style="width: 100%;">
            <el-table-column prop="ChapterNo" label="章节" width="300">
              <template slot-scope="scope">
                <div style="display: inline-block;">
                  <div class="flex q-ml-md">
                    <div class="record_cala_Num">
                      <span>
                        <i>{{ scope.row.ChapterNo }}</i>
                      </span>
                    </div>
                    <div style="margin-left: 36px;width:240px;" class="ellipsis">
                      {{ scope.row.ChapterName }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="AgainNum" label="进度" width="100">
              <template slot-scope="scope">
                {{scope.row.CourseRateName}}({{scope.row.ChapterGradeNo}})
              </template>
            </el-table-column>
            <el-table-column prop="State" label="状态" width="70">
              <template slot-scope="scope">
                <div v-if="scope.row.State == 1">
                  <span class="text-warning" v-if="scope.row.AppointState==1">待确认</span>
                  <span class="text-info" v-if="scope.row.AppointState==2">待上课</span>
                  <span class="text-positive" v-if="scope.row.AppointState==3">已上课</span>
                </div>
                <div class="text-warning" v-if="scope.row.State == 2">补课</div>
                <div class="text-negative" v-if="scope.row.State == 3">缺课</div>
              </template>
            </el-table-column>
            <el-table-column prop="AgainNum" label="重学" width="60">
              <template slot-scope="scope">
                {{scope.row.AgainNum}}
              </template>
            </el-table-column>
          </el-table>

      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetStuLearnChapterList //学员订单分页列表
  } from "../../../api/customerstudent/customerstudent";
  export default {
    meta: {
      title: "上课记录"
    },
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        StatusList: [{
          Name: '全部',
          Id: 0
        },{
          Name: '正常上课',
          Id: 1
        }, {
          Name: '补课',
          Id: 2
        }, {
          Name: '缺课',
          Id: 3
        }],
        dataList: [],
        loading: false,
        Status:0,//状态
        msg: {
          StuId: ''
        },
        chapterList:[], //章节
        ckedTab:0,
        CourseChapterNo:0, //当前进度
        TotalChapterNo:0, //总进度
        tableHeight: 200,
      };
    },
    created() {
      if (this.saveObj.StuId > 0) {
        this.msg.StuId = this.saveObj.StuId;
      }
    },
    mounted() {
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 100;
      }, 100)
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        GetStuLearnChapterList(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data;
            if(this.dataList.length>0){
                this.chapterList = this.dataList[0].ChapterList;
                this.CourseChapterNo = this.dataList[0].CourseChapterNo;
                this.TotalChapterNo = this.dataList[0].TotalChapterNo;
            }
          }
        });
      },
      getTabcheck(){
        this.chapterList = this.dataList[this.ckedTab].ChapterList;
        this.CourseChapterNo = this.dataList[this.ckedTab].CourseChapterNo;
        this.TotalChapterNo = this.dataList[this.ckedTab].TotalChapterNo;
      },
      //根据状态过滤
      getStatus(){
        let dataArray = [];
        if(this.Status==0){
            dataArray = this.dataList[this.ckedTab].ChapterList;
        }else{
            this.dataList[this.ckedTab].ChapterList.forEach(x=>{
                if(x.State==this.Status){
                    dataArray.push(x);
                }
            })
        }
        this.chapterList = dataArray;
      }
    }
  };

</script>
