<template>
  <!-- <div class="page-body" style="height:calc(100% - 30px);"> -->
  <div class="sptable-box" id="sptable">
    <div class="sptable-wrap" v-loading="loading">
      <table class="sptable" id="sptableWrap" :style="{'zoom':zoom}">
        <thead>
          <tr class="sticky-header">
            <th class="sticky-column stubg">学员</th>
            <th class="stubg" v-for="(x,i) in students" :key="i">{{ x.GuestName }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="sticky-column coursebg">课程</td>
            <td class="coursebg" v-for="(x,i) in students" :key="i">
              {{ currentCourse.CourseName }}
            </td>
          </tr>
          <tr>
            <td class="sticky-column teacherbg">班主任</td>
            <td class="teacherbg" v-for="(x,i) in students" :key="i">{{ x.HeadMasterName }}</td>
          </tr>
          <tr>
            <td class="sticky-column studybg">方式</td>
            <td
              :class="{ 'study-online-bg':  x.TeachingMethod== 2, studybg:  x.TeachingMethod!= 2 }"
              v-for="(x,i) in students" :key="i"
            >
              {{ x.TeachingMethod== 2 ? "线上" : "面授" }}
            </td>
          </tr>
          <tr>
            <td class="sticky-column defaultBg">
              进度<br />({{ currentCourse.ClassHours }}课时)
            </td>
            <td v-for="(x,i) in students" :key="i" :class="{ 'stop': currentCourse.ClassHours-x.ClassProgress<0 || x.ScheduleStatus==1 }">
              <span>剩余{{ ((currentCourse.CourseRate==10||currentCourse.CourseRate==11)?x.TotalTimes:currentCourse.ClassHours)-x.ClassProgress }}课时</span>
              <div v-if="((currentCourse.CourseRate==10||currentCourse.CourseRate==11)?x.TotalTimes:currentCourse.ClassHours)-x.ClassProgress<0 || x.ScheduleStatus==1">暂停排课</div>
              <div v-else class="text-primary">周一，五排课</div>
            </td>
          </tr>
          <tr>
            <td class="sticky-column studybg">备注</td>
            <td
              v-for="(x,i) in students" :key="i"
              style="word-wrap: break-word;white-space: wrap; max-width: 150px; vertical-align: middle;"
              @dblclick="changeRemark(i)"
              :contenteditable="i==currentRemark"
            ></td>
          </tr>
          <tr>
            <td :colspan="students.length+1">&nbsp;</td>
          </tr>
          <!-- 表格内容 study-online-bg -->
          <tr v-for="(x,i) in chapters" :key="i">
            <td class="sticky-column defaultBg" style="text-align: left;">{{ x.ChapterName }}</td>
            <td v-for="(y,yi) in x.assemble" :key="yi" :class="{'study-normal':y,'disable-class':y&&y.overlayer}">
              &nbsp;
              <q-tooltip :offset="[0, 0]" v-if="y && !y.overlayer">
                {{ y.Date }}
              </q-tooltip>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cusor-tools row">
      <div class="col row">
        <div
          class="item"
          @click="changeCourseHandle(x)"
          :class="{ active: x.CourseId == currentCourse.CourseId }"
          v-for="(x,i) in list"
          :key="i"
        >
          {{ x.CourseName }}
        </div>
      </div>
      <scroll-bar
        targetBox="sptable"
        targetWrap="sptableWrap"
        @scrollChange="scrollHandle"
        ref="scrollBar"
      ></scroll-bar>
      <div class="q-ml-md row items-center">
        <span>{{ Math.ceil(zoom*100) }}%</span>
        <q-btn @click="resetZoom" color="primary" v-show="zoom!=1" style="padding: 0; font-size: 11px !important;font-family: microsoft yahei !important; font-weight: 400;" flat label="重置" />
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import scrollBar from "src/components/common/scrollBar.vue";
import { queryCoursePage,queryChapterTree,queryScheduleCourseStu } from "../../api/course/index";
export default {
  components: { scrollBar },
  meta: {
    title: "学员学习进度表"
  },
  data() {
    return {
      list: [],
      loading: true,
      msg: {
        pageIndex: 1,
        pageSize: 120,
        rowsPerPage: 120,
        CourseName: "",
        QCateIds: "",
        IsQPrice: 1,
        Status: "0",
        Saleplat: 0,
        CourseSubject: 1,
        SaleState: 1
      },
      currentCourse: {},
      chapters: [],
      currentRemark: 0,
      students:[],
      assemble:[],
      zoom:1
    };
  },
  methods: {
    scrollHandle(e) {
      const box = document.querySelector("#sptable");
      box.scrollLeft = e;
    },
    getCourse() {
      this.loading = true;
      queryCoursePage(this.msg)
        .then(res => {
          this.loading = false;
          this.list = res.Data.PageData.reverse();
          this.currentCourse = this.list[0];
          this.getChapters()
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getChapters() {
      if(!this.currentCourse || !this.currentCourse.CourseId) return
      this.loading = true;
      queryChapterTree({CourseId:this.currentCourse.CourseId})
        .then(res => {
          this.loading = false;
          this.chapters = res.Data
          this.getStudents()
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeCourseHandle(item) {
      this.currentCourse = item;
      this.getChapters()
    },
    changeRemark(i){
      this.currentRemark=i
    },
    getStudents(){
      if(!this.currentCourse || !this.currentCourse.CourseId) return
      this.loading = true;
      queryScheduleCourseStu({CourseRate:this.currentCourse.CourseRate}).then(r=>{
        this.students = r.Data
        this.loading = false;
        this.setFillChapters()
        this.assembleHandler()
      }).catch(()=>{
        this.loading = false;
      })
    },
    setFillChapters(){
      if(this.currentCourse.CourseRate==10||this.currentCourse.CourseRate==11){
        //TotalTimes
        let maxTemp = 0
        this.students.forEach(stu=>{
          if(stu.TotalTimes && stu.TotalTimes>maxTemp) maxTemp=stu.TotalTimes
        })
        if(maxTemp>0){
          for (let i = 0; i < maxTemp; i++) {
            this.chapters.push({
              ChapterId:i+1,
              ChapterName:`第${i+1}次`
            })
            
          }
          this.currentCourse.ClassHours=maxTemp
        }
      }
    },
    assembleHandler(){
      this.assemble = []
      this.chapters.forEach((x,i)=>{
        x.assemble=[]
        this.students.forEach(stu=>{
          const r = stu.CourseItems.find(item=>item.ChapterId==x.ChapterGradeNo)
          if(!r && (this.currentCourse.CourseRate==10||this.currentCourse.CourseRate==11) && stu.TotalTimes<(i+1)){
            x.assemble.push({overlayer:true})
          }else{
            x.assemble.push(r)
          }
          
        })
      })
      this.$nextTick(()=>{
        this.$refs.scrollBar.calcHandle()
      })
    },
    handleWheel(event) {
      if(event.ctrlKey === true || event.metaKey === true){
        if (event.deltaY > 0) {
          this.zoomOut();
        } else {
          this.zoomIn();
        }
        this.$refs.scrollBar.calcHandle()
        event.preventDefault();
        return false
      }
      
    },
    zoomIn() {
      // 放大逻辑
      if(this.zoom<4) this.zoom+=0.05
    },
    zoomOut() {
      // 缩小逻辑
      if(this.zoom>0.1) this.zoom-=0.05
    },
    resetZoom(){
      this.zoom=1
      this.$refs.scrollBar.calcHandle()
    }
  },
  created() {
    this.getCourse();
  },
  mounted(){
    document.addEventListener('wheel', this.handleWheel,{ passive: false });
  },
  beforeDestroy(){
    document.removeEventListener('wheel', this.handleWheel,{ passive: false });
  }
};
</script>

<style>
.sptable-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
  /* user-select: none; */
  background: #fff;
}
.sptable-box .sptable-wrap {
  position: relative;
}

.sptable-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sptable-box::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

.sptable-box::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.sptable-box::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
.sptable {
  border-collapse: collapse;
  border: 1px solid #000;
  border-top: none;
  min-width: 100%;
}
.sptable td,
.sptable th {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 6px 15px;
  /* min-width: 200px; */
  white-space: nowrap;
  text-align: center;
  color: #000;
  outline: none;
  position: relative;
}
.sptable td:focus::before{

}
.sptable td:focus::before{
  position: absolute;
  content: " ";
  display: block;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 15;
  border: 3px solid #418F1F;
  pointer-events: none;
}
.sptable tr td:last-child {
  border-right: none;
}
.sptable tr:last-child td:last-child {
  border: none;
}
.sptable .sticky-header th {
  position: sticky;
  top: 0px;
  background: #fff;
  z-index: 2;
  border-bottom: none;
}
.sptable .sticky-column {
  position: sticky;
  left: 0px;
  background: #fff;
  box-shadow: inset -4px -2px 0px -3px #1fbb7d;
  border-right: 0;
  z-index: 1;
}
.sptable .sticky-header th::before,
.sptable .sticky-header th::after,
.sptable-box::before,
.sptable .sticky-column::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  background: #000;
  top: 0;
  left: -1px;
  bottom: 0;
  z-index: 15;
  height: 100%;
}
.sptable-box::before {
  left: 0;
}
.sptable .sticky-header th::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
.sptable .sticky-header th::after {
  top: unset;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #1fbb7d;
}
.sptable .sticky-header .sticky-column {
  z-index: 3;
  border-right: 0;
}
.sptable-box .cusor-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27px;
  background: #e3e6ed;
  border-top: 1px solid #c9ccd2;
  border-bottom: 1px solid #c9ccd2;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  z-index: 9;
  padding: 0 30px;
}
.sptable-box .cusor-tools .item {
  height: 22px;
  line-height: 22px;
  border: 1px solid transparent;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 12px;
  color: #000;
  padding: 0 15px;
  cursor: pointer;
  position: relative;
}
.sptable-box .cusor-tools .item:hover {
  background: #cfcfcf;
}
.sptable-box .cusor-tools .item.active {
  background: #fff !important;
  cursor: default !important;
  border-color: #c9ccd2;
  border-top: transparent;
  margin-top: -1px;
  font-weight: bold;
  color: #007a6b;
  height: 23px;
  line-height: 23px;
}
.sptable .coursebg {
  background: #ffd964;
}
.sptable .stubg {
  background: #92d050;
}
.sptable .teacherbg {
  background: #9999ff;
}
.sptable .studybg {
  background: #f08784;
}
.sptable .study-online-bg {
  background: #ed7b30;
}
.sptable .stop {
  background: #ea3680;
}
.sptable .defaultBg{
  background: #cfcfcf;
}
.sptable .study-normal{
  background: #548235;
}
.sptable .disable-class{
  background: #dfdfdf;
  cursor: not-allowed;
}
</style>
