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

<!--  -->
<template>
  <div class="m-core">
    <el-form :inline="true"
             :model="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.classType"
                   placeholder="班级类型"
                   clearable
                   filterable
                   @change="changeClassGetList">
          <el-option v-for="(item,index) in classTypeList"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="buttonWrap">
      <div class="newBand"
           @click="newClass"
           v-permission="'classGroup/create'">新建班级</div>
      <div class="newBand"
           @click="arrangeStart"
           v-permission="'courseSchedule/batchAddCourseSchedule'">批量排课</div>
      <!-- <div class="newBand">删除排课</div> -->
      <!-- <p class="expectMsg">基础技能班参考数量: 线上:XX/线下:XX</p> -->
    </div>
    <div class="tableWrap">
      <el-table style="width: 100%"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                :data="tableList"
                @selection-change="selectionTable">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column align="center"
                         prop="name"
                         label="班级名称"></el-table-column>
        <el-table-column align="center"
                         prop="type"
                         label="班级类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.type | classType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="studentNum"
                         label="班级人数"></el-table-column>
        <el-table-column align="center"
                         prop="studentId"
                         label="主教老师名称">
          <template slot-scope="scope">
            <div v-if="scope.row.teacherMapperList[0]">
              {{scope.row.teacherMapperList | getBishopName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="studentId"
                         label="助教人数">
          <template slot-scope="scope">
            <div v-if="scope.row.teacherMapperList[0]">
              {{scope.row.teacherMapperList | getTeachingNum}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalClassTimes"
                         label="排课课次"></el-table-column>
        <el-table-column align="center"
                         prop=""
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'classGroup/classGroupUpdate'"
                         @click="classAdjustment(scope.row)">班级调整</el-button>
              <el-popover placement="top"
                          width="160"
                          :ref="scope.$index"
                          v-permission="'classGroup/delSingle'">
                <p>确定删除?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini"
                             type="text"
                             @click="scope._self.$refs[scope.$index].doClose()">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="removeClass(scope)">确定</el-button>
                </div>
                <!-- v-if="scope.row.type !='MIX'" -->
                <el-button type="text"
                           slot="reference">删除班级</el-button>
              </el-popover>
              <!-- v-if="scope.row.type
                         !='HIGHT'
                         &&scope.row.type
                         !='HIGH_ONLINE'
                         " -->
              <el-button type="text"
                         v-permission="'classGroupStudent/findAllStudent'"
                         @click="resetClass(scope.row)">学员调整</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog :visible.sync="newClassVisible"
               width="700px"
               title="新增班级">
      <el-form :model="newClassForm"
               :inline="true"
               label-width="100px"
               ref='newClassForm'
               class="newClassForm">
        <el-form-item label="班级名称"
                      :rules="[{ required: true, message: '请输入班级姓名',trigger: 'blur'}]"
                      prop="className">
          <el-input style="width:180px;"
                    v-model="newClassForm.className"></el-input>
        </el-form-item>
        <el-form-item label="班级类型"
                      :rules="[{ required: true, message: '请输入班级人数',trigger: 'blur'}]"
                      prop="type">
          <el-select v-model.trim="newClassForm.type"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in classTypeList"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="声部"
                      prop="subjectIdList"
                      :rules="[{ required: true, message: '请选择声部',trigger: 'blur'}]"
                      v-if="newClassForm.type =='HIGH' || newClassForm.type =='NORMAL'">
          <el-select v-model.trim="newClassForm.subjectIdList"
                     clearable
                     multiple>
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="声部"
                      prop="subjectIdList"
                      :rules="[{ required: true, message: '请选择声部',trigger: 'blur'}]"
                      v-if=" newClassForm.type == 'HIGH_ONLINE'">
          <el-select v-model.trim="newClassForm.subjectIdList"
                     clearable>
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计招生数"
                      prop="expectStudentNum"
                      :rules="[{ required: true, message: '请输入预计招生数',trigger: 'blur'},{pattern:/[3-5]/,message:'班级人数必须为3-5人',trigger: 'blur'}]"
                      v-if=" newClassForm.type == 'HIGH_ONLINE'">
          <el-input style="width:180px;"
                    type="number"
                    @mousewheel.native.prevent
                    v-model="newClassForm.expectStudentNum"></el-input>
        </el-form-item>
        <el-form-item label="预计招生数"
                      prop="expectStudentNum"
                      type="number"
                      :rules="[{ required: true, message: '请输入预计招生数',trigger: 'blur'}]"
                      @mousewheel.native.prevent
                      v-else>
          <el-input style="width:180px;"
                    v-model="newClassForm.expectStudentNum"></el-input>
        </el-form-item>
        <el-form-item label="主教老师"
                      prop="bishop"
                      :rules="[{ required: true, message: '请选择主教老师',trigger: 'blur'}]">
          <el-select placeholder="请选择主教老师"
                     v-model="newClassForm.bishop"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师"
                      prop="teaching">
          <el-select placeholder="请选择助教老师"
                     v-model="newClassForm.teaching"
                     @change="setAssistant1"
                     clearable
                     multiple
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="newClassVisible = false">取 消</el-button>
        <!-- 乐团课 -->
        <el-button type="primary"
                   @click="newClassHight"
                   v-if=" newClassForm.type == 'HIGH_ONLINE' || newClassForm.type =='HIGH'">确 定</el-button>
        <!-- 基础技能课 -->
        <el-button type="primary"
                   v-else
                   @click="newClassSecond">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="学员选择"
               width="700px"
               :visible.sync="studentVisible"
               :modal-append-to-body="true">
      <div class="studentMask">
        <div class="left">
          <div class="chioseStudentList">
            <h4 style="padding-left:10px;">当前已选学员</h4>
            <div class="studentItem"
                 v-for="(item,index) in activeListStudent"
                 :key="index">
              {{ item.name }}
              <el-popover v-if="!isNewClass"
                          placement="top"
                          v-model.trim="item.isVisible"
                          width="160">
                <p>确定删除?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini"
                             type="text"
                             @click="item.isVisible = false">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="removeStudent(item)">确定</el-button>
                </div>
                <el-button type="text"
                           slot="reference">删除</el-button>
              </el-popover>
              <el-button v-if="isNewClass"
                         type="text"
                         @click="temporaryRemoveStudent(item)">删除</el-button>
            </div>
          </div>
        </div>
        <div class="right">
          <!--  multiple
          collapse-tags-->
          <el-select v-if="isSearch"
                     v-model.trim="activeChioseSound"
                     style="width:180px"
                     @change="searchStudent"
                     clearable
                     filterable
                     placeholder="声部选择">
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <!-- <el-button v-if="isSearch"
                     type="danger"
                     style="margin-left:20px;"
          @click="searchStudent">搜索</el-button>-->

          <!--   列表开始  -->
          <div class="tableList">
            <el-table tooltip-effect="dark"
                      v-if="!isNewClass"
                      style="width: 100%; margin-top:10px;"
                      :data="studentList"
                      ref="studentList"
                      @selection-change="SelectionStudent">
              <el-table-column type="selection"
                               align="center"
                               width="55"></el-table-column>
              <el-table-column prop="name"
                               align="center"
                               width="120"
                               label="姓名"></el-table-column>
              <el-table-column prop="gender"
                               align="center"
                               width="100"
                               label="性别">
                <template slot-scope="scope">
                  <div>{{ scope.row.gender | sex }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               width="100"
                               align="center"
                               label="学员声部"></el-table-column>
            </el-table>
            <!-- 临时调整table -->
            <el-table tooltip-effect="dark"
                      v-if="isNewClass"
                      style="width: 100%; margin-top:10px;"
                      :data="studentList"
                      ref="temporaryStudentList"
                      @selection-change="NewselectionStudent">
              <el-table-column type="selection"
                               align="center"
                               width="55"></el-table-column>
              <el-table-column prop="name"
                               align="center"
                               width="120"
                               label="姓名"></el-table-column>
              <el-table-column prop="gender"
                               align="center"
                               width="100"
                               label="性别">
                <template slot-scope="scope">
                  <div>{{ scope.row.gender | sex }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               width="100"
                               align="center"
                               label="学员声部"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="studentVisible = false">取 消</el-button>
        <!-- 班级学员修改 -->
        <el-button type="primary"
                   v-if="!isNewClass"
                   @click="addSomeStudent">确 定</el-button>
        <!-- 临时调整或者新建班级 -->
        <el-button type="primary"
                   v-if="isNewClass"
                   @click="createMusiceClass">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 老师以及课程设置 -->
    <el-dialog title="班级设置"
               width="700px"
               :visible.sync="infoVisible"
               :modal-append-to-body="false">
      <el-form :inline="true"
               :model="teacherForm"
               ref="teacherForm"
               :rules="teacherRules"
               label-position="right"
               label-width="100px;">
        <!-- <el-form-item label="合奏班"
                      v-if='!isTemporary&&activeType=="NORMAL"'
                      prop="mixClassGroupId">
          <el-select v-model.trim="teacherForm.mixClassGroupId">
            <el-option v-for="(item,index) in maxClassList"
                       :label="item.name"
                       :key="index"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="调整方式"
                      v-if="!isNewClass"
                      prop="isAdd">
          <el-radio v-model.trim="teacherForm.isAdd"
                    label="new">班级加课</el-radio>
          <el-radio v-model.trim="teacherForm.isAdd"
                    label="renew">重新排课</el-radio>
          <el-radio v-model.trim="teacherForm.isAdd"
                    label="onlyUpdateTeacher">修改老师</el-radio>
        </el-form-item>
        <br />
        <el-form-item label="主教老师"
                      prop="coreTeacher">
          <el-select v-model.trim="teacherForm.coreTeacher"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师"
                      prop="assistant">
          <el-select v-model.trim="teacherForm.assistant"
                     filterable
                     clearable
                     @change="setAssistant"
                     multiple>
            <el-option v-for="(item,index) in cooperationList"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型"
                      prop="courseType"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-select v-model.trim="teacherForm.courseType"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in courseTypeList"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="排课次数"
                      prop="courseNum"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-input type="number"
                    @mousewheel.native.prevent
                    v-model.trim="teacherForm.courseNum"></el-input>
        </el-form-item>
        <el-form-item label="排课起始时间"
                      prop="courseTime"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-date-picker v-model.trim="teacherForm.courseTime"
                          :picker-options="pickerOptions"
                          style="width:200px!important;"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"></el-date-picker>
          <el-checkbox style="margin-left:10px;"
                       v-model.trim="teacherForm.checked">是否跳过节假日</el-checkbox>
        </el-form-item>
      </el-form>
      <div class="WeekWrap"
           v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
        <h3 style="margin-bottom:20px;">
          循环次数
          <el-button type="text"
                     style="margin-left:10px;"
                     @click="addWeek">添加</el-button>
        </h3>
        <div class="countWrap"
             style="margin-bottom:10px;">
          <div class="countItem"
               style="margin-bottom:20px;"
               v-for="(item,index) in weekList"
               :key="index">
            <span>循环周期:</span>
            <el-select v-model.trim="item.dayOfWeek"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in weekDateList"
                         :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <span>开始时间</span>
            <el-time-select placeholder
                            v-model.trim="item.startClassTime"
                            :picker-options="{
                               start: '04:30',
                               step: '00:05',
                               end: '23:55'
            }"></el-time-select>
            <span>结束时间</span>
            <el-time-select placeholder
                            v-model.trim="item.endClassTime"
                            :picker-options="{
                              start: '04:30',
                              step: '00:05',
                              end: '23:55',
                              minTime:item.startClassTime
            }"></el-time-select>
            <el-button type="danger"
                       @click="removeWeek(item)"
                       icon="el-icon-delete"
                       circle></el-button>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <!-- 1为临时班级 -->
        <el-button type="primary"
                   v-if="isNewClass"
                   @click="submitTemporary(1)">确 定</el-button>
        <!-- 修改班级信息 -->
        <el-button type="primary"
                   v-if="!isNewClass"
                   @click="submitTemporary(3)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 排课 -->
    <el-dialog title="批量排课"
               width="700px"
               :visible.sync="arrangeVisible"
               :modal-append-to-body="false">
      <el-form :model="arrangeForm"
               ref="arrangeForm"
               label-width="100px"
               label-position="right">
        <el-form-item label="选择班级数"
                      prop="classNum">
          <el-input type="number"
                    style="width:180px;"
                    @mousewheel.native.prevent
                    :value="arrangeForm.classNum"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程类型"
                      prop="courseType"
                      :rules="[{ required: true, message: '请选择课程类型',trigger: 'blur'}]">
          <el-select v-model.trim="arrangeForm.courseType"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in courseTypeList"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课形式"
                      prop="teachMode"
                      :rules="[{ required: true, message: '请选择课程类型',trigger: 'blur'}]">
          <el-select v-model.trim="arrangeForm.teachMode"
                     disabled>
            <el-option value="ONLINE"
                       label="线上"></el-option>
            <el-option value="OFFLINE"
                       label="线下"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始日期"
                      prop="courseTime"
                      :rules="[{ required: true, message: '请选择开始日期',trigger: 'blur'}]">
          <!--   value-format="yyyy-MM-dd" -->
          <el-date-picker v-model.trim="arrangeForm.courseTime"
                          :picker-options="pickerOptions"
                          style="width:200px!important;"
                          type="date"
                          placeholder="选择日期"></el-date-picker>
          <el-checkbox style="margin-left:10px;"
                       v-model.trim="arrangeForm.checked">是否跳过节假日</el-checkbox>
        </el-form-item>
        <el-form-item label="排课次数"
                      :rules="[{ required: true, message: '请输入排课次数',trigger: 'blur'}]"
                      prop="courseNum">
          <el-input type="number"
                    style="width:180px;"
                    @mousewheel.native.prevent
                    v-model.trim="arrangeForm.courseNum"></el-input>
        </el-form-item>
      </el-form>
      <div class="WeekWrap">
        <h3 style="margin-bottom:20px;">
          循环次数
          <el-button type="text"
                     style="margin-left:10px;"
                     @click="addWeek">添加</el-button>
        </h3>
        <div class="countWrap"
             style="margin-bottom:10px;">
          <div class="countItem"
               style="margin-bottom:20px;"
               v-for="(item,index) in weekList"
               :key="index">
            <span>循环周期:</span>
            <el-select v-model.trim="item.dayOfWeek"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in weekDateList"
                         :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <span>开始时间</span>
            <el-time-select placeholder
                            v-model.trim="item.startClassTime"
                            :picker-options="{
                               start: '04:30',
                               step: '00:05',
                               end: '23:55'
            }"></el-time-select>
            <span>结束时间</span>
            <el-time-select placeholder
                            v-model.trim="item.endClassTime"
                            :picker-options="{
                              start: '04:30',
                              step: '00:05',
                              end: '23:55',
                              minTime:item.startClassTime
            }"></el-time-select>
            <el-button type="danger"
                       @click="removeWeek(item)"
                       icon="el-icon-delete"
                       circle></el-button>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="">取 消</el-button>
        <el-button type="primary"
                   @click="arrangeFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { getTeacher, getEmployeeOrgan, getMusicGroupClass, createClass, findSound, getMusicGroupStuNoClassType, classGroupUpdate, removeSingleClass, workOut } from "@/api/buildTeam";
import {
  getClassAllStudent,
  removeStudents,
  addStudents
} from "@/api/studentManager";
import {
  sysConfigList
} from "@/api/generalSettings";

export default {
  components: { pagination },
  props: {
    teamid: {
      type: String,
      required: true
    },
    isSetSalary: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        }
      },
      searchForm: {
        classType: null
      },
      soundList: [],
      teacherList: [],

      tableList: [],
      classTypeList: [
        { value: "NORMAL", label: "单技班" },
        { value: "MIX", label: "合奏班" },
        { value: "HIGH", label: "基础技能班" },
        { value: "HIGH_ONLINE", label: "基础技能班(线上)" }
      ],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      isInit: false,
      newClassVisible: false,
      newClassForm: {
        className: null,
        type: null,
        subjectIdList: null,
        expectStudentNum: null,
        bishop: null,
        teaching: [],
      },
      chioseStudent: [], // 选中的学生
      activeListStudent: [], // 待选的学生
      isNewClass: true, // 是否是新增班级
      studentVisible: false, // 选择学员弹窗
      activeChioseSound: [],
      isSearch: false,
      studentList: [],
      activeChioseSound: null, // 默认选择的声部
      infoVisible: false, // 班级调整弹窗
      teacherForm: {
        isAdd: null,
        coreTeacher: "",
        assistant: [],
        courseType: "",
        courseTime: "",
        checked: false,
        courseNum: "",
        mixClassGroupId: "",
      },
      teacherRules: {
        isAdd: [{ required: true, message: "请选择调整类型" }],
        coreTeacher: [{ required: true, message: "请选择主教老师" }],
        courseType: [{ required: true, message: "请选择上课类型" }],
        courseTime: [{ required: true, message: "请选择开始时间" }],
        courseNum: [{ required: true, message: "请输入排课次数" }],
        mixClassGroupId: [{ required: true, message: "请选择合奏班" }]
      },
      weekDateList: [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期日" }
      ],
      weekList: [
        {
          week: "",
          startTime: "",
          endTime: "",
          id: new Date().getTime()
        }
      ],
      cooperationList: [],
      courseTypeList: [],
      arrangeVisible: false,
      arrangeForm: {
        courseNum: null,
        classNum: null,
        courseType: null,
        courseTime: null,
        teachMode: null,
        checked: false,
      }, // 排课信息
      chioseTab: [], // 记录选中的项

      classCardList: [] // 课表的集合
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
        this.cooperationList = res.data;
      }
    });
    // 获取声部
    findSound({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });
    // 获取节假日
    this.init();
    sysConfigList({ group: 'holiday' }).then(res => {
      if (res.code == 200 && res.data.length > 0) {
        if (res.data[0].paranValue) {
          this.holidayList = JSON.parse(res.data[0].paranValue)
        }


      }
    })

  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.isInit = true;
      this.getList();
    },
    getList () {
      // 
      getMusicGroupClass({ groupType: 'MUSIC', musicGroupId: this.teamid, type: this.searchForm.classType }).then(res => {
        if (res.code == 200) {
          this.isInit = false;
          this.tableList = res.data.rows;
          this.rules.total = res.data.total
        }
      })
    },
    changeClassGetList (val) {
      this.getList()
    },
    newClass () {
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      this.newClassVisible = true;
    },
    newClassSecond () {
      // 判断当前选择的课程类型
      // 单技 合奏等等
      this.$refs['newClassForm'].validate(res => {
        if (res) {
          this.isNewClass = true;
          let type = this.newClassForm.type;
          this.isSearch = true;
          this.getNoClassStudent(type, null)
          this.studentVisible = true;
        }
      })

    },
    newClassHight () {
      this.$refs['newClassForm'].validate(res => {
        if (res) {
          let obj = {}
          obj.musicGroupId = this.teamid;
          obj.name = this.newClassForm.className;
          obj.type = this.newClassForm.type;
          obj.groupType = 'MUSIC'
          obj.subjectIdList = this.newClassForm.subjectIdList.join(',')
          obj.expectStudentNum = this.newClassForm.expectStudentNum;
          obj.teacherMapperList = [];
          obj.teacherMapperList.push({ userId: this.newClassForm.bishop, teacherRole: 'BISHOP' })
          for (let i in this.newClassForm.teaching) {
            obj.teacherMapperList.push({ userId: this.newClassForm.teaching[i], teacherRole: 'TEACHING' })
          }
          createClass(obj).then(res => {
            if (res.code == 200) {
              this.$message.success('创建成功');
              this.getList();
              this.newClassVisible = false;
            }
          })
        }
      })

    },
    removeStudent (item) {
      removeStudents({
        classGroupId: this.activeClass,
        userId: item.userId
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          item.isVisible = false;
          // 这里刷新 this.studentList this.activeListStudent
          this.getList(this.activeMixClass);
          getClassAllStudent({ classGroupId: this.activeClass }).then(res => {
            if (res.code == 200) {
              this.activeListStudent = res.data;
            }
          });
          this.getNoClassStudent(this.activeType);

        }
      });
    },
    addSomeStudent () {
      // 获取勾选的学生
      let arr = this.chioseStudent.map(item => {
        return item.userId;
      });
      if (arr.length <= 0) {
        this.$message.error("至少添加一名学员");
        return;
      }
      addStudents({
        classGroupId: this.activeClass,
        userIdsStr: arr.join(",")
      }).then(res => {
        if (res.code == 200) {
          this.studentVisible = false;
          this.$message.success("添加成功");
          this.getList();
        }
      });
    },
    temporaryRemoveStudent (item) {
      // 列表中删除
      for (let i in this.activeListStudent) {
        if (this.activeListStudent[i].userId == item.userId) {
          this.activeListStudent.splice(i, 1);
        }
      }
      // 查询列表中的项 取消勾选 temporaryStudentList  toggleRowSelection
      // 循环列表 找到相应的行取消勾选
      for (let k in this.studentList) {
        if (this.studentList[k].userId == item.userId) {
          this.$refs["temporaryStudentList"].toggleRowSelection(item, false);
        }
      }
      // this.$refs['temporaryStudentList'].toggleRowSelection(row, selected);
    },
    // 对象数组去重
    objArrayRemoval (arr, attr) {
      let obj = {};
      let result = [];
      for (let x in arr) {
        if (!obj[arr[x][attr]]) {
          result.push(arr[x]);
          obj[arr[x][attr]] = true;
        }
      }
      return result;
    },
    // 新增选中的学生
    NewselectionStudent (val) {
      this.chioseStudent = val;
      // 这里新增的添加到选中的学生列表  根据学生id去重
      if (this.chioseStudent.length > 0) {
        this.chioseStudent = this.chioseStudent.concat(val);
      } else {
        this.chioseStudent = val;
      }
      // 联动版
      // this.activeListStudent = this.objArrayRemoval(this.chioseStudent, 'userId')
      // 非联动多选版
      this.activeListStudent = this.activeListStudent.concat(
        this.chioseStudent
      );
      // // 去重
      this.activeListStudent = this.objArrayRemoval(
        this.activeListStudent,
        "userId"
      );
      // 将其填入选中的学生
    },
    // 获取乐团中没课的学生
    getNoClassStudent (type, sound) {

      if (!sound) {
        let sound = null;
      }
      getMusicGroupStuNoClassType({ musicGroupId: this.teamid, type, actualSubjectId: sound }).then(
        res => {
          if (res.code == 200) {
            this.studentList = res.data;
          }
        }
      );
    },
    // 根据声部id 获取学生
    searchStudent (val) {
      // 搜索学生
      // 根据声部id  乐团id搜索学生
      // teamSoundStudent({
      //   musicGroupId: this.teamid,
      //   actualSubjectId: this.activeChioseSound
      // }).then(res => {
      //   if (res.code == 200) {
      //     this.studentList = res.data;
      //   }
      // });
      this.getNoClassStudent(this.newClassForm.type, val)
    },
    createMusiceClass () {
      // console.log(this.activeListStudent)
      let userIds = null;
      if (this.activeListStudent.length > 0) {
        userIds = this.activeListStudent.map(item => {
          return item.userId
        }).join(',')
      }
      // 创建班级
      let obj = {}
      obj.musicGroupId = this.teamid;
      obj.name = this.newClassForm.className;
      obj.type = this.newClassForm.type;
      obj.groupType = 'MUSIC'
      obj.userIds = userIds;
      obj.teacherMapperList = [];
      obj.teacherMapperList.push({ userId: this.newClassForm.bishop, teacherRole: 'BISHOP' })
      for (let i in this.newClassForm.teaching) {
        obj.teacherMapperList.push({ userId: this.newClassForm.teaching[i], teacherRole: 'TEACHING' })
      }
      createClass(obj).then(res => {
        if (res.code == 200) {
          this.$message.success('创建成功');
          this.getList();
          this.studentVisible = false;
          this.newClassVisible = false;
        }
      })
    },
    classAdjustment (row) {
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      this.activeType = row.type;
      this.activeClass = row.id;
      // this.activeListStudent = row.subjectIdList.split(',')
      this.setType(row.type);
      // activeListStudent
      this.isNewClass = false;
      this.teacherForm.assistant = [];
      for (let i in row.classGroupTeacherMapperList) {
        if (row.classGroupTeacherMapperList[i].teacherRole == "BISHOP") {
          this.teacherForm.coreTeacher =
            row.classGroupTeacherMapperList[i].userId;
        }
        if (row.classGroupTeacherMapperList[i].teacherRole == "TEACHING") {
          this.teacherForm.assistant.push(
            row.classGroupTeacherMapperList[i].userId
          );
        }
      }
      this.infoVisible = true;
    },
    setType (type) {
      switch (type) {
        case "NORMAL": {
          this.courseTypeList = [
            { value: "SINGLE", label: "单技课" },
            { value: "TRAINING_SINGLE", label: "集训单技课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
          break;
        }
        case "MIX": {
          this.courseTypeList = [
            { value: "MIX", label: "合奏课" },
            { value: "TRAINING_MIX", label: "集训合奏课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
          break;
        }
        case "HIGH": {
          this.courseTypeList = [
            { value: "HIGH", label: "基础技能课" },
          ];
          break;
        }
        case "HIGH_ONLINE": {
          this.courseTypeList = [
            { value: "HIGH_ONLINE", label: "线上基础技能课" },
          ];
          break;
        }
        case "SNAP": {
          this.courseTypeList = [
            { value: "SINGLE", label: "单技课" },
            { value: "MIX", label: "合奏课" },
            { value: "TRAINING_SINGLE", label: "集训单技课" },
            { value: "TRAINING_MIX", label: "集训合奏课" },
            { value: "HIGH", label: "基础技能课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
        }
      }
    },
    // 删除班级
    removeClass (scope) {
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      removeSingleClass({ classGroupId: scope.row.id })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            scope._self.$refs[scope.$index].doClose();
            // 重新请求列表
            this.getList();
          } else {
            this.$message.error(res.msg);
            scope._self.$refs[scope.$index].doClose();
          }
        })
        .catch(res => {
          scope._self.$refs[scope.$index].doClose();
        });
    },
    setAssistant (val) {
      for (let i in val) {
        if (val[i] == this.teacherForm.coreTeacher) {
          val.splice(i, 1);
        }
      }
    },
    setAssistant1 (val) {
      for (let i in val) {
        if (val[i] == this.newClassForm.bishop) {
          val.splice(i, 1);
        }
      }
    },
    SelectionStudent (val) {
      this.chioseStudent = val;
    },
    addWeek () {
      // 添加循环周期
      this.weekList.push({
        dayOfWeek: "",
        startClassTime: "",
        endClassTime: "",
        id: new Date()
      });
    },
    // 提交临时班的信息
    submitTemporary (type) {
      // 参数是一样  type为1 新增临时班
      // type为2  新增单技班
      // type为3 修改班级信息
      if (type == 1) {
        this.isTemporary = true;
      } else {
        this.isTemporary = false;
      }

      this.$refs["teacherForm"].validate(item => {
        if (item) {
          let week = this.weekList;
          if (this.teacherForm.isAdd != "onlyUpdateTeacher") {
            if (
              !week[0] ||
              !week[0].startClassTime ||
              !week[0].endClassTime ||
              !week[0].dayOfWeek
            ) {
              this.$message.error("至少排一节课");
              return;
            }
          }

          // 这里代表排课成功  发请求  新增临时班
          let classGroupName = this.className;
          let classGroupTeacherMapperList = [
            { userId: this.teacherForm.coreTeacher, teacherRole: "BISHOP" }
          ];
          for (let i in this.teacherForm.assistant) {
            classGroupTeacherMapperList.push({
              userId: this.teacherForm.assistant[i],
              teacherRole: "TEACHING"
            });
          }
          // let mixClassGroupId = this.teacherForm.mixClassGroupId;
          let musicGroupId = this.teamid;
          let startDate = this.teacherForm.courseTime;
          let courseType = this.teacherForm.courseType;
          let courseTimes = this.teacherForm.courseNum;
          if (
            courseTimes <= 0 &&
            this.teacherForm.isAdd != "onlyUpdateTeacher"
          ) {
            this.$message.error("请至少排一节课");
            return;
          }
          let students = this.activeListStudent.map(item => {
            return item.userId;
          });
          let holiday = this.teacherForm.checked;
          let courseList = [];
          for (let i in this.weekList) {
            courseList.push(this.weekList[i]);
          }
          if (
            courseList.length <= 0 &&
            this.teacherForm.isAdd != "onlyUpdateTeacher"
          ) {
            this.$message.error("新增班级至少排一节课");
            return;
          }
          if (this.teacherForm.isAdd == "onlyUpdateTeacher") {
            startDate = null
            courseType = null
            students = null
            holiday = null
            courseTimes = null
            courseList = null,
              mineType = null
          }
          //       mixClassGroupId,
          let mineType = this.activeType;
          let obj = {
            classGroupName,
            classGroupTeacherMapperList,
            musicGroupId,
            startDate,
            courseType,
            students,
            holiday,
            courseTimes,
            courseTimeDtoList: courseList,
            type: mineType,
            courseAddType: this.teacherForm.isAdd
          };
          if (type == 1) {
            // 新增临时班级
            revisionClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 提示修改成功
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList();
              }
            });
          } else if (type == 2) {
            // 新增单技班
            revisionAddClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 修改成功
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList();
              }
            });
          } else if (type == 3) {
            // activeClass
            obj.classGroupId = this.activeClass;
            classGroupUpdate(obj).then(res => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.getList();
              }
            });
          }
        } else {
          this.$message.error("请填写必要信息");
          return;
        }
      });
    },
    resetClass (row) {
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      this.isNewClass = false;
      this.className = row.name;
      this.studentVisible = true;
      this.activeClass = row.id;
      this.isSearch = false;
      this.activeType = row.type;
      // 根据单机班id 查询单技班内的所有学生
      getClassAllStudent({ classGroupId: row.id }).then(res => {
        if (res.code == 200) {
          this.activeListStudent = res.data.map(item => {
            item.isVisible = false;
            return item;
          });
        }
      });
      this.getNoClassStudent(row.type);
    },
    // 排课开始
    arrangeStart () {
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      if (this.chioseTab.length < 1) {
        this.$message.error('请至少选择一个班级')
        return;
      }
      let type = this.chioseTab[0].type;
      let isSome = this.chioseTab.every(item => {
        return item.type == type
      })
      if (!isSome) {
        this.$message.error('请选择相同类型的班级')
        return false;
      }
      this.setType(this.chioseTab[0].type);
      this.arrangeForm.courseType = this.courseTypeList[0].value;
      this.arrangeVisible = true;
      if (this.arrangeForm.courseType == 'HIGH_ONLINE') {
        this.arrangeForm.teachMode = 'ONLINE'
      } else {
        this.arrangeForm.teachMode = 'OFFLINE'
      }
    },
    selectionTable (val) {
      this.chioseTab = val;
      this.arrangeForm.classNum = val.length;
    },
    // 开始排课
    arrangeFormSubmit () {
      // 获取要排课的班级 id
      if (this.weekList.length < 0 || !this.weekList[0].dayOfWeek) {
        this.$message.error('请设置排课周期')
        return
      }
      // 组拼课程信息
      this.$refs['arrangeForm'].validate(res => {
        if (res) {
          let date = this.arrangeForm.courseTime
          let classCount = this.arrangeForm.courseNum
          let weekArr = this.weekList;
          let courseType = this.arrangeForm.courseType
          let teachMode = this.arrangeForm.teachMode
          this.classCardList = [];
          this.workOut(date, classCount, weekArr, courseType, teachMode)
        }
      })

    },
    // 排课: 开始日期 几节课 星期几  什么类型的课
    workOut (date, classCount, weekArr, courseType, teachMode) {
      // 验证是不是添加的循环周期里每一项都有值
      let flag = weekArr.every(item => {
        return item.dayOfWeek && item.startClassTime && item.endClassTime
      })
      if (!flag) {
        this.$message.error('请保证循环周期信息完整')
        return
      }

      // 这里是一天排一节课  现在要改成一天排多节
      while (classCount && classCount > 0) {
        for (let i in weekArr) {
          let date1 = new Date(date.getTime());
          let num; // 下次上课上几天后
          // 星期4 - 当前是星期几 => 
          weekArr[i].dayOfWeek - date.getDay() >= 0 ? num = weekArr[i].dayOfWeek - date.getDay() : num = weekArr[i].dayOfWeek - date.getDay() + 7

          let dataStr = this.getThinkDate(date, num);
          let monthDay = this.getThinkDate(date1, num)
          if (this.arrangeForm.checked) {
            if (this.holidayList.indexOf(monthDay) != -1) {
              // 这里说明有节假日
              continue
            }
          }
          let nowStartTime = weekArr[i].startClassTime
          let nowEndTime = weekArr[i].endClassTime
          // 这里开始排课 哪几个班
          for (let j in this.chioseTab) {
            this.classCardList.push({
              'classDate': dataStr,
              'classGroupId': this.chioseTab[j].id,
              'startClassTimeStr': nowStartTime,
              'endClassTimeStr': nowEndTime,
              'type': courseType,
              'weekNum': weekArr[i].dayOfWeek,
              'name': this.chioseTab[j].name,
              'teachMode': teachMode,
              'option': 1
            })
          }
          classCount--
          if (classCount == 0) break
        }
        date.setDate(date.getDate() + 7);
      }
      // 直接调接口排课进去
      workOut({ musicGroupID: this.teamid, courseSchedules: this.classCardList }).then(res => {
        if (res.code == 200) {
          this.$message.success('恭喜您排课成功')
          this.classCardList = [];
          this.arrangeVisible = false;
          this.getList()
        }
      }).catch(res => {
        // this.tableList = [];
        this.classCardList = [];

      })
    },
    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;
      }

    },
  },
  filters: {
    getBishopName (val) {
      let name = '';
      if (val && val.length > 0) {
        for (let i in val) {
          if (val[i].teacherRole == 'BISHOP') {
            name = val[i].userName;
          }
        }
      }
      return name;
    },
    getTeachingNum (val) {
      let num = 0;
      if (val && val.length > 0) {
        for (let i in val) {
          if (val[i].teacherRole == 'TEACHING') {
            num++
          }
        }
      }
      return num;
    }

  },
  watch: {
    newClassVisible (val) {
      if (!val) {
        this.newClassForm = {
          className: null,
          type: null,
          subjectIdList: null,
          expectStudentNum: null,
          bishop: null,
          teaching: null
        }
      }
    },
    studentVisible (val) {
      if (!val) {
        this.newClassVisible = false;
        this.activeListStudent = [];
      }
    },
    infoVisible (val) {
      if (!val) {
        this.teacherForm = {
          isAdd: null,
          coreTeacher: "",
          assistant: [],
          courseType: "",
          courseTime: "",
          checked: false,
          courseNum: "",
          mixClassGroupId: ""
        }
        this.$refs['teacherForm'].resetFields()
      }
    }

  }
};
</script>
<style lang='scss' scoped>
.m-core {
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px 42px;
}
.buttonWrap {
  display: flex;
  justify-content: flex-start;
  .newBand {
    margin-right: 20px;
  }
  .expectMsg {
    position: relative;
    top: 3px;
    line-height: 36px;
    font-size: 14px;
  }
}
.studentMask {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    width: 200px;
    margin-right: 20px;
    .wrap {
      margin-bottom: 20px;
    }
    h4 {
      font-size: 16px;
      color: #444;
      line-height: 38px;
    }
    .chioseStudentList {
      height: 500px;
      overflow-y: auto;
      border: 1px solid #ccc;
      .studentItem {
        padding-left: 10px;
        line-height: 25px;
      }
    }
  }
  .right {
    width: calc(100% - 200px);
    .tableList {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
.resetClassForm {
  /deep/.el-date-editor.el-input,
  /deep/.el-date-editor.el-input__inner {
    width: 180px !important;
  }
}
/deep/.el-date-editor.el-input,
/deep/.el-date-editor.el-input__inner {
  width: 100px !important;
}
</style>