<style>
  .lesson_Form .calendar-day {
    text-align: center;
    color: #202535;
    line-height: 30px;
    font-size: 12px;
  }

  .lesson_Form .is-selected {
    color: #F8A535;
    font-size: 10px;
    margin-top: 5px;
  }

  #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
    content: '当月';
  }

  .lesson_Form .el-calendar-day {
    position: relative;
  }

  .lesson_Form .calendar-day {
    position: absolute;
    bottom: -5px;
    left: 5px;
  }

  .lesson_Form .calenderHeader {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .lesson_Form .calendarTop {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-left: -7px;
    align-items: center;
    transform: scale(0.9);
  }

  .lesson_Form .calendarInner {
    font-size: 12px;
    margin: -4px 0 0 -7px;
    transform: scale(0.9);
  }

  .lesson_Form .el-calendar-table .el-calendar-day {
    padding: 5px;
  }

  .lesson_Form .caldendarTeacher {
    display: flex;
    font-size: 12px;
    right: 3px;
    justify-content: space-between;
    align-items: center;
    margin-top: -2px;
    transform: scale(0.9);
    position: absolute;
    bottom: 2px;
  }

  .calenderDialog {
    width: 300px;
    height: auto;
  }

  .calenderClassDate {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .delBtnStyle {
    position: absolute;
    right: 6px;
    top: -9px;
    width: 20px;
    height: 20px;
    border: 1px solid red;
    background-color: red;
    color: #fff;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
  }
  .StudentInfo_List{
    display: flex;
    width:100%;
    margin:0 20px;
    padding:0 40px 0 20px;
    justify-content: space-between;
    border-bottom:1px solid #d1d1d1;
  }
  .Show_SignBack{
    margin:20px;
    color:#2961FE;
  }
  .Lessicon_Edit:hover{
    color:red;
  }
  .Less_Close:hover{
    color:red;
  }
  .lessStudentList{
    margin-top:10px;
  }
  .lessStuTitle{
    margin:20px;
    padding-left:20px;
    font-size:12px;
  }
  .lessStuInnerList{
    display:flex;
    margin:0 40px;
    min-height: 300px;
  }
  .lessList{
    width:90px;
    height:110px;
    border:1px solid #d1d1d1;
    border-radius: 5px;
    text-align: center;
    margin-right:10px;
    cursor: pointer;
    box-shadow: 4px 4px 5px #d1d1d1;
  }
  .less_Isout{
    font-size:12px;
    color:#2961FE;
  }
  .classQue{
    background-color: rgb(63, 196, 255);
  }
  .classChu{
    background-color: #f2f2f2;
  }
  .classChu .commonLessName{
    color:#000;
  }
  .classQue .commonLessName{
    color:#fff;
  }
</style>
<template>
  <div v-if="!isShowSign">
    <div class="lesson_Form">
      <div class="calenderHeader">
        <div>
          <el-radio-group v-model="checkedDays" size="mini">
            <el-radio-button label="日"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <!-- <el-radio-button style="margin-left:20px;border-left:1px solid #DCDFE6;" label="今天"></el-radio-button> -->
          </el-radio-group>
        </div>
        <div>
          <q-btn color="accent q-px-md" class="q-mr-md" icon="add" size="12px" label="新增日程" @click="addNew()">
            <q-popup-proxy>
              <q-banner v-if="isShowMenu">
                <div class="calenderDialog">
                  <div style="margin:10px 0 15px 0;">新增课程安排</div>
                  <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="addMsg.TeacherId"
                    ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false" class="col-6 q-pb-lg" emit-value
                    map-options />
                  <q-input filled v-model="addMsg.ClassDate" class="col-6 q-pb-lg" mask="date" label="上课时间">
                    <template v-slot:append>
                      <q-icon name="event" class="cursor-pointer">
                        <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                          <q-date v-model="addMsg.ClassDate" @input="() => $refs.qDateProxy1.hide()" />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                  <q-toggle size="md" label="更多设置" left-label color="primary" :false-value="0" :true-value="1"
                    v-model="isSetMore" />
                  <template v-if="isSetMore==1">
                    <q-select filled stack-label option-value="RoomId" option-label="RoomName"
                      v-model="addMsg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false"
                      class="col-6 q-pb-lg" emit-value map-options />
                    <div style="display:flex;justify-content:flex-end;margin-bottom:20px;">
                      <q-btn @click="addStep()" size="10px" round color="primary" icon="iconfont icon-img_haha" />
                    </div>
                    <div class="row wrap" style="position:relative;" v-for="(subItem,subIndex) in addMsg.PlanTimeList">
                      <div class="col-6">
                        <q-input filled stack-label maxlength="20" :dense="false" v-model="subItem.StartTime"
                          ref="StartTime" class="col-6 q-pr-lg q-pb-lg" label="" :rules="[val => !!val || '请填写开始时间']" />
                      </div>
                      <div class="col-6">
                        <q-input filled stack-label maxlength="20" :dense="false" v-model="subItem.EndTime" ref="EndTime"
                          class="col-6 q-pr-lg q-pb-lg" label="" :rules="[val => !!val || '请填写开始时间']" />
                      </div>
                      <div class="delBtnStyle">
                        <i @click="delStep(subIndex)" class="iconfont icon-guanbi"></i>
                      </div>
                    </div>
                  </template>
                  <q-card-actions align="right" class="bg-white">
                    <q-btn label="取消" flat color="grey-10" @click="isShowMenu=false" style="font-weight:400 !important" />
                    <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="saveSteps" />
                  </q-card-actions>
                </div>
              </q-banner>
            </q-popup-proxy>
          </q-btn>
        </div>
      </div>
      <el-calendar v-model="value" id="calendar">
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{date, data}">
          <!--自定义内容-->
          <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
          <div v-for="item in calendarData" @click="getClicked(item)">
            <div v-if="item.ClassDateStr==data.day">
              <div class="calendarTop">
                <div>{{item.RoomName}}</div>
                <div>
                  <i class="iconfont icon-edit Lessicon_Edit" @click.stop="getInfo(item)">
                    <q-popup-proxy>
                      <q-banner v-if="isShowEdit">
                        <div class="calenderDialog">
                          <div style="margin:10px 0 15px 0;">{{item.ClassDateStr}}课程安排</div>
                          <q-select filled stack-label option-value="TId" option-label="TeacherName"
                            v-model="addMsg.TeacherId" ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false"
                            class="col-6 q-pb-lg" emit-value map-options />
                          <!-- <div class="calenderClassDate">
                            <div>上课时间:{{item.ClassDateStr}}</div>
                            <div>
                              <i class="iconfont icon-zhuanhuan1"></i><span style="color:#2961fe;cursor:pointer;" @click="isShowCanlder=true;">变更时间</span>
                            </div>
                          </div> -->
                          <q-input filled v-model="addMsg.ClassDate" class="col-6 q-pb-lg" mask="date" label="上课时间">
                            <template v-slot:append>
                              <q-icon name="event" class="cursor-pointer">
                                <q-popup-proxy ref="qDateProxy3" transition-show="scale" transition-hide="scale">
                                  <q-date v-model="addMsg.ClassDate" @input=' () => $refs.qDateProxy3[0].hide()' />
                                </q-popup-proxy>
                              </q-icon>
                            </template>
                          </q-input>
                          <q-toggle size="md" label="更多设置" left-label color="primary" :false-value="0" :true-value="1"
                            v-model="isSetMoreTwo" />
                          <template v-if="isSetMoreTwo==1">
                            <q-select filled stack-label option-value="RoomId" option-label="RoomName"
                              v-model="addMsg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室"
                              :dense="false" class="col-6 q-pb-lg" emit-value map-options />
                            <div style="display:flex;justify-content:flex-end;margin-bottom:20px;">
                              <q-btn @click="addStep()" size="10px" round color="primary" icon="iconfont icon-img_haha" />
                            </div>
                            <div class="row wrap" style="position:relative;"
                              v-for="(subItem,subIndex) in addMsg.PlanTimeList">
                              <div class="col-6">
                                <q-input filled stack-label maxlength="20" :dense="false" v-model="subItem.StartTime"
                                  ref="StartTime" class="col-6 q-pr-lg q-pb-lg" label=""
                                  :rules="[val => !!val || '请填写开始时间']" />
                              </div>
                              <div class="col-6">
                                <q-input filled stack-label maxlength="20" :dense="false" v-model="subItem.EndTime"
                                  ref="EndTime" class="col-6 q-pr-lg q-pb-lg" label=""
                                  :rules="[val => !!val || '请填写开始时间']" />
                              </div>
                              <div class="delBtnStyle">
                                <i @click="delStep(subIndex)" class="iconfont icon-guanbi"></i>
                              </div>
                            </div>
                          </template>
                          <q-card-actions align="right" class="bg-white">
                            <q-btn label="取消" flat color="grey-10" @click="isShowEdit=false"
                              style="font-weight:400 !important" />
                            <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
                              @click="saveSteps" />
                          </q-card-actions>
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </i>
                  <i class="iconfont icon-guanbi Less_Close" style="margin-left:5px;" @click.stop="delInfo(item)"></i>
                </div>
              </div>
              <div class="calendarInner">
                <div v-for="(subItem,subIndex) in item.TimeList">
                  {{subIndex+1}}节课 {{subItem.StartTime}}-{{subItem.EndTime}}
                </div>
              </div>
              <div class="caldendarTeacher">
                <div style="margin-right:5px;">{{item.TeacherName}}</div>
                <div>
                  <q-avatar size="sm" v-if="item.UserIcon">
                    <img :src="item.UserIcon" />
                  </q-avatar>
                  <q-avatar size="sm" color="teal-10" text-color="white" v-if="!item.UserIcon">
                    {{GetFirst(item.TeacherName)}}</q-avatar>
                </div>
              </div>
            </div>
            <div v-else></div>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
  <div v-else>
    <div>
      <div class="Show_SignBack">
        <span @click="isShowSign=false" style="cursor:pointer;"><i class="iconfont icon-zuo1"></i>返回</span>
      </div>
      <div class="StudentInfo_List">
        <div>
          <div>授课老师</div>
          <div>{{dayObj.TeacherName}}</div>
        </div>
        <div>
          <div>授课时间</div>
          <div>{{dayObj.ClassDate}}</div>
        </div>
        <div>
          <div>教室</div>
          <div>{{dayObj.RoomName}}</div>
        </div>
        <div>
          <div>授课时长</div>
          <div>{{dayObj.TotalHour}}小时 ({{dayObj.ClassNum}}课时)</div>
        </div>
      </div>
      <div class="lessStudentList">
        <div class="lessStuTitle">学生签到情况</div>
        <div class="lessStuInnerList">
          <div class="lessList" v-for="(item,index) in dayObj.GuestList" :key="index" :class="{'classQue':isShowSignBtn&&item.IsCheck==0,'classChu':isShowSignBtn&&
            item.IsCheck==1}" @click="changeStatus(item)">
            <q-avatar size="md" style="margin:12px 0 5px 0" v-if="item.UserIcon">
              <img :src="item.UserIcon" />
            </q-avatar>
            <q-avatar size="md" color="teal-10" style="margin:12px 0 5px 0" text-color="white" v-if="!item.UserIcon">
              {{item.GuestName[0]}}</q-avatar>
            <div style="margin:5px 0;" class="commonLessName">{{item.GuestName}}</div>
            <div class="less_Isout" v-if="isShowSignBtn">
              <span v-if="item.IsCheck==0">出勤</span>
              <span v-if="item.IsCheck==1">缺勤</span>
              <!-- <span v-if="item.IsCheck==-1">缺勤</span> -->
            </div>
            <div class="less_Isout" v-else>
              <span v-if="item.IsCheck==0">出勤</span>
              <span v-if="item.IsCheck==1">缺勤</span>
              <span v-if="item.IsCheck==-1">未签到</span>
            </div>
          </div>
        </div>
        <q-card-actions align="right" class="bg-white" v-if="isShowSignBtn">
          <q-btn label="取消" flat color="grey-10"
            style="font-weight:400 !important" @click="isShowSign=false" />
          <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
            @click="saveSign()" />
        </q-card-actions>

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

<script>
  import {
    quertClassPlan,
    setClassPlan,
    RemoveClassPlan,
    GetDayClassPlan,
    addClassCheck
  } from '../../api/course/class';
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from '../../api/school/index'

  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    name: "calendar",
    data() {
      return {
        calendarData: [],
        value: new Date(),
        checkedDays: '月',
        TeacherList: [], //老师下拉数据
        addMsg: {
          ClassPlanId: 0,
          ClassId: 1,
          ClassDate: "",
          ClassDateStr: "",
          ClassRoomId: 1,
          RoomName: "",
          TeacherId: 1,
          TeacherName: "",
          UserIcon: "",
          PlanTimeList: [{
            ClassTimeId: 0,
            StartTime: "",
            EndTime: "",
          }]
        },
        isSetMore: 1, //是否显示更多设置
        isSetMoreTwo: 1,
        ClassRoomList: [], //教室下拉数据
        isShowMenu: false, //是否显示弹出
        isShowEdit: false, //是否显示修改弹出
        isShowCanlder: false, //是否显示日历修改日期

        isShowSign:false,
        dayMsg:{  //获取某一天的计划信息请求
          ClassPlanId:0,
          School_Id:0,
          ClassId:0
        },
        dayObj:{},
        isShowSignBtn:false, //是否显示签到提交按钮
        comChecked:{}, //点击选中复制
      }
    },
    created() {
      this.$nextTick(() => {
        // 点击上个月
        let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn1.addEventListener('click', () => {
          var d = new Date(this.value);
          var datetime = d.getFullYear() + '-' + (d.getMonth() + 1);
          this.getClassPlan(datetime);
        })
        // 点击今天
        let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
        prevBtn2.addEventListener('click', () => {
          var d = new Date(this.value);
          var datetime = d.getFullYear() + '-' + (d.getMonth() + 1);
          this.getClassPlan(datetime);
        })
        // 点击下个月
        let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
        prevBtn3.addEventListener('click', () => {
          var d = new Date(this.value);
          var datetime = d.getFullYear() + '-' + (d.getMonth() + 1);

          this.getClassPlan(datetime);
        })
      })
    },
    mounted() {
      var day2 = new Date();
      day2.setTime(day2.getTime());
      var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1);
      this.getClassPlan(s2);
      this.GetTeacherList();
      this.getClassRoomList();
      this.addMsg.TeacherId = this.setingObj.Teacher_Id;
      this.addMsg.ClassDate = this.setingObj.OpenTime;

      console.log(this.setingObj, 'setingObj');
    },
    methods: {
      //获取第一个字
      GetFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      },
      //获取班级上课计划列表
      getClassPlan(datetime) {
        var msg = {
          ClassId: this.setingObj.ClassId,
          QMonth: datetime
        };
        quertClassPlan(msg).then(res => {
          if (res.Code == 1) {
            this.calendarData = res.Data;
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        })
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
      //点击新增
      addNew() {
        this.isShowMenu = true;
        this.addMsg.ClassPlanId = 0;
        this.addMsg.PlanTimeList = [{
          ClassTimeId: 0,
          StartTime: "",
          EndTime: "",
        }]
      },
      //删除
      delStep(index) {
        this.addMsg.PlanTimeList.splice(index, 1);
      },
      //点击新增
      addStep() {
        var obj = {
          ClassTimeId: 0,
          StartTime: '',
          EndTime: ''
        }
        this.addMsg.PlanTimeList.push(obj);
      },
      //保存新增修改
      saveSteps() {
        setClassPlan(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.isShowMenu = false;
            this.isShowEdit = false;
            var d = new Date(this.value);
            var datetime = d.getFullYear() + '-' + (d.getMonth() + 1);
            this.getClassPlan(datetime);
          }
        })
      },
      //日历点击修改
      getInfo(item) {
        this.isShowEdit = true;
        var Obj = JSON.parse(JSON.stringify(item));
        this.addMsg.ClassPlanId = Obj.ClassPlanId;
        this.addMsg.ClassId = Obj.ClassId;
        this.addMsg.ClassDate = Obj.ClassDate;
        this.addMsg.ClassRoomId = Obj.ClassRoomId;
        this.addMsg.TeacherId = Obj.TeacherId;
        this.addMsg.PlanTimeList = Obj.TimeList;
      },
      //日历点击删除
      delInfo(item) {
        this.$q.dialog({
          title: "删除课程",
          message: '',
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          let msg = {
            ClassPlanId: item.ClassPlanId
          }
          RemoveClassPlan(msg).then(res => {
            if (res.Code == 1) {
              this.getClassPlan();
            }
          })
        });
      },
      //点击日历
      getClicked(item){
        if(item.IsEndDate){
          this.isShowSign=true;
          this.dayMsg.ClassPlanId = item.ClassPlanId;
          this.dayMsg.School_Id = this.setingObj.School_Id;
          this.dayMsg.ClassId = this.setingObj.ClassId;
          this.comChecked = item;
          this.getDayClassPlan();
        }
      },
      //获取某一天的计划信息
      getDayClassPlan(){
        GetDayClassPlan(this.dayMsg).then(res => {
          if (res.Code == 1) {
             this.dayObj = res.Data;
             var d = new Date();
             var datetime = d.getFullYear() + '-' + (d.getMonth() + 1)+ '-'+ d.getDate();
             if(this.dayObj.ClassDate==datetime){
               this.isShowSignBtn=true;
             }else{
               this.isShowSignBtn=false;
             }
             this.dayObj.GuestList.forEach(x=>{
               if(this.isShowSignBtn&&x.IsCheck==-1){
                 x.IsCheck=0;
               }
             })
          }
        })
      },
      //点击切换签到
      changeStatus(item){
        if(this.isShowSignBtn){
          if(item.IsCheck==0){
            item.IsCheck=1;
          }else{
            item.IsCheck=0;
          }
        }
      },
      //点击签到
      saveSign(){
        let signMsg = [];
        this.dayObj.GuestList.forEach(x=>{
          let obj={
            classId:this.setingObj.ClassId,
            ClassDate:this.comChecked.ClassDateStr,
            ClassRoomId:this.comChecked.ClassRoomId,
            School_Id:this.setingObj.School_Id,
            TeacherId:this.comChecked.TeacherId,
            OrderGuestId:x.Id,
            CheckStatus:x.IsCheck
          }
          signMsg.push(obj);
        })
        addClassCheck(signMsg).then(res => {
          if (res.Code == 1) {
            this.isShowSign=false;
          }
        })
      }
    },
  }

</script>
