<template>
  <div class="el-TeacherHome">
    <el-row class="class_row">
      <el-col :span="12">
        <el-row class="content_block">
          <el-row class="title_head">
            <span class="class_img">
              <el-image class="title_img" :src="zichang"></el-image>
            </span>
            <span>待办事项</span>
          </el-row>
          <el-divider></el-divider>
          <el-row class="echarts_row" style="height: 280px;overflow: hidden;">
            <el-col :span="8" class="tc">
              <el-link :underline="false" class="font20 mt30 fontB" type="primary">待评分实训测评</el-link>
              <p class="mt30 fontB c_p" style="color: red;">{{toDoList.length}} 份</p>
              <p class="mt30">
                <i class="el-icon-document font50 c_p" style="color: rgb(255, 255, 255);padding: 20px;background: #409EFF;border-radius: 50%;"></i>
              </p>
            </el-col>
            <el-col :span="16">
              <el-table
                :data="toDoList"
                max-height="250"
                style="width: 100%">
                <el-table-column prop="openCourseName" label="课程名称" header-align="center" align="center" width="180"></el-table-column>
                <el-table-column prop="className" label="班级" header-align="center" align="center"></el-table-column>
                <el-table-column prop="openCourseNum" width="180" header-align="center" align="center" label="待评阅份数"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12">
        <!-- 公告信息 -->
        <div style="height: 300px;">
          <Notice :borderShow="false" :list="noticeList" hei="325px" :pagingShow="false"></Notice>
        </div>
      </el-col>
    </el-row>

    <el-row class="class_row">
      <el-col :span="12">
        <el-row class="content_block">
          <el-row class="title_head">
            <span class="class_img">
              <el-image class="title_img" :src="yingyong"></el-image>
            </span>
            <span>我的应用</span>
          </el-row>
          <el-divider></el-divider>
          <el-row class="pt50 pb50">
            <el-col :span="3" class="tc next_pre">
              <el-image class="next_pre_img" :src="pre" @click="pre_app"></el-image>
            </el-col>
            <el-col :span="18">
              <el-row>
                <template v-for="(item, index) in myAppsList" >
                  <el-col :span="8" class="tc">
                    <el-link :href="item.realUrl" :underline="false" target="_blank">
                      <el-image class="yinyong_img" :src="$getUrl(item.thumbnailUrl)"></el-image>
                      <p class="font14 limit_line_one">{{item.applicationName}}</p>
                    </el-link>
                  </el-col>
                </template>
                <template v-if="myAppsList.length <=0">
                  <el-row style="height: 177px;">
                    <el-empty :imageSize="60" description="暂无应用"></el-empty>
                  </el-row>
                </template>
              </el-row>
            </el-col>
            <el-col :span="3" class="tc next_pre">
              <el-image class="next_pre_img" :src="next" @click="next_app"></el-image>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="content_block">
          <el-row class="title_head">
            <span class="class_img">
              <el-image class="title_img" :src="wodekc"></el-image>
            </span>
            <span>我的课程</span>
          </el-row>
          <el-divider></el-divider>
          <el-row class="pt20 pb20">
            <el-col :span="3" class="tc next_pre" style="height: 237px;">
              <el-image class="next_pre_img" :src="pre" @click="pre_course"></el-image>
            </el-col>
            <el-col :span="18">
              <el-row>
                <template v-for="(item, index) in courseList" >
                  <el-col :span="12" class="tc c_p">
                    <div class="wdkc_c" style="border: 1px solid #E1E1E1;margin: 0 auto;"  @click="courseInon(item)">
                      <template v-if="item.teacherOpenCourse">
                        <el-image class="wdkc_img" :src="$isHttp(item.teacherOpenCourse.teacherOpenCourseCover)"></el-image>
                        <p class="font14 limit_line_one tl mt5 mb5 fontB ml10 mr10">{{item.teacherOpenCourse.teacherOpenCourseTitle}}</p>
                        <el-row class="font14 limit_line_two tl mt5 mb10 ml10 mr10" style="height:38px;">
                           <span style="float:left;">课程简介:</span>
                           <el-row v-html="item.teacherOpenCourse.teacherOpenCourseSummary ||''"></el-row>
                        </el-row>
                      </template>
                    </div>
                  </el-col>
                </template>
                <template v-if="courseList.length <=0">
                  <el-row style="height: 230px;">
                    <el-empty style="height: 230px;" :imageSize="60" description="暂无课程"></el-empty>
                  </el-row>
                </template>
              </el-row>
            </el-col>
            <el-col :span="3" class="tc next_pre" style="height: 230px;">
              <el-image class="next_pre_img" :src="next" @click="next_course"></el-image>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import jQuery from 'jquery';
import Notice from "../course/components/Notice";	//通知公告
export default {
  name: "TeacherHome",
  components: {
    Notice
  },
  data() {
    return {
      zichang:require("../../images/index/zichang@2x.png"),
      yingyong:require("../../images/index/yingyong@2x.png"),
      shouyi:require("../../images/home/shouyi@2x.png"),
      wodekc:require("../../images/home/wodekc@2x.png"),
      next:require("../../images/home/next@2x.png"),
      pre:require("../../images/home/pre@2x.png"),
      info:require("../../images/home/info@2x.png"),
      myAppsListALL:[],
      myAppsList:[],
      start_app_num:0, //应用开始位置
      end_app_num:3,//应用结束位置
      courseListALL:[],
      courseList:[],
      noticeList:[],
      toDoList:[],
      start_course_num:0, //应用开始位置
      end_course_num:3,//应用结束位置
    };
  },
  created() {
    this.$post("/api/teacher/index.do").then((ret) => {
      if(ret.code == 0){
        this.myAppsListALL = ret.data.myApplicationList;
        this.courseListALL = ret.data.myOpenCourseList;
        this.noticeList = ret.data.noticeList.slice(0,5);
        this.toDoList = ret.data.toDoList;
        this.myAppsList = this.myAppsListALL.slice(0,3); //截取我的应用前三
        this.courseList = this.courseListALL.slice(0,2); //截取我的课程前二
      }
    });
  },
  mounted() {

  },
  methods: {
    pre_app(){ //上一个应用
      if(this.myAppsListALL.length <= 3){
        return;
      }
      this.start_app_num --;
      if(this.start_app_num < 0){
        this.start_app_num = this.myAppsListALL.length - 1;
      }
      this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
      if(this.myAppsList.length < 3){
        let num = this.myAppsListALL.length - this.start_app_num;
        this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
      }
    },
    next_app(){ //下一个应用
      if(this.myAppsListALL.length <= 3){
        return;
      }
      this.start_app_num ++;
      if(this.start_app_num == this.myAppsListALL.length){
        this.start_app_num = 0;
      }
      if(this.start_app_num + 3 > this.myAppsListALL.length){ //当开始位置为0并且总数量大于3时
        this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.myAppsListALL.length);
        if(this.myAppsList.length < 3){
          let num = this.myAppsListALL.length - this.start_app_num;
          this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
        }
      }else{
        this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
      }
    },
    pre_course(){ //上一个课程
      if(this.courseListALL.length <= 2){
        return;
      }
      this.start_course_num --;
      if(this.start_course_num < 0){
        this.start_course_num = this.courseListALL.length - 1;
      }
      this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
      if(this.courseList.length < 2){
        let num = this.courseListALL.length - this.start_course_num;
        this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
      }
    },
    next_course(){ //下一个课程
      if(this.courseListALL.length <= 2){
        return;
      }
      this.start_course_num ++;
      if(this.start_course_num == this.courseListALL.length){
        this.start_course_num = 0;
      }
      if(this.start_course_num + 2 > this.courseListALL.length){ //当开始位置为0并且总数量大于2时
        this.courseList = this.courseListALL.slice(this.start_course_num,this.courseListALL.length);
        if(this.courseList.length < 2){
          let num = this.courseListALL.length - this.start_course_num;
          this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
        }
      }else{
        this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
      }
      console.log(this.courseList)
    },
    courseInon(item){
      this.$ls.remove(this.$getKeyInfo('on_show'));
      this.$router.push({name:'TCourseHome',query:{teacherOpenCourseId:item.teacherOpenCourseId}});
    }
  }
};
</script>
 <style  lang="less">
  .el-TeacherHome{
    padding: 20px 0 0 20px;
    .content_block{
      background-color: #ffffff;
      margin-right: 20px;
      .title_head{
        padding: 10px 20px;
      }
      .title_img{
        width: 20px;
      }
      .wdkc_img{
        width: 300px;
        height: 150px;
      }
      .wdkc_c{
        width: 300px;
        p{
          margin: 0;
        }
      }
      .el-divider--horizontal{
        margin: 0;
      }
      .class_img{
        float: left;margin-right: 10px;
      }
      .echarts_row{
        padding: 20px;
      }
    }
    .class_row{
      margin-bottom: 20px;
    }
    .next_pre{
      display: flex;
      justify-content:center;
      align-items:center;
      height: 177px;
    }
    .next_pre_img{
      width: 40px;
      cursor: pointer;
    }
    .yinyong_img{
      width: 120px;
      height: 122px;
      cursor: pointer;
      border-radius: 10px;
    }
    .wdon{
      width: 10px;height: 10px;background-color: red;border-radius: 50%;
      float: left;margin-top: 5px;margin-right: 10px;
    }
    //宽度大于等于
    @media screen and (max-width:1710px){
      .content_block{
        .wdkc_img{
          width: 250px;
          height: 150px;
        }
        .wdkc_c{
          width: 250px;
        }
      }
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
