<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);
    height: 24px;
  }

  .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;
    height: 120px;
  }

  .lesson_Form .el-calendar-table:not(.is-range) td.next,
  .lesson_Form .el-calendar-table:not(.is-range) td.prev {
    pointer-events: none;
  }

  .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: 450px;
    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;
    color: #000;
  }

  .lessStuInnerList {
    display: flex;
    margin: 0 40px;
    min-height: 130px;
  }

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

  .el-select-dropdown,
  .el-picker-panel {
    z-index: 9999 !important;
  }

  .lesson_Form .el-calendar__header {
    display: none;
  }

  .lesson_Form .on-left {
    margin-right: 5px;
  }

  .lesson_Form .lessForm_Class {
    border-bottom: 1px dashed #EEE;
  }

  .lesson_Form .q-btn__wrapper {
    padding: 4px 5px;
  }
</style>
<template>
  <div v-if="!isShowSignForm">
    <div class="lesson_Form">
      <div class="calenderHeader">
        <div>
          <el-radio-group v-model="checkedType" size="mini">
            <el-radio-button :label="1">列表模式</el-radio-button>
            <el-radio-button :label="2">日历模式</el-radio-button>
          </el-radio-group>
        </div>
        <div>
          <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增日程" v-if="isShowBtn" @click="addNew()">
            <q-popup-proxy>
              <q-banner v-if="isShowAddForm">
                <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"
                      :key="subIndex">
                      <div class="col-4">
                        <q-input filled v-model="subItem.StartTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                          <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                              <q-popup-proxy transition-show="scale" transition-hide="scale">
                                <q-time v-model="subItem.StartTime">
                                  <div class="row items-center justify-end">
                                    <q-btn v-close-popup label="确定" color="primary" flat />
                                  </div>
                                </q-time>
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                      <div class="col-4">
                        <q-input filled v-model="subItem.EndTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                          <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                              <q-popup-proxy transition-show="scale" transition-hide="scale">
                                <q-time v-model="subItem.EndTime">
                                  <div class="row items-center justify-end">
                                    <q-btn v-close-popup label="确定" color="primary" flat />
                                  </div>
                                </q-time>
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                      <div class="col-4">
                        <q-input filled stack-label maxlength="10" :dense="false" v-model="subItem.TimeHour"
                          ref="TimeHour" class="col-4 q-pr-lg q-pb-lg" label="消耗课时" :rules="[val => !!val || '请填写消耗课时']"
                          @keyup.native="checkPrice(subItem,'TimeHour')" />
                      </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="isShowAddForm=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>
      <div style="text-align:right;margin:12px 20px 8px 0">
        <el-date-picker v-model="comMsg.QMonth" type="month" size="small"  value-format="yyyy-MM"
          @change="getClassPlan()" placeholder="选择月">
        </el-date-picker>
      </div>
      <template v-if="checkedType===1">
        <q-table style="margin:20px;" :pagination="msg" no-data-label="暂无相关数据" flat
          class="sticky-column-table sticky-right-column-table" separator="none" :data="calendarData" :columns="columns"
          row-key="name">
          <template v-slot:body-cell-TimeList="props">
            <q-td auto-width :props="props">
              <div v-for="(item,index) in props.row.TimeList" class="lessForm_Class" :key="index">
                {{index+1}}节课 {{item.StartTime}}-{{item.EndTime}}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-CheckNum="props">
            <q-td>
              <div v-for="(item,index) in props.row.TimeList" class="lessForm_Class" :key="index">
                <span style="color:green;">{{item.CheckNum}}</span>/<span
                  style="color:red;">{{item.NoCheckNum}}</span>/<span
                  style="color:orange;">{{item.AskForLeaveNum}}</span>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-signUser="props">
            <q-td>
              <div v-for="(item,index) in props.row.TimeList" class="lessForm_Class" :key="index">
                <template v-if="currentUser.Id==1">
                  <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="签到"
                    @click.stop="getClicked(props.row,item)"></q-btn>
                </template>
                <template v-else>
                  <q-btn v-if="props.row.IsCanSign" flat size="xs" icon="edit" color="accent" style="font-weight:400"
                    label="签到" @click.stop="getClicked(props.row,item)"></q-btn>
                </template>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props" v-if="isShowBtn">
            <q-td :props="props" style="width:130px;">
              <q-btn v-if="isShowEdit(props.row) " flat size="xs" icon="edit" color="accent" style="font-weight:400;"
                label="编辑" @click="getInfo(props.row)">
                <q-popup-proxy>
                  <q-banner v-if="isShowEditForm">
                    <div class="calenderDialog">
                      <div style="margin:10px 0 15px 0;">{{props.row.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 />
                      <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" :key="subIndex">
                          <div class="col-4">
                            <q-input filled v-model="subItem.StartTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                              <template v-slot:append>
                                <q-icon name="access_time" class="cursor-pointer">
                                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                                    <q-time v-model="subItem.StartTime">
                                      <div class="row items-center justify-end">
                                        <q-btn v-close-popup label="确定" color="primary" flat />
                                      </div>
                                    </q-time>
                                  </q-popup-proxy>
                                </q-icon>
                              </template>
                            </q-input>
                          </div>
                          <div class="col-4">
                            <q-input filled v-model="subItem.EndTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                              <template v-slot:append>
                                <q-icon name="access_time" class="cursor-pointer">
                                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                                    <q-time v-model="subItem.EndTime">
                                      <div class="row items-center justify-end">
                                        <q-btn v-close-popup label="确定" color="primary" flat />
                                      </div>
                                    </q-time>
                                  </q-popup-proxy>
                                </q-icon>
                              </template>
                            </q-input>
                          </div>
                          <div class="col-4">
                            <q-input filled stack-label maxlength="10" :dense="false" v-model="subItem.TimeHour"
                              ref="TimeHour" class="col-4 q-pr-lg q-pb-lg" label="消耗课时"
                              :rules="[val => !!val || '请填写消耗课时']" @keyup.native="checkPrice(subItem,'TimeHour')" />
                          </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="isShowEditForm=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>
              <template v-if="props.row.IsCanEdit">
                <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
                  @click.stop="delInfo(props.row)"></q-btn>
              </template>
            </q-td>
          </template>
          <template v-slot:bottom>
          </template>
        </q-table>
      </template>
      <template v-else>
        <el-calendar v-model="value" id="calendar" style="margin-bottom:40px;">
          <template slot="dateCell" slot-scope="{date, data}">
            <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
            <div v-for="(item,index) in calendarData" :key="index">
              <div v-if="item.ClassDateStr==data.day">
                <div class="calendarTop">
                  <div>{{item.RoomName}}</div>
                  <div>
                    <i v-if="item.IsCanEdit&&isShowBtn" class="iconfont icon-edit Lessicon_Edit" style="display:none;"
                      @click.stop="getInfo(item)">
                      <q-popup-proxy>
                        <q-banner v-if="isShowEditForm">
                          <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 />
                            <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" :key="subIndex">
                                <div class="col-4">
                                  <q-input filled v-model="subItem.StartTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                                    <template v-slot:append>
                                      <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                          <q-time v-model="subItem.StartTime">
                                            <div class="row items-center justify-end">
                                              <q-btn v-close-popup label="确定" color="primary" flat />
                                            </div>
                                          </q-time>
                                        </q-popup-proxy>
                                      </q-icon>
                                    </template>
                                  </q-input>
                                </div>
                                <div class="col-4">
                                  <q-input filled v-model="subItem.EndTime" class="col-6 q-pr-lg q-pb-lg" mask="time">
                                    <template v-slot:append>
                                      <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                          <q-time v-model="subItem.EndTime">
                                            <div class="row items-center justify-end">
                                              <q-btn v-close-popup label="确定" color="primary" flat />
                                            </div>
                                          </q-time>
                                        </q-popup-proxy>
                                      </q-icon>
                                    </template>
                                  </q-input>
                                </div>
                                <div class="col-4">
                                  <q-input filled stack-label maxlength="10" :dense="false" v-model="subItem.TimeHour"
                                    ref="TimeHour" class="col-4 q-pr-lg q-pb-lg" label="消耗课时"
                                    :rules="[val => !!val || '请填写消耗课时']"
                                    @keyup.native="checkPrice(subItem,'TimeHour')" />
                                </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="isShowEditForm=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 v-if="item.IsCanEdit&&isShowBtn" 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" @click="getClicked(item,subItem)" :key="subIndex">
                    {{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>
      </template>
    </div>
  </div>
  <div v-else>
    <div>
      <div class="Show_SignBack">
        <span @click="isShowSignForm=false" style="cursor:pointer;"><i class="iconfont icon-zuo1"></i>返回</span>
      </div>
      <div class="StudentInfo_List" style="color:#000;">
        <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>
        <q-table :pagination="msg" no-data-label="暂无相关数据" flat class="sticky-column-table" separator="none" hide-bottom
          :data="dayObj.GuestList" :columns="columns2">
          <template v-slot:body-cell-GuestName="props">
            <q-td auto-width :props="props" style="width:25%;">
              <div style="display:flex;align-items:center;">
                <q-avatar size="sm" style="margin:0 5px 5px 0" v-if="props.row.UserIcon">
                  <img :src="props.row.UserIcon" />
                </q-avatar>
                <q-avatar size="sm" color="teal-10" style="margin:5px 0 5px 0" text-color="white"
                  v-if="!props.row.UserIcon">
                  {{props.row.GuestName[0]}}</q-avatar><span style="margin-left:5px;">
                  <template v-if="props.row.IsChaBan==0">{{props.row.GuestName}}</template>
                  <template v-else><span style="color:red;">{{props.row.GuestName}}</span></template>
                  <q-tooltip :offset="[0, 10]" v-if="props.row.IsChaBan==1">
                    插班报入 <br />
                    开始课时：{{props.row.StartClassHours}} <br />
                    生效状态：{{props.row.EffectStatusStr}} <br />
                    生效时间：{{props.row.EffectTime}} <br />
                    <strong v-if="props.row.UpOrderId&&props.row.UpOrderId>0">前置订单：{{props.row.UpOrderId}}</strong><br />
                  </q-tooltip>
                </span>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-IsCheck="props">
            <q-td auto-width :props="props">
              <el-select v-model="props.row.IsCheck" style="width:80px;" size="small" placeholder="小时">
                <el-option label="出勤" :value="0"></el-option>
                <el-option label="缺勤" :value="1"></el-option>
                <el-option label="请假" :value="2"></el-option>
              </el-select>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props" style="width:15%;">
              <el-input v-model="props.row.StudyNum" size="small" maxlength="4"
                @keyup.native="checkInteger(props.row,'StudyNum')"></el-input>
            </q-td>
          </template>
        </q-table>
        <div class="lessStuInnerList" style="display:none;">
          <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>
            </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" style="margin:20px 10px 100px 0;">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="isShowSignForm=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
      },
      isShowMyBtn: {
        type: Number,
        default: null
      }
    },
    name: "calendar",
    data() {
      return {
        calendarData: [],
        value: new Date(),
        checkedDays: '月',
        checkedType: 1,
        TeacherList: [], //老师下拉数据
        addMsg: {
          ClassPlanId: 0,
          ClassId: 0,
          ClassDate: "",
          ClassDateStr: "",
          ClassRoomId: 0,
          RoomName: "",
          TeacherId: 0,
          TeacherName: "",
          UserIcon: "",
          PlanTimeList: [{
            ClassTimeId: 0,
            StartTime: "",
            EndTime: "",
            TimeHour: 0,
          }]
        },
        isSetMore: 1, //是否显示更多设置
        isSetMoreTwo: 1,
        ClassRoomList: [], //教室下拉数据
        dayMsg: { //获取某一天的计划信息请求
          ClassPlanId: 0,
          School_Id: 0,
          ClassId: 0,
          ClassTimeId: 0, //签到的第几节课
        },
        dayObj: {},
        comChecked: {
          ClassDate: "",
          ClassRoomId: 0,
          TeacherId: 0,
          ClassTimeId: 0,
        },
        columns: [{
            name: 'RoomName',
            label: '教室名称',
            field: 'RoomName',
            align: 'left',
          }, {
            name: 'ClassDateStr',
            label: '上课日期',
            field: 'ClassDateStr',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'TimeList',
            label: '上课时间',
            field: 'TimeList',
            align: 'left'
          },
          {
            name: 'CheckNum',
            label: '签到/缺勤/请假',
            field: 'CheckNum',
            align: 'left'
          },
          {
            name: 'signUser',
            label: '签到',
            field: 'signUser',
            align: 'center'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'QuestionId',
            align: 'center'
          }
        ],
        msg: {
          rowsPerPage: 100
        },
        comMsg: {
          ClassId: 0,
          QMonth: ''
        },
        columns2: [{
            name: 'GuestName',
            label: '学生姓名',
            field: 'GuestName',
            align: 'left'
          },
          {
            name: 'SexStr',
            label: '性别',
            field: 'SexStr',
            align: 'left',
          },
          {
            name: 'Mobile',
            label: '电话',
            field: 'Mobile',
            align: 'left'
          },
          {
            name: 'IsCheck',
            label: '是否出勤',
            field: 'IsCheck',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '分钟数',
            field: 'QuestionId',
            align: 'center'
          }
        ],
        isShowBtn: true,
        isShowAddForm: false, //是否显示新增上课计划表单
        isShowEditForm: false, //是否显示修改上课计划表单
        isShowSignForm: false, //是否显示签到表单
        isShowSignBtn: false, //是否显示签到提交按钮
        currentUser: {},
      }
    },
    created() {
      this.currentUser = this.getLocalStorage();
      if (this.setingObj && this.setingObj.ClassId) {
        this.addMsg.ClassId = this.setingObj.ClassId;
      }
      if (this.isShowMyBtn == 1) {
        this.isShowBtn = false;
        this.columns.pop();
      }
    },
    mounted() {
      var d = new Date();
      this.comMsg.QMonth = d.getFullYear() + '-' + (d.getMonth() + 1);
      this.GetTeacherList();
      this.getClassRoomList();
      this.addMsg.TeacherId = this.setingObj.Teacher_Id;
      this.addMsg.ClassDate = this.setingObj.OpenTime;
      this.getClassPlan();
    },
    methods: {
      //是否显示编辑按钮
      isShowEdit(item) {
        var flag = true;
        if (!item.IsCanEdit) {
          if (this.currentUser.Id == 1) {
            flag = true;
          } else {
            flag = false;
          }
        }
        return flag;
      },
      initData() {
        this.$nextTick(() => {
          // 点击上个月、
          let prevBtn1 = document.querySelector('.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-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-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() {
        this.comMsg.ClassId = this.setingObj.ClassId;
        quertClassPlan(this.comMsg).then(res => {
          if (res.Code == 1) {
            this.calendarData = res.Data;
            this.value = this.comMsg.QMonth;
            this.$forceUpdate();
          }
        })
      },
      //获取教师下拉
      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.isShowAddForm = true;
        var d = new Date();
        var seperator1 = "-";
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var strDate = d.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        this.addMsg.ClassDate = currentdate;
        this.addMsg.ClassPlanId = 0;
        this.addMsg.PlanTimeList = [{
          ClassTimeId: 0,
          StartTime: "",
          EndTime: "",
          TimeHour: 0,
        }]
      },
      //删除
      delStep(index) {
        this.addMsg.PlanTimeList.splice(index, 1);
      },
      //点击新增
      addStep() {
        var obj = {
          ClassTimeId: 0,
          StartTime: '',
          EndTime: ''
        }
        this.addMsg.PlanTimeList.push(obj);
      },
      //保存新增修改
      saveSteps() {
        for (let i = 0; i < this.addMsg.PlanTimeList.length; i++) {
          if (this.addMsg.PlanTimeList[i].StartTime == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择第${i+1}节课开始时间`
            })
            return
          }
          if (this.addMsg.PlanTimeList[i].EndTime == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择第${i+1}节课结束时间`
            })
            return
          }
        }
        setClassPlan(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.isShowAddForm = false;
            this.isShowEditForm = false;
            var d = new Date(this.value);
            var datetime = d.getFullYear() + '-' + (d.getMonth() + 1);
            this.getClassPlan();
          }
        })
      },
      //日历点击修改
      getInfo(item) {
        this.isShowEditForm = 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, subItem) {
        this.isShowSignForm = true;
        this.dayMsg.ClassPlanId = item.ClassPlanId;
        this.dayMsg.School_Id = this.setingObj.School_Id;
        this.dayMsg.ClassId = this.setingObj.ClassId;
        this.dayMsg.ClassTimeId = subItem.ClassTimeId;
        this.comChecked.ClassDate = item.ClassDateStr;
        this.comChecked.ClassRoomId = item.ClassRoomId;
        this.comChecked.TeacherId = item.TeacherId;
        this.comChecked.ClassTimeId = subItem.ClassTimeId;
        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();
            //HK 2020-12-25修改
            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++;
                x.StudyNum = this.dayObj.DefaultMinutes;
              }
            })

            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.ClassDate,
            ClassRoomId: this.comChecked.ClassRoomId,
            School_Id: this.setingObj.School_Id,
            TeacherId: this.comChecked.TeacherId,
            OrderGuestId: x.Id,
            CheckStatus: x.IsCheck,
            StudyNum: x.StudyNum == '' ? 0 : x.StudyNum,
            ClassTimeId: this.comChecked.ClassTimeId,
          }
          signMsg.push(obj);
        })
        addClassCheck(signMsg).then(res => {
          if (res.Code == 1) {
            this.isShowSignForm = false;
            this.getClassPlan();
          }
        })
      }
    },
    watch: {
      setingObj: function (val, oldval) {
        this.addMsg.ClassId = val.ClassId;
      }
    }
  }
</script>