<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;
    font-size:13px;
  }
  .teacherLesson .TeacherNameList:last-child{
    height:auto;
  }
  .teacherLesson .cicle1 {
    position: absolute;
    left: -15px;
    border-radius: 50%;
    list-style: none;
    width: 24px;
    height: 24px;
    background: #ffffff;
    text-align: center;
    line-height: 24px;
    color: #fff;
    position: absolute;
    top: -3px;
    left: -38px;
  }

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

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

  .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;
    height:60px;
  }
  .teacher-box .TeacherInfo_List:last-child{
    height:auto;
  }
  .TeacherInfo_List:last-child .timeright {
    border-left: 0 !important;
  }

  .teacherLesson .timeright {
    padding-left: 25px;
    margin-left: 10px;
    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;
    /* height:53px; */
  }

  .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);
  }

  .teacherLesson .TeacherName {
    color: var(--q-color-primary);
  }

  .teacherLesson .teacher-box {
    /* background-color: #f5f5f5; */
    padding: 20px 20px 10px 20px;
    border-radius: 20px;
  }
  .Teacher_Class{
    width: 95%;
    height:45px;
    background-color: #F0F5FB;
    padding:0 20px;
    color:#111111;
    margin-bottom:30px;
    font-weight: bold;
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  .Teach_BigSpan{
    font-size:18px;
    margin-right:20px;
  }
  .Teach_MidSpan{
    font-size:14px;
  }
  .Plan-StartTime{
    width: 100px;
    font-size:14px;
    color:#111111;
    font-weight:bold;
  }
  .Plan_WeiBei{
    color:#F44E60;
    font-size:12px;
  }
  .Teach_Circle{
    color: #2961FE;
    background-color: #D4DFFF;
    display:inline-block;
    width:24px;
    height:24px;
    margin:0 10px 0 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size:12px;
    position: relative;
    top:-2px;
  }
  .fankuiBtn{
    padding: 6px 20px;
    background-color: #fff;
    color: #2961FE;
    font-size: 13px;
    border-radius: 5px;
    margin-left: 20px;
    cursor: pointer;
    border:1px solid #2961FE;
  }
</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 flex">
        <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 col">
          <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>
        <div v-for="item1 in newDataListRes" :key="item1.id" class="teacher-box">
          <div class="Teacher_Class">
            <div>
              <span class="Teach_BigSpan">{{item1.ClassName}}</span>
              <span class="Teach_MidSpan">第{{item1.Ranks}}次上课</span>
              <span class="Teach_Circle">{{item1.TeacherName.substr(0,1)}}</span>
              <span class="Teach_MidSpan" style="position:relative;top:-1px;">{{item1.TeacherName}}</span>
            </div>
            <div>
              <span v-if="item1.LessonPlanNum===0" class="Plan_WeiBei">未备课</span>
              <span v-if="item1.LessonPlanNum>0" @click="goyibeike(item1)" style="color:#2961FE;font-size:12px;margin-right:20px;cursor:pointer;">已备课</span>
              <!-- <span class="beikeBtn" v-if="item1.LessonPlanNum>0" style="backgroundColor:#3FC4FF;margin-right:20px;"
                    @click="goyibeike(item1)">已备课</span> -->
              <span class="beikeBtn" style="margin:0 20px 0 0" v-if="AccountType&&item1.LessonPlanNum>0" @click="goBeike(item1)">修改</span>

              <span class="beikeBtn" v-if="AccountType&&item1.LessonPlanNum===0" @click="goBeike(item1)">备课</span>
              <span style="color:#3FC4FF;font-size:12px;cursor:pointer" v-if="item1.LessonPlanSummaryNum>0&&item1.LessonPlanNum>0" @click="goyibeike(item1)">已反馈</span>
              <span style="color:#FFA800;font-size:12px;" v-if="item1.LessonPlanSummaryNum==0&&item1.LessonPlanNum>0">未反馈</span>
              <span class="fankuiBtn" v-if="AccountType&&item1.LessonPlanSummaryNum==0&&item1.LessonPlanNum>0" @click="goyibeike(item1)">反馈</span>
            </div>
          </div>
          <div class="TeacherInfo_List" v-for="(item,index) in item1.planListTeacher">
            <div class="timeleft">
              <div class="Plan-StartTime">
                {{item.StartTime}}-{{item.EndTime}}
              </div>
            </div>
            <div class="timeright">
              <div class="record_List">
                <div class="TeacherNameList">
                  <div>
                    <span class="TeacherName">学员名单：</span>
                    <span style="color:#333333;">{{item.AllGuestStr}}</span>
                  </div>
                  <div>
                    <span class="TeacherName">出勤名单：</span>
                    <span style="color:#333333;">{{item.GuestStr}}</span>
                  </div>
                  <li class="cicle1">
                    {{item.TeacherName.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="backgroundColor:#3FC4FF;"
                    @click="goyibeike(item)">已备课</span>
                  <span class="beikeBtn" v-if="AccountType&&item.LessonPlanNum==0" @click="goBeike(item)">备课</span>
                  <span class="beikeBtn" v-if="AccountType&&item.LessonPlanNum>0" @click="goBeike(item)">修改</span>
                  <span class="beikeBtn" style="backgroundColor:#C0C4CC;"
                    v-if="!AccountType&&item.LessonPlanNum===0">未备课</span>
                </div> -->
              </div>
            </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: [],
        newDataListRes: [],
        AccountType: true,
      }
    },
    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;
      let userInfo = this.getLocalStorage();
      this.AccountType = userInfo.AccountType == 2 ? true : false; //是否是教师
      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 => {
          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;
                this.newDataListRes = x.planListResult;
              }
            })
          }
        })
      },
      //点击
      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;
            this.newDataListRes = x.planListResult;
          }
        })
      },
      //获取备课状态
      getLessonStatus(num) {
        if (num < 10) {
          num = '0' + num
        }
        var Str = '';
        this.dataList.forEach(x => {
          if (parseInt(x.DateDay) == parseInt(num)) {
            if (x.IsLessonStatus == 0) {
              Str = '未备课'
            }
            if (x.IsLessonStatus == 1) {
              Str = '部分'
            }
            if (x.IsLessonStatus == 2) {
              Str = '已备课'
            }
            if (x.IsLessonStatus == -1) {
              Str = ''
            }
          }
        })
        return Str;
      },
      //跳转至备课
      goBeike(item) {
        // var tempStr = '/course/lessonPreparation?ClassId=' + item.ClassId + '&School_Id=' + item.School_Id +
        //   '&ClassPlanId=' + item.ClassPlanId + '&Ranks=' + item.Ranks;
        // this.$router.push({
        //   path: tempStr
        // });
        this.OpenNewUrl("/course/lessonPreparation", {
          ClassId: item.ClassId,
          School_Id:item.School_Id,
          ClassPlanId:item.ClassPlanId,
          Ranks:item.Ranks
        });
      },
      goyibeike(item) {
        this.OpenNewUrl("/course/prepareclassDetails", {
          ClassId: item.ClassId,
          ClassPlanId:item.ClassPlanId,
          LessonPlanNum:item.LessonPlanNum,
          LessonPlanSummaryNum:item.LessonPlanSummaryNum,
          TeacherId:item.TeacherId
        });

        // var tempStr = '/course/prepareclassDetails?ClassId=' + item.ClassId + '&ClassPlanId=' + item.ClassPlanId + 
        //   '&LessonPlanNum=' + item.LessonPlanNum + '&LessonPlanSummaryNum='+ item.LessonPlanSummaryNum + '&TeacherId=' + item.TeacherId;
        // this.$router.push({
        //   path: tempStr
        // });
      }
    }
  }

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

</style>
