<style>
  .teacherLesson .TeacherTop {
    display: flex;
    min-width: 1200px;
  }

  .teacherLesson .Teacher_Left {
    width: 55px;
    height: 60px;
    background-color: #fff;
    border: 1px solid #4C4F4E;
    margin-right: 20px;
  }

  .teacherLesson .Teacher_Inner {
    width: 100%;
    height: 25px;
    line-height: 25px;
    background-color: #D46964;
    text-align: center;
    color: #fff;
    font-size: 12px;
  }

  .teacherLesson .Cal_Bottom {
    width: 100%;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #111111;
  }

  .teacherLesson .Cal_List {
    display: flex;
    width:95%;
  }

  .teacherLesson .Cal_Qiehuan {
    color: #999999;
    font-size: 12px;
    width: 45px;
    text-align: center;
    height: 60px;
    background-color: #F1F6FB;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    display: inline-block;
  }

  .teacherLesson .Cal_Icon {
    margin: 8px 0;
  }

  .teacherLesson .Cal_Inner {
    width: 45px;
    height: 60px;
    border-radius: 5px;
    background-color: #F1F6FB;
    color: #2D2D2D;
    text-align: center;
    margin: 0 0 10px 10px;
    font-weight: bold;
    padding-top: 10px;
    float: left;
    cursor: pointer;
  }

  .teacherLesson .Cal_Content {
    min-width: 880px;
    width: 80%;
    display: inline-block;
    margin-left: 10px;
  }

  .teacherLesson .beikeStatus {
    padding: 2px 3px;
    margin-top: 5px;
    background-color: #2961FE;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    -webkit-transform: scale(0.8);
  }

  .teacherLesson .TeacherYarr {
    color: #111111;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 0 10px;
  }

  .teacherLesson .record_List {
    margin-bottom: 10px;
  }

  .teacherLesson .record_List:last-child {
    margin-bottom: 0;
  }

  .teacherLesson .TeacherNameList {
    position: relative;
    color: #111111;
  }

  .teacherLesson .cicle1 {
    position: absolute;
    left: -15px;
    border-radius: 50%;
    list-style: none;
    width: 30px;
    height: 30px;
    background: #ffffff;
    text-align: center;
    line-height: 30px;
    color: #fff;
    position: absolute;
    top: 0;
    left: -41px;
  }

  .TeacherInfo_List:nth-child(odd) .cicle1 {
    color: #2961FE;
    background-color: #D4DFFF;
  }

  .TeacherInfo_List:nth-child(even) .cicle1 {
    color: #3FC4FF;
    background-color: #D9F3FF;
  }

  .teacherLesson .cicle1:first-child {
    top: -5px !important;
  }

  .teacherLesson .TeacherContent {
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 12px;
    padding-left: 20px;
    background-color: #F0F5FB;
  }

  .teacherLesson .saveModule {
    padding: 5px 10px;
    background-color: #fff;
    color: #000000;
    font-size: 13px;
    border: 1px solid #A1AAB2;
    border-radius: 5px;
    cursor: pointer;
  }

  .teacherLesson .TeacherInfo_List {
    display: flex;
  }

  .TeacherInfo_List:last-child .timeright {
    border-left: 0 !important;
  }

  .teacherLesson .timeright {
    padding-left: 25px;
    margin-left: 25px;
    width: 90%;
    border-left: 1px solid #d1d1d1;
  }

  .teacherLesson .beikeBtn {
    padding: 6px 20px;
    background-color: #2961FE;
    color: #fff;
    font-size: 13px;
    border-radius: 5px;
    margin-left: 20px;
    cursor: pointer;
  }
  .teacherLesson .timeleft{
      margin-left:12px;
  }
  .checkedPlan{
    background-color: #2961FE!important;
    color:#fff!important;
  }
  /*.checkedPlan .beikeStatus{*/
  /*  background-color: #fff;*/
  /*  color:#2961FE!important;*/
  /*}*/
 .Cal_Content .beike1{
    background: var(--q-color-negative);
  }
 .Cal_Content .beike2{
    background: var(--q-color-warning);
  }
 .Cal_Content .beike3{
    background: var(--q-color-dark);
  }
</style>
<template>
  <div class="page-body teacherLesson">
    <div class="TeacherTop">
      <div class="Teacher_Left">
        <div class="Teacher_Inner">{{tYear}}年</div>
        <div class="Cal_Bottom">
          {{tMonth}}
        </div>
      </div>
      <div class="Cal_List">
        <div class="Cal_Qiehuan" @click="getBeforeMonth()">
          <div class="Cal_Icon">
            <i class="el-icon-arrow-left"></i></div> <div>上个月
          </div>
        </div>
        <div class="Cal_Content">
          <div class="Cal_Inner" v-for="(item,index) in dataNum" :class="{'checkedPlan':ckedIndex==item}" @click="getItem(item)">
              {{item}}
            <div class="beikeStatus beike1"  v-if="getLessonStatus(item)=='未备课'">
              <span>{{getLessonStatus(item)}}</span>
            </div>
            <div class="beikeStatus beike2"  v-if="getLessonStatus(item)=='部分'">
              <span>{{getLessonStatus(item)}}</span>
            </div>
            <div class="beikeStatus beike3"  v-if="getLessonStatus(item)=='已备课'">
              <span>{{getLessonStatus(item)}}</span>
            </div>
          </div>
        </div>
        <div class="Cal_Qiehuan" @click="getNextMonth()">
          <div class="Cal_Icon">
            <i class="el-icon-arrow-right"></i></div>
          <div>下个月
          </div>
        </div>
      </div>
    </div>
    <div class="TeacherYarr">{{tYear}}年{{tMonth}}月{{ckedIndex}}日</div>
    <div style="margin-top:30px;">
      <div class="TeacherInfo_List" v-for="(item,index) in newDataList">
        <div class="timeleft">
          <div style="width: 45px;">
            {{item.StartTime}}
          </div>
        </div>
        <div class="timeright">
          <div class="record_List">
            <div class="TeacherNameList">
              {{item.ClassName}}
              <li class="cicle1">
                {{item.ClassName.substr(0,1)}}
              </li>
            </div>
            <div class="TeacherContent">
              {{item.GuestStr}}
            </div>
            <div style="margin:20px 0 30px 0;">
              <span class="beikeBtn" v-if="item.LessonPlanNum>0" style="background:#3FC4FF;" @click="goyibeike(item)">已备课</span>
              <span class="beikeBtn" v-else @click="goBeike(item)">备课</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    GetTeacherPlan
  } from '../../api/course/class';
  export default {
    meta: {
      title: "课程"
    },
    props: {},
    data() {
      return {
        dataNum: 0, //天数
        tYear: 0, //年
        tMonth: 0, //月
        tDay:0, //日
        ckedIndex:0,// 选中
        msg: {
          School_Id: 0, //学校
          // Teacher_Id: 5, //老师id
          StartTime: '',
          EndTime: ''
        },
        dataList: [],
        newDataList:[],
      }
    },
    created() {},
    mounted() {
      var myDate = new Date();
      this.tYear = myDate.getFullYear();
      this.tMonth = myDate.getMonth() + 1;
      this.tDay = myDate.getDate();
      this.ckedIndex = this.tDay;
      this.dataNum = this.mGetDate(this.tYear, this.tMonth);
      this.msg.StartTime = this.tYear+'-'+this.tMonth+'-'+'01';
      this.msg.EndTime = this.tYear+'-'+this.tMonth+'-'+this.dataNum;
      this.getList();
    },
    methods: {
      mGetDate(year, month) {
        var d = new Date(year, month, 0);
        return d.getDate();
      },
      //点击上个月
      getBeforeMonth() {
        if (this.tMonth == 1) {
          this.tYear = this.tYear - 1;
          this.tMonth = 12;
        } else {
          this.tMonth = this.tMonth - 1;
        }
        this.dataNum = this.mGetDate(this.tYear, this.tMonth);
        this.msg.StartTime = this.tYear+'-'+this.tMonth+'-'+'01';
        this.msg.EndTime = this.tYear+'-'+this.tMonth+'-'+this.dataNum;
        this.getList();
      },
      //点击下个月
      getNextMonth() {
        if (this.tMonth == 12) {
          this.tYear = this.tYear + 1;
          this.tMonth = 1;
        } else {
          this.tMonth = this.tMonth + 1;
        }
        this.dataNum = this.mGetDate(this.tYear, this.tMonth);
        this.msg.StartTime = this.tYear+'-'+this.tMonth+'-'+'01';
        this.msg.EndTime = this.tYear+'-'+this.tMonth+'-'+this.dataNum;
        this.getList();
      },
      //获取数据
      getList() {
        GetTeacherPlan(this.msg).then(res => {
          console.log(res, '数据来了');
          if (res.Code == 1) {
            this.dataList = res.Data;
            var month = this.tMonth;
            var day = this.ckedIndex;
            if(month<10){
              month='0'+month;
            }
            if(day<10){
              day='0'+day;
            }
            this.dataList.forEach(x=>{
              if(x.DateYear==this.tYear&&x.DateMonth==month&&x.DateDay==day){
                this.newDataList = x.PlanList;
              }
            })
          }
        })
      },
      //点击
      getItem(item){
        this.ckedIndex=item;
        var month = this.tMonth;
        var day = item;
        if(month<10){
          month='0'+month;
        }
        if(day<10){
          day='0'+day;
        }
        this.dataList.forEach(x=>{
          if(x.DateYear==this.tYear&&x.DateMonth==month&&x.DateDay==day){
            this.newDataList = x.PlanList;
          }
        })
      },
      //获取备课状态
      getLessonStatus(num){
        if(num<10){
          num='0'+num
        }
        var Str = '';
        this.dataList.forEach(x=>{
          if(parseInt(x.DateDay)==parseInt(num)){
            console.log(x.IsLessonStatus);
            if(x.IsLessonStatus==0){
              Str='未备课'
            }
            if(x.IsLessonStatus==1){
              Str='部分'
            }
            if(x.IsLessonStatus==2){
              Str='已备课'
            }
          }
        })
        return Str;
      },
      //跳转至备课
      goBeike(item){
        console.log(item,'item');
        var tempStr = '/course/lessonPreparation?ClassId=' + item.ClassId+'&School_Id='+item.School_Id+'&ClassPlanId='+item.ClassPlanId;
        this.$router.push({
          path: tempStr
        });
      },
      goyibeike(item){
        var tempStr = '/course/prepareclassDetails?ClassId=' + item.ClassId+'&ClassPlanId='+item.ClassPlanId;
        this.$router.push({
          path: tempStr
        });
      }
    }
  }

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

</style>
