dy-admin-manager/src/views/teamBuild/teamSeting/components/coursePlan.vue

<template>
  <div class='father-Wrap'>
    <div class='course-container'>
      <div class="left">
        <el-form :model="leftFrom"
                 ref='leftFrom'
                 :rules="leftRules"
                 :inline="true">
          <el-form-item label="合奏班"
                        prop='all'>
            <el-select v-model="leftFrom.all"
                       @change="changeMixClass">
              <el-option v-for="(item,index) in maxClassList"
                         :key='index'
                         :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排课时间"
                        prop="time">
            <!-- value-format="yyyy-MM-dd" -->
            <el-date-picker v-model="leftFrom.time"
                            style="width:180px;"
                            align="right"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排课次数"
                        prop="num">
            <el-input type="number"
                      v-model="leftFrom.num"></el-input>
          </el-form-item>
        </el-form>
        <p>周次循环<span style="margin-left:10px;">
            <el-button type="text"
                       @click="addWeekDay">添加</el-button>
          </span></p>
        <div class="checkWrap">
          <el-checkbox-group v-model="checkList">
            <div class="chioseday"
                 v-for="(item,index) in week"
                 :key="index">
              <!-- <el-checkbox :label="index"
                         v-model="item.isCheck">{{item.name}}</el-checkbox> -->
              <el-select class='weekSelect'
                         style="width:100px!important"
                         placeholder="星期几"
                         v-model="item.weekNum">
                <el-option v-for='(item,index) in weekList'
                           :key="index"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
              <el-time-select placeholder="起始"
                              v-model="item.startTime"
                              :picker-options="{
                             start: '06:30',
                             step: '00:05',
                             end: '23:30'
                                            }">
              </el-time-select>

              <el-time-select placeholder="结束"
                              v-model="item.endTime"
                              :picker-options="{
                            start: '06:30',
                            step: '00:15',
                            end: '23:30',
                            minTime: item.startTime
                                            }">
              </el-time-select>
              <el-button style="margin-left:10px;"
                         type="text"
                         @click="removeWeek(item)">删除</el-button>
            </div>
          </el-checkbox-group>
          <div class="holidayWrap">
            <el-checkbox v-model="isholiday">跳过节假日</el-checkbox>
            <div class="quickBtn"
                 @click="classCard">一键排课</div>
          </div>
          <!-- <div class="btnWrap">
            <div class="closeBtn"
                 @click='resetaLL'>取消排课</div>
          <div class="okBtn"
               @click="classCard">一键排课</div>
        </div> -->
        </div>

      </div>
      <div class="right">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="课次"
                           width="180">
            <template slot-scope="scope">
              <div>
                {{ scope.$index+1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="classDate"
                           label="日期"
                           width="180">
          </el-table-column>
          <el-table-column prop="week"
                           label="星期"
                           width="180">
          </el-table-column>
          <el-table-column label="课程类型"
                           width="180">
            <template slot-scope="scope">
              <div>
                {{scope.row.type |coursesType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="课程名称"
                           width="180">
          </el-table-column>
          <!-- <el-table-column prop="classTime"
                           label="上课时间"
                           width="180">
          </el-table-column> -->
          <el-table-column label="操作"
                           width="180">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click="OpenSign(scope.row)">查看</el-button>
                <el-button type="text"
                           @click='resetMixCourse(scope.row)'>变更</el-button>
                <el-button type="text"
                           @click='skipClass(scope.row)'>跳过此天</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="btnWrap"
             style="margin-top:40px;">
          <div class="nextBtn"
               @click="resetaLL">取消排课</div>
          <div class="okBtn"
               @click='submitInfo'>确定排课</div>
        </div>
      </div>
      <el-dialog :visible.sync="resetAllClassVisible"
                 width="450px">
        <p style='margin-bottom:20px'>{{resetAllTitle}}</p>

        <div class="resetWrap">
          <el-select v-model="chioseType">
            <el-option v-for='(item,index) in courseTypeList'
                       :key="index"
                       :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
          <!-- signBtnActive: false,
      skipBtnActive: false -->
          <!-- <div class="restBtn"
             :class="signBtnActive?'active':''"
             v-if='buttonType == "SINGLE"'
             @click="resetClass">修改为合奏课</div>

        <div class="restBtn"
             v-if='buttonType == "MIX"'
             :class="signBtnActive?'active':''"
             @click="resetClass">修改为单技课</div> -->
          <!-- <div class="restBtn"
             @click='skipClass'
             :class="skipBtnActive?'active':''">跳过此天</div> -->
        </div>
        <span slot="footer"
              class="dialog-footer">
          <div class="okBtns"
               @click="resetMix">确定</div>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="openSignListVisible"
                 width="450px">
        <el-table :data='SignList'>
          <el-table-column prop="name"
                           label="班级">
          </el-table-column>
          <el-table-column prop="startClassTimeStr"
                           label="开始时间">
            <!-- <template slot-scope="scope">
              <div>
                <p v-if="scope.row.option == 1">{{scope.row.startClassTimeStr}}</p>
                <el-input v-if="scope.row.option == 2"
                          v-model="scope.row.startClassTimeStr"></el-input>
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="endClassTimeStr"
                           label="结束时间">
            <!-- <template slot-scope="scope">
              <div>
                <p v-if="scope.row.option == 1">{{scope.row.endClassTimeStr}}</p>
                <el-input v-if="scope.row.option == 2"
                          v-model="scope.row.endClassTimeStr"></el-input>
              </div>
            </template> -->
          </el-table-column>
          <!-- <el-table-column prop="date"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="scope.row.option == 2"
                           @click="savecolumn(scope.row)">保存</el-button>
                <el-button type="text"
                           v-if="scope.row.option == 1"
                           @click="savecolumn(scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
        <span slot="footer"
              class="dialog-footer">
          <div class="okBtns"
               @click="resetSiginClass">确定</div>
        </span>
      </el-dialog>
    </div>
    <div class="btnWrap"
         style="margin-top:20px;">
      <div class="nextBtn"
           @click="goback">返回</div>
      <!-- <div class="okBtn"
           style="margin-right:30px;"
           @click="gotoNext">确定</div> -->
    </div>
  </div>
</template>
<script>
import { Loading } from 'element-ui';
import { getAllClass, getAllSignClass, workOut, checkCourse } from '@/api/buildTeam'
import axios from 'axios'
import qs from 'qs'
export default {
  // props: {
  //   teamid: {
  //     type: String,
  //     required: true
  //   }
  // },
  data () {
    return {
      resetAllClassVisible: false, //修改合奏课弹窗
      openSignListVisible: false, // 修改单个单技课的弹窗
      first: true,
      leftFrom: {
        all: '',
        time: '',
        num: ''
      },
      tableList: [],
      checkList: [], // 选中的周几
      week: [
        {
          startTime: '',
          endTime: '',
          weekNum: '',
          id: new Date().getTime()
        }
      ],
      weekList: [
        {
          label: '星期日',
          value: 0
        },
        {
          label: '星期一',
          value: 1
        },
        {
          label: '星期二',
          value: 2
        },
        {
          label: '星期三',
          value: 3
        },
        {
          label: '星期四',
          value: 4
        },
        {
          label: '星期五',
          value: 5
        },
        {
          label: '星期六',
          value: 6
        },
      ],
      weekDay: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      maxClassList: [], // 所有的合奏班
      activeSingleList: [], // 合奏班下的所有单技班
      isholiday: false,
      classCardList: [], //这个是传给后台的真正数据集合
      allChioseDate: [], // 记录所有准备排课的日期
      holidayList: [],
      leftRules: {
        all: [{ required: true, message: '请输选择合奏班', trigger: 'blur' }],
        time: [{ required: true, message: '请选择排课时间', trigger: 'blur' }],
        num: [{ required: true, message: '请输入排课次数', trigger: 'blur' }]
      },
      resetAllTitle: '', // 弹窗名
      buttonType: '',
      activeTime: '', // 选中的当前时间课
      signBtnActive: false,
      skipBtnActive: false,
      SignList: [], // 存储当前合奏课里当天的所有单机课
      courseTypeList: [
        { name: '单技课', value: 'SINGLE' },
        { name: '集训单技课', value: 'TRAINING_SINGLE' },
        { name: '合奏课', value: 'MIX' },
        { name: '集训合奏课', value: 'TRAINING_MIX' },
        { name: '课堂课', value: 'CLASSROOM' },
      ],
      chioseType: '',
      tableActive: null, // 当前操作的行
      startClassTimeStr: '',
      endClassTimeStr: '',
      teamid: ''

    }
  },
  created () {
    this.teamid = this.$route.query.id;
    sessionStorage.setItem('resetCode', 3)
    sessionStorage.setItem('setStep', 2)
  },
  mounted () {
    // 根据乐团id 查询 此乐团所有的合奏班
    getAllClass({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.maxClassList = res.data;
      }
    })
    let year = new Date().getFullYear();
    axios.post('/jiari/', qs.stringify({ d: year })).then(res => {
      if (res) {
        this.holidayList = Object.keys(res.data[year])
      }

    })

  },
  methods: {
    // 确定排课
    submitInfo () {
      this.$confirm('课表无误，确定排课', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        workOut({ musicGroupID: this.teamid, courseSchedules: this.classCardList }).then(res => {
          if (res.code == 200) {
            this.$message.success('恭喜您排课成功')
            this.classCardList = [];
          }
        }).catch(res => {
          // this.tableList = [];
          this.classCardList = [];
        })
      }).catch(() => {

      });
    },
    // 一键排课
    classCard () {
      // 验证合奏班里等数据是否填写
      let flag = false
      this.$refs['leftFrom'].validate(val => {
        if (val) {
          flag = true
        }
      })
      if (!flag) {
        this.$message.error('请填写必要参数在进行排课')
        return;
      }
      // 验证周次循环里数据是否完成与有效
      // this.checkTime();
      let classCount = parseInt(this.leftFrom.num);
      let date = this.leftFrom.time;
      // 1 排课时间 2.排课次数 3.排课周期集合 4.排课合奏班的信息 
      this.workOut(date, classCount, this.week, this.leftFrom.all)
      this.$refs['leftFrom'].resetFields();
      this.week = this.$options.data().week;
      this.checkList = [];
    },
    chioseWeek (val) {
    },
    getThinkDate (date, num, type = 1) {
      let Stamp = new Date(date.getTime());
      Stamp.setDate(Stamp.getDate() + parseInt(num)) // 获取当前月数的第几天
      var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var mvar = '';
      if (month < 10) {
        mvar = '0' + month;
      } else {
        mvar = month + '';
      }
      var day = Stamp.getDate();
      var dvar = '';
      if (day < 10) {
        dvar = '0' + day;
      } else {
        dvar = day + '';
      }
      if (type == 2) {
        return mvar + dvar;
      } else {

        return year + "-" + mvar + '-' + dvar;
      }

    },
    changeMixClass (val) {
      // 根据合奏班id获取合奏班下的所有单技班
      console.log(this.first);
      let activeVal = val;
      if (!this.first) {
        Object.assign(this.$data, this.$options.data());
        getAllClass({ musicGroupId: this.teamid }).then(res => {
          if (res.code == 200) {
            this.maxClassList = res.data;
          }
        })
        this.leftFrom.all = activeVal

      }
      this.first = false;
      this.activeSingleList = [];
      getAllSignClass({ musicGroupId: this.teamid, mixClassGroupId: val }).then(res => {
        if (res.code == 200) {
          this.activeSingleList = res.data.map(item => {
            item.mixid = val
            return item;
          });
        }
      })
    },
    // 修改
    resetMixCourse (row) {
      // console.log(row);
      this.resetAllClassVisible = true;
      this.resetAllTitle = `将${row.classDate} ,${row.week}修改`;
      this.buttonType = row.type;
      this.activeTime = row.classDate; // 选中那一行的日期
      this.startClassTimeStr = row.startClassTimeStr
      this.endClassTimeStr = row.endClassTimeStr;
      // 选中那一行的开始时间
      // 选中那一行的结束时间
      this.chioseType = row.type;
      this.tableActive = row;
    },
    resetClass () {
      this.signBtnActive = !this.signBtnActive;
    },
    skipClass (row) {
      // 这里是跳过此天
      let loadingInstance = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(res => {
        loadingInstance.close();
      }, 1000)
      let lastTime = this.tableList[this.tableList.length - 1].classDate;
      let id = this.tableList[this.tableList.length - 1].id;
      let startClassTime;
      let endClassTime;
      let weekNum;
      for (let i in this.tableList) {
        if (row.classDate == this.tableList[i].classDate && row.startClassTimeStr == this.tableList[i].startClassTimeStr && row.endClassTimeStr == this.tableList[i].endClassTimeStr) {
          weekNum = this.tableList[i].weekNum;
          startClassTime = this.tableList[i].startClassTimeStr;
          endClassTime = this.tableList[i].endClassTimeStr;
          this.tableList.splice(i, 1);
        }
      }
      for (let j = 0; j < this.classCardList.length; j++) {
        if (this.classCardList[j].classDate == row.classDate && row.startClassTimeStr == this.classCardList[j].startClassTimeStr && row.endClassTimeStr == this.classCardList[j].endClassTimeStr) {
          this.classCardList.splice(j, 1);
          j--;
        }
      }

      // console.log(lastTime, weekNum, id);
      // 这里要往后面排一天
      let obj = {
        startTime: endClassTime,
        endTime: startClassTime,
        weekNum: weekNum,
        id: new Date().getTime()
      }

      lastTime = lastTime.replace(/-/g, '/')
      var newdate = new Date(lastTime);
      newdate.setDate(newdate.getDate() + 1);
      // console.log(newdate);
      // 最后一堂课加一天
      // newdate.setDate(newdate.getDate() + 7);
      this.workOut(newdate, 1, [obj], id, 2, startClassTime, endClassTime);
      // this.$message.success('修改成功');

    },
    resetMix () {
      // 当前行的课程类型
      let activeTpye = this.tableActive.type;
      let startClassTime;
      let endClassTime;
      if (this.chioseType.indexOf('MIX') != -1) {
        // 改合奏 
        // 删除真实课表里的所有相关单技课
        for (let i = 0; i < this.classCardList.length; i++) {
          if (this.activeTime == this.classCardList[i].classDate && this.startClassTimeStr == this.classCardList[i].startClassTimeStr && this.endClassTimeStr == this.classCardList[i].endClassTimeStr) {

            this.classCardList.splice(i, 1);
            i--;
          }
        }
        // 修改提交表里的时间
        // 单技改合奏
        console.log(this.tableList)
        for (let i in this.tableList) {
          if (this.activeTime == this.tableList[i].classDate && this.startClassTimeStr == this.tableList[i].startClassTimeStr && this.endClassTimeStr == this.tableList[i].endClassTimeStr) {
            console.log('修改合奏课的类型')
            this.tableList[i].type = this.chioseType;
            startClassTime = this.tableList[i].startClassTime;
            endClassTime = this.tableList[i].endClassTime;
            // this.tableList[i].classGroupId =  this.tableList[i].id;
            this.classCardList.push(this.tableList[i]);
          }
        }
        //
      } else if (this.chioseType.indexOf('SINGLE') != -1 || this.chioseType.indexOf('CLASSROOM') != -1) {

        // 合奏改单技 
        for (let i in this.tableList) {
          if (this.activeTime == this.tableList[i].classDate && this.startClassTimeStr == this.tableList[i].startClassTimeStr && this.endClassTimeStr == this.tableList[i].endClassTimeStr) {
            this.tableList[i].type = this.chioseType;
            startClassTime = this.tableList[i].startClassTime;
            endClassTime = this.tableList[i].endClassTime;
          }
        }
        let activeTableItem = {};
        console.log(this.activeTime);
        // 修改提交表里的状态
        for (let j = 0; j < this.classCardList.length; j++) {
          for (let i in this.tableList) {
            if (this.activeTime == this.classCardList[j].classDate && this.startClassTimeStr == this.classCardList[j].startClassTimeStr && this.endClassTimeStr == this.classCardList[j].endClassTimeStr) {

              this.classCardList.splice(j, 1);
              j--
            }
            if (this.activeTime == this.tableList[i].classDate && this.startClassTimeStr == this.tableList[i].startClassTimeStr && this.endClassTimeStr == this.tableList[i].endClassTimeStr) {
              activeTableItem = this.tableList[i];
            }
          }
        }
        //添加单机班课
        for (let z in this.activeSingleList) {
          let obj = {
            'classDate': activeTableItem.classDate,
            'week': activeTableItem.week,
            'type': this.chioseType,
            'mixid': activeTableItem.mixid,
            'id': this.activeSingleList[z].id,
            'name': this.activeSingleList[z].name,
            'classTime': activeTableItem.classTime,
            'startClassTimeStr': activeTableItem.startClassTimeStr,
            'endClassTimeStr': activeTableItem.endClassTimeStr,
            'weekNum': activeTableItem.weekNum,
            'classGroupId': this.activeSingleList[z].id,
          }
          this.classCardList.push(obj);
        }
      }



      this.resetAllClassVisible = false;
    },
    // 排课逻辑
    workOut (date, classCount, weekArr, id, type = 1, startTime = '', endTime = '') {
      // 这里是一天排一节课  现在要改成一天排多节
      while (classCount && classCount > 0) {
        for (let i in weekArr) {
          let date1 = new Date(date.getTime());
          let num; // 下次上课上几天后
          // 星期4 - 当前是星期几 => 
          weekArr[i].weekNum - date.getDay() >= 0 ? num = weekArr[i].weekNum - date.getDay() : num = weekArr[i].weekNum - date.getDay() + 7

          let dataStr = this.getThinkDate(date, num);
          let monthDay = this.getThinkDate(date1, num, 2)


          if (this.isholiday) {
            if (this.holidayList.indexOf(monthDay) != -1) {
              // 这里说明有节假日
              continue
            }
          }
          let className;
          this.maxClassList.map(item => {
            if (item.id == id) {
              className = item.name;
              return item.name
            }
          })
          // 排的是合奏班 
          if (!startTime) {
            // 有这个说明是修改=> 没有说明是添加
            if (!this.week[i].startTime || !this.week[i].endTime) {
              // 提示 上课时间必填
              // console.log('进入时间判断')
              this.$message.error('勾选日期的上课时间段必填');
              return;
            }
          }
          let nowStartTime = this.week[i].startTime || startTime;
          let nowEndTime = this.week[i].endTime || endTime;
          //       date: this.getNowFormatDate(date),

          this.tableList.push({
            'classDate': dataStr,
            'week': this.weekDay[weekArr[i].weekNum],
            'type': 'SINGLE',
            'id': id,
            'mixid': id,
            'name': className,
            'classTime': nowStartTime + '-' + nowEndTime,
            'startClassTimeStr': nowStartTime,
            'endClassTimeStr': nowEndTime,
            'weekNum': weekArr[i].weekNum,
            'classGroupId': id
          })
          // 这里我排单技课
          //               date: this.getNowFormatDate(date),
          for (let j in this.activeSingleList) {
            this.classCardList.push({
              'classDate': dataStr,
              'classGroupId': this.activeSingleList[j].id,
              'startClassTimeStr': nowStartTime,
              'endClassTimeStr': nowEndTime,
              'type': 'SINGLE',
              'mixid': this.activeSingleList[j].mixid,
              'weekNum': weekArr[i].weekNum,
              'name': this.activeSingleList[j].name,
              'option': 1
            })
          }
          classCount--
          if (classCount == 0) break
        }
        date.setDate(date.getDate() + 7);
      }
      // 请求排课
    },
    resetaLL () {
      Object.assign(this.$data, this.$options.data());
      this.teamid = this.$route.query.id;
      getAllClass({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.maxClassList = res.data;
        }
      })
      let year = new Date().getFullYear();
      axios.post('/jiari/', qs.stringify({ d: year })).then(res => {
        this.holidayList = Object.keys(res.data[year])
      })
    },
    // 点击查看
    OpenSign (row) {
      this.SignList = [];
      for (let i in this.classCardList) {
        if (this.classCardList[i].mixid == row.mixid && this.classCardList[i].classDate == row.classDate && row.startClassTimeStr == this.classCardList[i].startClassTimeStr && row.endClassTimeStr == this.classCardList[i].endClassTimeStr) {
          this.SignList.push(this.classCardList[i])
        }
      }
      console.log(this.SignList);
      this.openSignListVisible = true;
    },
    savecolumn (row) {
      // console.log(row);
      row.option == 1 ? row.option = 2 : row.option = 1
      // console.log(this.SignList);
    },
    // 重置单技课
    resetSiginClass () {
      this.openSignListVisible = false;
      // for (let i in this.classCardList) {
      //   for (let j in this.SignList) {
      //     if (this.SignList[j].classDate == this.classCardList[i].classDate && this.SignList[j].classGroupId == this.classCardList[i].classGroupId) {
      //       this.classCardList[i] = this.SignList[j];
      //       this.$message.success('修改成功');

      //     }
      //   }
      // }

    },
    submitCardList () {

    },
    gotoNext () {
      checkCourse({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          // ...跳转
        }
      }).catch(res => {
        this.$message.error(res.msg)
      })
    },
    addWeekDay () {
      //  添加
      this.week.push({
        startTime: '',
        endTime: '',
        weekNum: '',
        id: new Date().getTime()
      })
    },
    //删除
    removeWeek (item) {
      for (let i in this.week) {
        if (item.id == this.week[i].id) {
          this.week.splice(i, 1);
        }
      }
    },
    // 判断时间是否在时间段内
    timeIsrange (beginTime, endTime, nowTime) {
      var strb = beginTime.split(":");
      if (strb.length != 2) {
        return false;
      }
      var stre = endTime.split(":");
      if (stre.length != 2) {
        return false;
      }
      var strn = nowTime.split(":");
      if (stre.length != 2) {
        return false;
      }
      var b = new Date();
      var e = new Date();
      var n = new Date();
      b.setHours(strb[0]);
      b.setMinutes(strb[1]);
      e.setHours(stre[0]);
      e.setMinutes(stre[1]);
      n.setHours(strn[0]);
      n.setMinutes(strn[1]);

      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
        // 在时间范围内
        return true;
      } else {
        // 不在时间范围内
        return false;
      }
    },
    checkTime () {
      if (this.week.length <= 0) {
        this.$message.error('至少填写一个排课周期')
        return false;
      }
      for (let i in this.week) {
        if (!this.week[i].startTime || !this.week[i].endTime || !this.week[i].weekNum) {
          this.$message.error('请填写完整的排课周期')
          return false;
        }
      }
    },
    getNowFormatDate (date) {
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    goback () {
      this.$router.go(-1);
    }
  },
  watch: {
    resetAllClassVisible (val) {
      if (!val) {
        this.signBtnActive = false;
        this.skipBtnActive = false;
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.father-Wrap {
  padding: 47px 30px;
  background-color: #fff;
}
.course-container {
  border-bottom: 1px solid #ccc;
  height: 600px;
  overflow-y: auto;

  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    border-right: 1px solid #ccc;
    width: 380px;
    min-width: 380px;
    margin-right: 40px;
    .chioseday {
      margin-top: 20px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100px;
        margin-left: 10px;
      }
    }
    .holidayWrap {
      margin-top: 34px;
      margin-bottom: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .quickBtn {
        font-size: 16px;
        color: #f85043;
        text-decoration: underline;
        padding-right: 25px;
        cursor: pointer;
      }
    }
    .btnWrap {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      div {
        width: 120px;
        height: 40px;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        color: #fff;
      }
      .closeBtn {
        background-color: #777;
      }
    }
  }
  .right {
    width: 1160px;

    .is-selected {
      color: #1989fa;
    }
    .el-calendar {
      max-width: 950px;
    }
    .btnWrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      div {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        border-radius: 4px;
        margin-right: 20px;
        cursor: pointer;
      }
      .nextBtn {
        background-color: #444;
      }
      .okBtn {
        background-color: #f97215;
      }
    }
  }
  .resetWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .restBtn {
      width: 150px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      border: 1px solid rgba(20, 146, 138, 1);
      text-align: center;
      cursor: pointer;
      line-height: 40px;
      color: #14928a;
    }
    .restBtn.active {
      background-color: #14928a;
      color: #fff;
    }
  }
  .okBtns {
    background-color: #f97215;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
    margin: 0 auto;
  }
}
</style>