<style>
  .imgstyle {
    cursor: pointer;
  }

</style>
<template>
  <div class="teacherCourseList">
    <div class="el-card__header">
      <span>老师排课</span>
      <div style="display: flex;flex-direction: row;align-items: center">
        <el-button type="primary" class="el-button--small" @click="addRecharge">新增</el-button>
      </div>
    </div>


    <div class="page-body teacherLesson" style="background: white;margin-top: 15px;padding: 15px">
      <div class="block">
        <span>老师</span>
        <el-select class="w200" @change="getList()" style="margin-right: 10px;" v-model="msg.TeacherId" size="small"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in teacherList" :key="item.ID" :label="item.Name" :value="item.ID">
          </el-option>
        </el-select>
      </div>
      <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>有课</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}}
                <span class="TeacherName">{{item.TeacherName}}</span>
                <li class="cicle1">
                  <img :src="item.TeacherLogo" alt="" style="width: 100%;height: 100%;border-radius: 50%">
                </li>
              </div>
              <div class="TeacherContent">
                <div>课程名称：{{item.CourseName}}</div>
                <div>上课时间：{{item.StudyStartDate}}-{{item.StudyEndDate}}</div>
                <div>上课时长：{{item.StudyDuration}}{{item.DurationUnitName}}</div>
                <div>最少约课时长：{{item.MinDuration}}分钟</div>
                <div>需要点数：{{item.PointNum}}点</div>
                <div style="display:flex;align-items:center;"> 
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(item)">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <img src="../../assets/img/setup/del.png" alt="" style="margin:0 10px;" class="imgstyle" @click="delete_b(item)">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="订单" placement="top">
                    <span class="paike_xianqing">
                      <i class="iconfont icon-xiangqing" @click="goPaike(item)"></i>
                    </span>
                  </el-tooltip>
                </div>
              </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-if="item.LessonPlanNum==0" @click="goBeike(item)">备课</span>
                <span class="beikeBtn" v-if="item.LessonPlanNum>0" @click="goBeike(item)">修改</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "teacherCourseList",
    data() {
      return {
        msg: {
          SelectStartTime: '',
          SelectEndTime: '',
          TeacherId: 0,
        },
        changeState: false,
        dateList: [],
        newDataList: [],
        tableData: [],
        count: 0,
        loading: false,
        dataNum: [],
        EnableMsg: {
          Ids: '',
          TeacherStatus: 0,
        },
        teacherList: [],
      }
    },
    created() {
      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.SelectStartTime = this.tYear + '-' + this.tMonth + '-' + '01';
      this.msg.SelectEndTime = this.tYear + '-' + this.tMonth + '-' + this.dataNum;

      this.getList();
      this.getTeacherList()

    },
    methods: {
      getList() {
        this.loading = true;
        this.apipost("/api/Point/GetTeacherCourseList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            var month = this.tMonth;
            var day = this.ckedIndex;
            if (month < 10) {
              month = '0' + month;
            }
            if (day < 10) {
              day = '0' + day;
            }
            if (this.dataList.length > 0) {
              this.dataList.forEach(x => {
                if (x.DateYear == this.tYear && x.DateMonth == month && x.DateDay == day) {
                  this.newDataList = x.PlanList;
                }
              })
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      getTeacherList() {
        this.apipost("/api/Education/GetTeacherList", {}, res => {
          if (res.data.resultCode == 1) {
            this.teacherList = res.data.data
          } else {
            this.Error(res.data.message);
          }
        })
      },
      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.SelectStartTime = this.tYear + '-' + this.tMonth + '-' + '01';
        this.msg.SelectEndTime = 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.SelectStartTime = this.tYear + '-' + this.tMonth + '-' + '01';
        this.msg.SelectEndTime = this.tYear + '-' + this.tMonth + '-' + this.dataNum;
        this.getList();
      },
      //获取备课状态
      getLessonStatus(num) {
        if (num < 10) {
          num = '0' + num
        }
        var Str = '';
        if(this.dataList&&this.dataList.length>0){
          this.dataList.forEach(x => {
            if (parseInt(x.DateDay) == parseInt(num)) {
              if (x.HaveCourseCount >0) {
                Str = '有课'
              }
            }
          })
          return Str;
        }
      },
      //点击
      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;
          }
        })
      },
      addRecharge() {
        this.$router.push('/addteacherCourse');
      },
      Edit(row) {
        this.$router.push({
          name: 'addteacherCourse',
          query: {
            ID: row.ID,
            blank: "y"
          }
        });
      },
      delete_b(row) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "/api/Point/DeleteTeacherCourse", {
              Id: row.ID
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
          );
        });
      },
      goPaike(item){
        this.$router.push({
            name: 'pointOrderList',
            query: {
              ID:item.ID
            }
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    },
  }

</script>

<style>
  .teacherCourseList .el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;

  }

  .teacherCourseList .el-button--small {
    padding: 9px 15px;
  }

  .teacherCourseList .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    /*margin-left: 10px;*/
  }

  .teacherCourseList .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .teacherCourseList .content .searchInput {
    line-height: normal;
    display: inline-table;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
  }

  .teacherCourseList .content {
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    box-sizing: border-box;
  }

  .teacherCourseList .el-tag {
    margin-right: 5px;
  }

  .teacherCourseList .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

  .teacherLesson .TeacherTop {
    display: flex;
    min-width: 1200px;
    margin-top: 15px;
  }

  .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: 90%;
    display: inline-block;
    margin-left: 10px;
  }

  .teacherLesson .beikeStatus {
    padding: 2px 3px;
    margin-top: 5px;
    background-color: #2961FE;
    color:red;
    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 {
    line-height: 30px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 12px;
    padding: 10px 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{
   color:#fff!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);
    margin-left: 10px;
  }
  .paike_xianqing{
    width:32px;
    height:32px;
    display: inline-block;
    border-radius: 50%;
    background-color: #faecd8;
    color:#e6a23c;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }
</style>
