<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&&isSigned">
          <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: {}, //点击选中复制
        isSigned: true
      }
    },
    created() {

    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        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);
          })
        })

        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;
      },
      //获取第一个字
      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;
            }
            var count = 0;
            this.dayObj.GuestList.forEach(x => {
              if (x.IsCheck == -1) {
                count++;
              }
            })
            if (count == this.dayObj.GuestList.length) {
              this.isSigned = true;
            } else {
              this.isSigned = 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;
          }
        })
      }
    },
    watch: {
      setingObj: function (val, oldval) {
        this.addMsg.ClassId = val.ClassId;
        this.initData();
      }
    }
  }

</script>
