dy-admin-manager/src/views/buildVip/index.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="title"></el-page-header>
      <!-- <div class="squrt" /> -->
    </h2>
    <div class="m-core">
      <div class="vipLeft">
        <el-alert
          title="课程信息"
          type="info"
          :closable="false"
          class="vipMsg"
        ></el-alert>
        <el-form
          ref="leftForm"
          :inline="true"
          :rules="leftFormRules"
          :label-position="labelPosition"
          label-width="110px"
          :model="leftForm"
        >
          <!-- <el-form-item label="课程名称" prop="name">
            <el-input v-model.trim="leftForm.name" />
          </el-form-item> -->
          <!--  :disabled="!leftForm.teacher || !leftForm.educationalTeacherId" -->
          <el-form-item label="课程分部" prop="classOrganId">
            <el-select
              v-model.trim="leftForm.classOrganId"
              filterable
              clearable
              @change="onClassChange"
            >
              <el-option
                v-for="(item, index) in selects.branchs"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="科目名称" prop="subject">
            <el-select
              v-model.trim="leftForm.subject"
              filterable
              clearable
              @change="changeSubject"
              :disabled="!leftForm.classOrganId"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <!--       -->
          <el-form-item label="指导老师" prop="teacher">
            <el-select
              v-model.trim="leftForm.teacher"
              filterable
              clearable
              :disabled="!leftForm.subject"
              @change="setSection($event)"
            >
              <el-option
                v-for="(item, index) in teacherList"
                :key="index"
                :label="item.realName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!--    @change="getClassOrgan()" -->
          <el-form-item label="乐团主管" prop="educationalTeacherId">
            <el-select
              v-model.trim="leftForm.educationalTeacherId"
              filterable
              clearable
              :disabled="!leftForm.subject"
            >
              <el-option
                v-for="(item, index) in educationList"
                :key="index"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="课程形式" prop="courseType" v-if="!courseType">
            <el-select
              v-model.trim="leftForm.courseType"
              clearable
              filterable
              :disabled="!leftForm.classOrganId || !leftForm.teacher"
              @change="changeType"
            >
              <el-option
                v-for="(item, index) in courseTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="教学点" v-if="!courseType">
            <el-select
              v-model.trim="leftForm.section"
              filterable
              clearable
              :disabled="!leftForm.teacher"
            >
              <el-option
                v-for="(item, index) in scetionList"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="上课学员" prop="students" v-if="!courseType">
            <el-select
              v-model.trim="leftForm.students"
              collapse-tags
              multiple
              clearable
              placeholder="请输入上课学员"
              remote
              @change="changeStudent"
              filterable
              :multiple-limit="studentLimit"
              :disabled="!leftForm.classOrganId || !leftForm.courseType"
              :remote-method="remoteMethod"
              :loading="remoteLoading"
            >
              <el-option
                v-for="item in studentList"
                :key="item.userId"
                :label="item.username"
                :value="item.userId"
              >
                <span style="float: left">{{ item.username }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.parentsPhone
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上课学员" prop="students" v-else>
            <el-select
              v-model.trim="leftForm.students"
              collapse-tags
              clearable
              placeholder="请输入上课学员"
              remote
              @change="changeStudentP"
              filterable
              :multiple-limit="studentLimit"
              :disabled="!leftForm.classOrganId"
              :remote-method="remoteMethod"
              :loading="remoteLoading"
            >
              <el-option
                v-for="item in studentList"
                :key="item.userId"
                :label="item.username"
                :value="item.userId"
              >
                <span style="float: left">{{ item.username }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.parentsPhone
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动方案" prop="activeType" v-if="courseType">
            <el-select
              v-model.trim="leftForm.activeType"
              filterable
              clearable
              :disabled="
                !leftForm.students ||
                (leftForm.students && leftForm.students.length <= 0)
              "
              @change="chioseActive"
            >
              <el-option
                v-for="(item, index) in activeList"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="活动方案" prop="activeType" v-else>
            <el-select
              v-model.trim="leftForm.activeType"
              filterable
              clearable
              :disabled="
                !leftForm.courseType ||
                !leftForm.students ||
                (leftForm.students && leftForm.students.length <= 0)
              "
              @change="chioseActive"
            >
              <el-option
                v-for="(item, index) in activeList"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="每课时长" prop="classTime">
            <el-select
              @change="
                () => {
                  computationalBtn = false;
                }
              "
              v-model.trim="leftForm.classTime"
              :disabled="timeTable.length > 0 || classTimeDis"
            >
              <el-option
                v-for="(item, index) in this.classTimeList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报名开始时间" prop="signUpStart">
            <!-- @change="changeStartTime" -->
            <el-date-picker
              v-model.trim="leftForm.signUpStart"
              type="date"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择时间"
            />
            <!-- <el-date-picker
              v-model="leftForm.signTimer"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item label="报名结束时间" prop="signUpEnd">
            <el-date-picker
              v-model.trim="leftForm.signUpEnd"
              type="date"
              :picker-options="pickerOptions1"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择时间"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="center">
        <el-alert
          title="排课设置"
          type="info"
          :closable="false"
          class="vipMsg"
        ></el-alert>

        <p class="submitP" v-if="minCourseNum > 0 && maxCourseNum > 0">
          该活动最小课时数:<span style="color: red">{{ minCourseNum }}</span
          >节 最大课时数:<span style="color: red">{{ maxCourseNum }}</span
          >节
        </p>

        <el-form
          :inline="true"
          :model="centerForm"
          label-width="100px"
          :label-position="labelPosition"
        >
          <el-form-item v-if="leftForm.courseStart" label="最早排课时间">
            <el-date-picker
              v-model.trim="leftForm.courseStart"
              disabled
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item v-if="leftForm.courseEnd" label="最晚排课时间">
            <el-date-picker
              v-model.trim="leftForm.courseEnd"
              disabled
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item v-if="hasOnline" label="线上课数">
            <el-input
              v-model.trim="centerForm.onlineCourseNum"
              @mousewheel.native.prevent
              @input="onCourseNumChange('online')"
              type="number"
            >
              <template slot="append">节</template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="hasOffline" label="线下课数">
            <el-input
              v-model.trim="centerForm.offlineCourseNum"
              @mousewheel.native.prevent
              @input="onCourseNumChange('offline')"
              type="number"
            >
              <template slot="append">节</template>
            </el-input>
          </el-form-item>

          <el-form-item label="待排课数">
            <el-input v-model.trim="allCourseCount" disabled>
              <template slot="append">节</template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item
            v-if="hotType == 'GIVE_CLASS' && isGiveClass"
            label="赠课课程类型"
          >
            <el-radio v-model.trim="centerForm.radio" label="ONLINE"
              >线上课</el-radio
            >
            <el-radio v-model.trim="centerForm.radio" label="OFFLINE"
              >线下课</el-radio
            >
          </el-form-item> -->
          <el-form-item label="">
            <el-button type="danger" @click="setCourse">点击排课</el-button>
          </el-form-item>
        </el-form>
        <!-- 排课列表开始 planList-->
        <div class="">
          <!-- <div class="planTop">
            <p>已排课程</p>
            <el-button type="text" @click="setCourse">{{
              id ? "新增排课" : "点击排课"
            }}</el-button>
          </div> -->
          <!-- <div class="planCore"> -->
          <el-table
            style="width: 100%"
            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
            :data="timeTable"
          >
            <el-table-column align="center" prop="studentId" label="课程时间">
              <template slot-scope="scope">
                <div>{{ scope.row.classDate | formatTimer }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="studentId"
              label="课程开始时间"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.startClassTimeStr }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="studentId"
              label="课程结束时间"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.endClassTimeStr }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="studentId" label="课程类型">
              <template slot-scope="scope">
                <div>{{ scope.row.teachMode | teachMode }}</div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="row">
              <div class="name">时间</div>
              <div class="week">开始时间</div>
              <div class="time">结束时间</div>
              <div class="time">课程类型</div>
            </div> -->
          <!-- <div
              v-for="(item, index) in this.timeTable"
              :key="index"
              class="row"
            >
              <div class="name">{{ item.classDate | formatTimer }}</div>
              <div class="week">{{ item.startClassTimeStr }}</div>
              <div class="time">{{ item.endClassTimeStr }}</div>
              <div class="time">{{ item.teachMode | teachMode }}</div>
            </div> -->
          <!-- </div> -->
        </div>
      </div>
      <div class="right">
        <el-alert
          title="课酬&缴费设置"
          type="info"
          :closable="false"
          class="vipMsg"
        ></el-alert>
        <el-form
          :model="rightForm"
          label-width="100px"
          :label-position="labelPosition"
          :inline="true"
        >
          <el-form-item label="折扣">
            <el-input v-model.trim="rightForm.discount" disabled>
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="courseType == 'PRACTICE'" label="网管课酬">
            <el-input v-model.trim="rightForm.onlineCourse" :disabled="true">
              <template slot="append" v-if="!isMusicTheory">元/节</template>
              <template slot="append" v-else>元/人</template>
            </el-input>
            <!--  || onlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->
          </el-form-item>
          <el-form-item v-else label="VIP课课酬">
            <el-input v-model.trim="rightForm.offlineCourse" :disabled="true">
              <template slot="append" v-if="!isMusicTheory">元/节</template>
              <template slot="append" v-else>元/人</template>
            </el-input>
            <!--  || offlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->
          </el-form-item>
          <!-- <el-form-item v-if="hasOnline" label="线上课单价">
            <el-input
              v-model.trim="rightForm.onlinePrice"
              :disabled="paymentReadonlyFlag == 0"
            />
          </el-form-item>
          <el-form-item v-if="hasOffline" label="线下课单价">
            <el-input
              v-model.trim="rightForm.offlinePrice"
              :disabled="paymentReadonlyFlag == 0"
            />
          </el-form-item> -->
          <!-- <el-form-item label="课程总价">
            <el-input v-model.trim="rightForm.allPrice" disabled />
          </el-form-item> -->
        </el-form>
        <div style="width: 700px; clear: both">
          <el-table
            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
            :data="activeStudentList"
          >
            <el-table-column align="center" prop="studentId" label="学员编号">
            </el-table-column>
            <el-table-column align="center" prop="userName" label="学员名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="studentId"
              v-if="hasOnline"
              label="线上课单价"
            >
              <template slot-scope="scope">
                <el-input-number
                  :disabled="true"
                  @change="changeStudentMoney"
                  style="width: 90% !important"
                  class="number-input"
                  v-model="scope.row.onlineClassesUnitPrice"
                  :controls="false"
                  :min="0"
                  placeholder="线上课单价"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="studentId"
              v-if="hasOffline"
              label="线下课单价"
            >
              <template slot-scope="scope">
                <el-input-number
                  @change="changeStudentMoney"
                  style="width: 90% !important"
                  class="number-input"
                  :disabled="true"
                  v-model="scope.row.offlineClassesUnitPrice"
                  :controls="false"
                  :min="0"
                  placeholder="线下课单价"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="studentId" label="">
              <template slot="header" slot-scope="slot">
                <div class="titleCell">
                  <span>缴费总额</span>
                  <el-tooltip placement="top" popper-class="mTooltip">
                    <div slot="content">
                      （线上课单价*课时数+线下课单价*课时数）*折扣后向上取整
                    </div>
                    <i
                      class="el-icon-question micon el-tooltip"
                      style="
                        font-size: 18px;
                        color: #f56c6c;
                        top: 2px;
                        position: relative;
                      "
                    ></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                <el-input-number
                  style="width: 90% !important"
                  class="number-input"
                  v-model="scope.row.paymentPrice"
                  :controls="false"
                  :min="0"
                  :disabled="true"
                  placeholder="缴费总额"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--  class="computeMoney"  -->
          <div style="overflow: hidden">
            <el-button
              type="primary"
              class="computeMoney"
              @click="computational"
              >计算</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="排课"
      ref="maskForm"
      width="500px"
      destroy-on-close
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="maskForm" label-position="right" label-width="150px">
        <el-form-item label="开课时间">
          <!-- :picker-options="pickerOptions" -->
          <el-date-picker
            v-model.trim="maskForm.courseStartOnline"
            type="date"
            :picker-options="courseOption"
            placeholder="请选择开课时间"
          />
        </el-form-item>
        <!-- <el-form-item label="线下课开课时间">
          <el-date-picker
            v-model.trim="maskForm.courseStartOffline"
            type="date"
            :picker-options="courseOption"
            placeholder="请选择开课时间"
          />
        </el-form-item> -->
        <div
          class="line"
          style="height: 1px; background: #ccc; margin: 0 25px"
        ></div>
        <el-form-item label="课程类型" prop="type">
          <el-radio v-if="hasOnline" v-model.trim="maskForm.type" label="ONLINE"
            >线上课</el-radio
          >
          <el-radio
            v-if="hasOffline"
            v-model.trim="maskForm.type"
            label="OFFLINE"
            >线下课</el-radio
          >
        </el-form-item>
        <el-form-item label="循环周次" prop="week">
          <el-select
            v-model.trim="maskForm.week"
            style="width: 220px !important"
          >
            <el-option label="星期日" value="0" />
            <el-option label="星期一" value="1" />
            <el-option label="星期二" value="2" />
            <el-option label="星期三" value="3" />
            <el-option label="星期四" value="4" />
            <el-option label="星期五" value="5" />
            <el-option label="星期六" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="上课时间" prop="startTime">
          <el-time-picker
            v-model.trim="maskForm.startTime"
            @change="getStartTime"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="选择时间"
          />
        </el-form-item>
        <el-form-item label="下课时间" prop="endTime">
          <el-time-picker
            v-model.trim="maskForm.endTime"
            disabled
            format="HH:mm"
            value-format="HH:mm"
            :picker-options="{
              start: '04:30',
              step: '00:05',
              end: '23:30',
            }"
            placeholder="选择时间"
          />
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <div class="okBtn" @click="addWeek">确认</div>
      </div>

      <div class="planList">
        <div class="planTop">
          <p>已排课程</p>
        </div>
        <div class="planCore" v-if="this.lookList.length > 0">
          <div v-for="(item, index) in this.lookList" class="row" :key="index">
            <div class="name">{{ item.type }}</div>
            <div class="week">{{ item.week }}</div>
            <div class="time">{{ item.time }}</div>
            <div class="operation">
              <el-button type="text" @click="removeWeekCourse(item.id)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
        <div class="nomore" v-else>暂无数据</div>
        <div slot="footer" style="margin-top: 20px" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="setTimeTable">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <div class="btnWrap">
      <div class="okBtn" @click="submitInfo">{{ id ? "修改" : "确定" }}</div>

      <div class="okBtn" style="background-color: #14928a" @click="resetFrom">
        重置
      </div>
    </div>

    <!-- <div class="btnWrap"> -->
    <!-- <div class="closeBtn">
        取消
      </div>-->

    <!-- </div> -->
  </div>
</template>
<script>
import {
  findTeacherByOrganId,
  getSubject,
  findEducationUsers,
  getPracticeApplySubjects,
  findUserByRole,
} from "@/api/buildTeam";
import {
  vipGroupCategory,
  vipGroupActivityFind,
  getVipGroupCostCount,
  createVip,
  updateVipBaseInfo,
  getPracticeGroupCostCount,
  createPractice,
  getPracticeGroupSellPrice,
} from "@/api/vipSeting";
import { getTeachSchool, getTeacherBySubject } from "@/api/teacherManager";
import axios from "axios";
import { getToken } from "@/utils/auth";
import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
import { queryOrganStudentList } from "@/api/studentManager";
import merge from "webpack-merge";
import dayjs from "dayjs";
export default {
  name: "buildVip",
  data() {
    return {
      title: "VIP/乐理课申请",
      dialogFormVisible: false,
      labelPosition: "right",
      courseType: "",
      leftForm: {
        // name: "",
        teacher: "",
        subject: "",
        courseType: "",
        activeType: "",
        classNum: "",
        classTime: "",
        // signTimer:[],
        signUpStart: "",
        signUpEnd: "",
        courseStartOnline: "",
        courseStartOffline: "",
        section: "",
        courseStart: "",
        courseEnd: "",
        educationalTeacherId: "",
        students: [],

        classOrganId: "", // 课程分部
      },
      activeStudentList: [],
      studentLimit: 0,
      classTimeList: [],
      centerForm: {
        allCourseNum: "",
        onlineCourseNum: 0,
        offlineCourseNum: 0,
        radio: "",
      },
      maskForm: {
        type: "",
        week: "",
        startTime: "",
        endTime: "",
      },
      rightForm: {
        onlineCourse: "",
        offlineCourse: "",
        onlinePrice: "",
        offlinePrice: "",
        allPrice: "",
        discount: 100,
      },
      remoteLoading: false,
      computationalBtn: false,
      subjectList: [], // 科目列表
      teacherList: [], // 老师列表
      educationList: [], // 教务
      // classOrganList: [], // 公用分部
      courseTypeList: [], // 课程类型集合
      activeList: [], //活动集合
      hasOnline: true,
      hasOffline: true,
      onlineSalary: "", // 线上课课酬结算方式
      offlineSalary: "", // 线下课课酬结算方式
      hotType: "",
      attribute1: "",
      attribute2: "",
      attribute3: "",
      maxCourseNum: 0,
      minCourseNum: 0,
      salaryReadonlyFlag: "", // 老师课酬是否可配
      paymentReadonlyFlag: "", // 课程单价是否可配
      lookList: [],
      onlinelookList: [], // 展示课表线上
      offlineLookList: [], // 展示课表线下
      timeTable: [], // 真正的课表
      giveNum: "",
      chioseStudent: [],
      weekDay: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      scetionList: [],
      isGiveClass: false,
      activeStartTime: null,
      courseOption: null,
      pickerOptions: null,
      pickerOptions1: null,
      leftFormRules: {
        /**?
         * teacher: '',
        subject: '',
        courseType: '',
        activeType: '',
         */
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        teacher: [
          {
            required: true,
            message: "请选择老师",
            trigger: "change",
          },
        ],
        educationalTeacherId: [
          {
            required: true,
            message: "请选择乐团主管",
            trigger: "change",
          },
        ],
        classOrganId: [
          {
            required: true,
            message: "请选择课程分部",
            trigger: "change",
          },
        ],
        subject: [
          {
            required: true,
            message: "请选择科目",
            trigger: "change",
          },
        ],
        courseType: [
          {
            required: true,
            message: "请选择课程形式",
            trigger: "change",
          },
        ],
        students: [
          {
            required: true,
            message: "请选择上课学生",
            trigger: "change",
          },
        ],
        // activeType: [
        //   {
        //     required: true,
        //     message: "请选择活动",
        //     trigger: "change",
        //   },
        // ],
        signUpStart: [
          {
            required: true,
            message: "请选择报名开始时间",
            trigger: "change",
          },
        ],
        signUpEnd: [
          {
            required: true,
            message: "请选择报名结束时间",
            trigger: "change",
          },
        ],
        classTime: [
          {
            required: true,
            message: "请选择报每课时长",
            trigger: "change",
          },
        ],
      },
      id: "",
      studentList: [],
      courseTimeList: [],
      isMusicTheory: false,
      chioseStudent: [],
      classTimeDis: false,
    };
  },
  computed: {
    allCourseCount() {
      let online, offline;
      this.centerForm.onlineCourseNum
        ? (online = this.centerForm.onlineCourseNum)
        : (online = 0);
      this.centerForm.offlineCourseNum
        ? (offline = this.centerForm.offlineCourseNum)
        : (offline = 0);
      let giveNum;
      // if (this.hotType == "GIVE_CLASS") {
      //   //  this.attribute1  从多少节开始送
      //   //  this.attribute2  送多少节
      //   giveNum = parseInt(
      //     parseInt(offline) + parseInt(online) - this.attribute1 >= 0
      //       ? (giveNum = this.attribute2)
      //       : (giveNum = 0)
      //   );
      //   if (giveNum) {
      //     // 有赠送课时
      //     this.isGiveClass = true;
      //   }
      //   this.giveNum = giveNum || 0;

      //   return parseInt(offline) + parseInt(online) + "+" + giveNum || "";
      // }
      return parseInt(offline) + parseInt(online) || "";
    },
  },
  created() {
    // this.init();
  },
  mounted() {
    // 获取所有老师的接口  根据声部id获取老师
    // 获取课程类型的接口
    // 获取学生列表
    // Object.assign(this.$data, this.$options.data());

    // setTimeout(() => {
    //   this.$refs["leftForm"].resetFields();
    // }, 100);
    // 判断一下有没有缓存
    this.courseType = this.$route.query.courseType;
    if (this.courseType == "PRACTICE") {
      this.title = "网管课申请";
      this.$route.meta.title = "网管课申请";
      this.hasOffline = false;
      // this.$router.push(
      //   {
      //     query: merge(this.$route.query, {
      //      courseType:'PRACTICE'
      //     })
      //   },
      //   (router) => {
      //     console.log(router);

      //   }
      // );
      //   let sotrage = JSON.parse(localStorage.getItem(`newPractice`));
      //   if (sotrage?.leftForm?.classOrganId) {
      //     this.$confirm("检测到您有未提交的数据, 是否恢复?", "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       closeOnClickModal: false,
      //       type: "warning",
      //     }).then(async () => {
      //       this.activeStudentList = sotrage.activeStudentList;
      //       this.centerForm = sotrage.centerForm;
      //       this.leftForm = sotrage.leftForm;
      //       this.rightForm = sotrage.rightForm;
      //       this.timeTable = sotrage.timeTable;
      //       this.educationList = sotrage.educationList;
      //       this.courseTypeList = sotrage.courseTypeList;
      //       // 为了刷新线上课单价和线下课单价
      //       await vipGroupCategory({
      //         organId: sotrage?.leftForm?.classOrganId,
      //       }).then((res) => {
      //         if (res.code == 200) {
      //           this.courseTypeList = res.data;
      //         }
      //       });
      //       this.scetionList = sotrage.scetionList;
      //       this.studentList = sotrage.studentList;
      //       this.activeList = sotrage.activeList;
      //       this.studentLimit = sotrage.studentLimit;
      //       this.teacherList = sotrage.teacherList;
      //       this.isMusicTheory = sotrage.isMusicTheory;
      //       this.chioseStudent = sotrage.chioseStudent;
      //       this.maxCourseNum = sotrage.maxCourseNum;
      //       this.minCourseNum = sotrage.minCourseNum;
      //       if (this.leftForm?.courseType) {
      //         this.changePrice(this.leftForm.courseType);
      //       }
      //     });
      //   }
      // } else {
      //   this.title = "VIP/乐理课申请";
      //   this.$route.meta.title = "VIP/乐理课申请";
      //   let sotrage = JSON.parse(localStorage.getItem(`newVip`));
      //   if (sotrage?.leftForm?.classOrganId) {
      //     this.$confirm("检测到您有未提交的数据, 是否恢复?", "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       closeOnClickModal: false,
      //       type: "warning",
      //     }).then(async () => {
      //       this.activeStudentList = sotrage.activeStudentList;
      //       this.centerForm = sotrage.centerForm;
      //       this.leftForm = sotrage.leftForm;
      //       this.rightForm = sotrage.rightForm;
      //       this.timeTable = sotrage.timeTable;
      //       this.educationList = sotrage.educationList;
      //       this.courseTypeList = sotrage.courseTypeList;
      //       this.maxCourseNum = sotrage.maxCourseNum;
      //       this.minCourseNum = sotrage.minCourseNum;
      //       // 为了刷新线上课单价和线下课单价
      //       await vipGroupCategory({
      //         organId: sotrage?.leftForm?.classOrganId,
      //       }).then((res) => {
      //         if (res.code == 200) {
      //           this.courseTypeList = res.data;
      //         }
      //       });
      //       this.scetionList = sotrage.scetionList;
      //       this.studentList = sotrage.studentList;
      //       this.activeList = sotrage.activeList;
      //       this.studentLimit = sotrage.studentLimit;
      //       this.teacherList = sotrage.teacherList;
      //       this.isMusicTheory = sotrage.isMusicTheory;
      //       this.chioseStudent = sotrage.chioseStudent;
      //       if (this.leftForm?.courseType) {
      //         this.changePrice(this.leftForm.courseType);
      //       }
      //     });
      //   }
    }

    this.init();
  },
  activated() {
    // Object.assign(this.$data, this.$options.data());
    // setTimeout(() => {
    //   this.$refs["leftForm"].resetFields();
    // }, 100);
    // this.init();
  },
  beforeDestroy() {},
  beforeRouteLeave(to, from, next) {
    if (this.leftForm?.classOrganId && from.path == "/business/buildVip") {
      console.log(this.leftForm?.classOrganId);
      this.$confirm("检测到您有未提交的数据, 离开将丢失该数据!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning",
      })
        .then(() => {
          next();
        })
        .catch((err) => {});
    } else {
      next();
    }
  },
  methods: {
    resetFrom() {
      this.leftForm = {
        // name: "",
        teacher: "",
        subject: "",
        courseType: "",
        activeType: "",
        classNum: "",
        classTime: "",
        // signTimer:[],
        signUpStart: "",
        signUpEnd: "",
        courseStartOnline: "",
        courseStartOffline: "",
        section: "",
        courseStart: "",
        courseEnd: "",
        educationalTeacherId: "",
        students: [],

        classOrganId: "", // 课程分部
      };
      this.activeStudentList = [];
      this.studentLimit = 0;
      this.classTimeList = [];
      this.centerForm = {
        allCourseNum: "",
        onlineCourseNum: 0,
        offlineCourseNum: 0,
        radio: "",
      };
      this.maskForm = {
        type: "",
        week: "",
        startTime: "",
        endTime: "",
      };
      this.rightForm = {
        onlineCourse: "",
        offlineCourse: "",
        onlinePrice: "",
        offlinePrice: "",
        allPrice: "",
        discount: 100,
      };
      this.hasOnline = true;
      this.hasOffline = true;
      this.onlineSalary = ""; // 线上课课酬结算方式
      this.offlineSalary = ""; // 线下课课酬结算方式
      this.hotType = "";
      this.attribute1 = "";
      this.attribute2 = "";
      this.attribute3 = "";
      this.maxCourseNum = 0;
      this.minCourseNum = 0;
      this.salaryReadonlyFlag = ""; // 老师课酬是否可配
      this.paymentReadonlyFlag = ""; // 课程单价是否可配
      this.onlinelookList = []; // 展示课表线上
      this.offlineLookList = []; // 展示课表线下
      this.timeTable = []; // 真正的课表
      this.giveNum = "";
      this.chioseStudent = [];
      this.$refs["leftForm"].resetFields();
      localStorage.removeItem("newVip");
      localStorage.removeItem(`newPractice`);
    },
    async init() {
      if (this.$route.query.rules) {
        this.rules = this.$route.query.rules;
      }
      if (this.$route.query.searchForm) {
        this.searchForm = this.$route.query.searchForm;
      }
      // 获取所有科目的接口
      await this.$store.dispatch("setBranchs");
      if (this.selects.branchs.length <= 0) {
        this.$bus.$emit("showguide", ["organ"]);
      }

      if (this.courseType == "PRACTICE") {
        getPracticeApplySubjects().then((res) => {
          if (res.code == 200) {
            this.subjectList = res.data;
          }
        });
      } else {
        getSubject({
          tenantId: 1,
        }).then((res) => {
          if (res.code == 200) {
            this.subjectList = res.data;
          }
        });
      }

      //  获取乐团主管

      this.pickerOptions = this.beginDate();
      this.pickerOptions1 = this.processDate();
      this.courseOption = this.coursesDate();
    },
    onCourseNumChange(type) {
      // 折扣类型，并且设置的排课数有值
      this.computationalBtn = false;
      let centerForm = this.centerForm;
      if (this.maxCourseNum > 0 && this.minCourseNum > 0) {
        // 判断线上或线下总和大于排课次数
        let onlineNum = centerForm.onlineCourseNum || 0;
        let offlineNum = centerForm.offlineCourseNum || 0;
        let allNUm = parseInt(onlineNum) + parseInt(offlineNum);
        if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {
          this.$message.error("待排课数不可超过该活动限制");
          return;
        }
      }
    },
    coursesDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          if (self.leftForm.courseStart && self.leftForm.courseEnd) {
            let date = new Date(self.leftForm.courseStart.replace(/-/, "/"));
            let endDate = new Date(self.leftForm.courseEnd.replace(/-/, "/"));
            let nowDate = new Date();
            let changeDate =
              date.getTime() - nowDate.getTime() > 0 ? date : nowDate;
            let endChangeDate =
              endDate.getTime() - nowDate.getTime() > 0 ? endDate : nowDate;
            return (
              time.getTime() < changeDate.getTime() ||
              time.getTime() > endChangeDate.getTime()
            );
          }
          return;
        },
      };
    },
    beginDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime(); //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },

    processDate() {
      //提出结束时间必须大于提出开始时间
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.leftForm.signUpStart) {
            return (
              new Date(self.leftForm.signUpStart).getTime() > time.getTime()
            );
          } else {
            return time.getTime() > Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    changeSubject(val) {
      this.computationalBtn = false;
      this.leftForm.teacher = "";
      this.leftForm.section = "";
      // 根据科目id获取相应的老师
      findTeacherByOrganId({
        subjectIds: val,
        organId: this.leftForm.classOrganId,
      }).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
           if( this.teacherList.length <=0){
          this.$bus.$emit("showguide", ['teacher']);
          return
        }
        }
      });
      // getTeacherBySubject({ subjecId: val }).then(res => {
      //   if (res.code == 200) {
      //     this.teacherList = res.data;
      //   }
      // })
    },
    // 选择课程类型
    changeType(val) {
      // 在这里清空默认课酬
      this.rightForm.offlineCourse = "";
      this.rightForm.onlineCourse = "";
      this.leftForm.activeType = "";
      this.computationalBtn = false;
      this.leftForm.students = []; // 重置所选学生
      this.changePrice(val);
    },
    changePrice(val) {
      for (let i in this.courseTypeList) {
        if (this.courseTypeList[i].id == val) {
          // 学生人数
          this.leftForm.classNum = this.courseTypeList[i].studentNum;
          this.studentLimit = this.courseTypeList[i].studentNum;
          // 每课时长
          this.classTimeList =
            this.courseTypeList[i].singleClassMinutes.split(",");
          // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
          this.leftForm.classTime = this.classTimeList[0];
          // 线上课单节价格
          this.rightForm.onlinePrice =
            this.courseTypeList[i].onlineClassesUnitPrice;
          // 线下课单节价格
          this.rightForm.offlinePrice =
            this.courseTypeList[i].offlineClassesUnitPrice;

            if(this.rightForm.onlinePrice<=0 || this.rightForm.offlinePrice<=0){
               this.$bus.$emit("showguide", ['vipPrice']);
              return
            }
          this.isMusicTheory = this.courseTypeList[i].musicTheory;
        }
      }
      this.activeStudentList = [];
      this.studentList.forEach((stu) => {
        if (
          Array.isArray(this.chioseStudent)
            ? this.chioseStudent.indexOf(stu.userId) != -1
            : stu.userId == this.chioseStudent
        ) {
          let discount = this.rightForm.discount
            ? this.rightForm.discount
            : 100;
          this.activeStudentList.push({
            studentId: stu.userId,
            userName: stu.username,
            onlineClassesUnitPrice: this.rightForm.onlinePrice,
            offlineClassesUnitPrice: this.rightForm.offlinePrice,
            paymentPrice: "",
          });
        }
      });
    },
    // 选择活动方案
    chioseActive(val) {
      this.computationalBtn = false;
      this.rightForm.offlineCourse = "";
      this.rightForm.onlineCourse = "";
      // this.rightForm.onlinePrice = '';
      // this.rightForm.offlinePrice = '';
      this.centerForm.onlineCourseNum = 0;
      this.centerForm.offlineCourseNum = 0;
      this.lookList = [];
      this.timeTable = [];
      this.attribute1 = "";
      this.attribute2 = "";
      this.attribute3 = "";
      this.rightForm.discount = 100;
      this.giveNum = 0;
      this.isGiveClass = false;
      this.leftForm.courseStart = "";
      this.leftForm.courseEnd = "";
      this.hasOnline = true;
      this.hasOffline = true;
      this.maxCourseNum = 0;
      this.minCourseNum = 0;

      if (val) {
        this.classTimeDis = true;
        for (let i in this.courseTypeList) {
          if (this.courseTypeList[i].id == this.leftForm.courseType) {
            // 学生人数
            this.leftForm.classNum = this.courseTypeList[i].studentNum;
            // 每课时长

            this.classTimeList =
              this.courseTypeList[i].singleClassMinutes.split(",");
            // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
            this.leftForm.classTime = this.classTimeList[0];
            // 线上课单节价格
            this.rightForm.onlinePrice =
              this.courseTypeList[i].onlineClassesUnitPrice;
            // 线下课单节价格
            this.rightForm.offlinePrice =
              this.courseTypeList[i].offlineClassesUnitPrice;
            this.rightForm.discount = this.courseTypeList[i].discount;
          }
        }
        // 根须活动id获取 相应的值
        for (let i in this.activeList) {
          if (this.activeList[i].id == val) {
            // 如果是买赠就必须选择赠课类型
            // 报名开始 报名结束 课程开始 课程结束 // 判断是否有线上,线下课 并同步状态
            // this.leftForm.signUpStart = this.activeList[i].startTime;
            // this.leftForm.signUpEnd = this.activeList[i].endTime;
            this.maxCourseNum = this.activeList[i].maxCourseNum || 0;
            this.minCourseNum = this.activeList[i].minCourseNum || 0;
            this.leftForm.courseStart = this.activeList[i].coursesStartTime;
            this.leftForm.courseEnd = this.activeList[i].coursesEndTime;
            this.rightForm.discount = this.activeList[i].discount;
            this.leftForm.classTime = this.activeList[i].singleCourseTime;
            // 获取活动种类并保存
            this.hotType = this.activeList[i].type;
            // 获取买赠必要参数
            this.attribute1 = this.activeList[i].attribute1;
            this.attribute2 = this.activeList[i].attribute2;
            this.attribute3 = this.activeList[i].attribute3;
            // 存储课酬是否可配置
            this.salaryReadonlyFlag = this.activeList[i].salaryReadonlyFlag;
            this.paymentReadonlyFlag = this.activeList[i].paymentReadonlyFlag;
            if (this.courseType == "PRACTICE") {
              this.hasOffline = false;
              this.hasOnline = true;
            } else {
              if (this.activeList[i].teachMode == 0) {
                this.hasOffline = false;
                // -1：所有；0：线上；1：线下"
              }
              if (this.activeList[i].teachMode == 1) {
                this.hasOnline = false;
              }
            }

            this.activeStudentList = [];

            this.studentList.forEach((stu) => {
              if (
                Array.isArray(this.chioseStudent)
                  ? this.chioseStudent.indexOf(stu.userId) != -1
                  : stu.userId == this.chioseStudent
              ) {
                let discount = this.rightForm.discount
                  ? this.rightForm.discount
                  : 100;
                this.activeStudentList.push({
                  studentId: stu.userId,
                  userName: stu.username,
                  onlineClassesUnitPrice: this.rightForm.onlinePrice,
                  offlineClassesUnitPrice: this.rightForm.offlinePrice,
                  paymentPrice: "",
                });
              }
            });
          }
        }
      } else {
        this.classTimeDis = false;
        for (let i in this.courseTypeList) {
          if (this.courseTypeList[i].id == this.leftForm.courseType) {
            // 学生人数
            this.leftForm.classNum = this.courseTypeList[i].studentNum;
            // 每课时长
            this.classTimeList =
              this.courseTypeList[i].singleClassMinutes.split(",");
            // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
            this.leftForm.classTime = this.classTimeList[0];
            // 线上课单节价格
            this.rightForm.onlinePrice =
              this.courseTypeList[i].onlineClassesUnitPrice;
            // 线下课单节价格
            this.rightForm.offlinePrice =
              this.courseTypeList[i].offlineClassesUnitPrice;
            this.rightForm.discount = this.courseTypeList[i].discount;
          }
        }
        this.leftForm.classTime = null;
        if (this.courseType == "PRACTICE") {
          this.hasOffline = false;
          this.hasOnline = true;
          this.classTimeList = [25];
        }
      }
      // 重置课程单价
    },
    // 点击确插入课表
    addWeek() {
      let courseType = this.maskForm.type;
      // let week = ;this.maskForm.week
      let startTime = this.maskForm.startTime;
      if (!courseType || !this.maskForm.week || !startTime) {
        this.$message.error("请填写完成信息");
        return;
      }
      // 拿到相应的值插入数组
      let endTime = this.MinutesTest(startTime, this.leftForm.classTime);
      let str;
      switch (courseType) {
        case "ONLINE": {
          str = "线上课";
          break;
        }
        case "OFFLINE": {
          str = "线下课";
          break;
        }
      }
      let flag = false;
      for (let i in this.lookList) {
        if (this.lookList[i].weekDay == this.maskForm.week) {
          flag = true;
        }
      }
      // true=> 说明有这一周 那么循环找到这一周 在判断时间
      // flase=> 说明没有这一周的时间 直接添加
      if (flag) {
        // 有相同的周日
        let arr = [];
        for (let i in this.lookList) {
          if (this.lookList[i].weekDay == this.maskForm.week) {
            // 找到这一天的所有元素
            //  && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)
            let isStartTime = this.timeIsrange(
              startTime,
              endTime,
              this.lookList[i].startTime
            );
            let isEndTime = this.timeIsrange(
              startTime,
              endTime,
              this.lookList[i].endTime
            );
            arr.push(!isEndTime && !isStartTime);
          }
        }
        let isAdd = true;
        for (let j = 0; j < arr.length; j++) {
          isAdd = isAdd && arr[j];
        }
        if (isAdd) {
          this.lookList.push({
            type: str,
            week: this.weekDay[this.maskForm.week],
            weekDay: this.maskForm.week,
            startTime: startTime,
            endTime: endTime,
            time: startTime + "-" + endTime,
            id: Date.now(),
          });
        } else {
          this.$message.error("该时间段已排课请重选时间");
          return;
        }
      } else {
        this.lookList.push({
          type: str,
          week: this.weekDay[this.maskForm.week],
          weekDay: this.maskForm.week,
          startTime: startTime,
          endTime: endTime,
          time: startTime + "-" + endTime,
          id: Date.now(),
        });
      }
      // let courseType = this.maskForm.type;
      // // let week = ;this.maskForm.week
      // let startTime = this.maskForm.startTime;
      //  根据时间排序
      this.maskForm.type = "";
      this.maskForm.week = "";
      this.maskForm.startTime = "";
      this.maskForm.endTime = "";
    },
    // 分钟小时相加减
    MinutesTest(str, interval) {
      let houer = str.split(":")[0];
      let min = str.split(":")[1];
      let sdate1 = new Date(1900, 1, 1, houer, min);
      sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
      let H = sdate1.getHours();
      let M = sdate1.getMinutes();
      if (H < 10) H = "0" + H;
      if (M < 10) M = "0" + M;
      return H + ":" + M;
    },
    // 判断时间是否在时间段内
    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;
      }
    },
    removeWeekCourse(id) {
      for (let i in this.lookList) {
        if (this.lookList[i].id == id) {
          this.lookList.splice(i, 1);
        }
      }
    },
    setTimeTable() {
      // 拿到线上课数与线下课数 以及
      this.timeTable = [];
      let online = parseInt(this.centerForm.onlineCourseNum) || 0;
      let offline = parseInt(this.centerForm.offlineCourseNum) || 0;

      let giveNum = this.giveNum;
      let giveClassType = this.centerForm.radio;
      if (giveClassType == "ONLINE") {
        // 线上
        online += giveNum;
      } else if (giveClassType == "OFFLINE") {
        offline += giveNum;
      }
      if (!this.maskForm.courseStartOnline) {
        this.$message.error("请选择课程开始时间");
        return;
      }

      // 这里判断是否选择了排课开始时间
      // if (online && !this.maskForm.courseStartOnline) {
      //   this.$message.error("选择了线上课 但没有线上课开始时间");
      //   return;
      // }

      // if (offline && !this.maskForm.courseStartOffline) {
      //   this.$message.error("选择了线下课 但没有线下课开始时间");
      //   return;
      // }
      let date, date1;
      date = new Date(this.maskForm.courseStartOnline.getTime());
      date1 = new Date(this.maskForm.courseStartOnline.getTime());
      // if (this.maskForm.courseStartOnline) {
      //   date = new Date(this.maskForm.courseStartOnline.getTime());
      // }
      // if (this.maskForm.courseStartOffline) {
      //   date1 = new Date(this.maskForm.courseStartOffline.getTime());
      // }
      // let startWeekday = this.maskForm.courseStart.getDay();
      let onlineList = []; // 装线上课的数组
      let offlineList = []; //装线下课的数组
      if (this.lookList.length <= 0) {
        this.$message.error("请先排课后再点击确认按钮");
        return;
      }

      for (let i in this.lookList) {
        if (this.lookList[i].type == "线上课") {
          onlineList.push({
            week: this.lookList[i].weekDay,
            date: this.lookList[i],
          });
        }
        if (this.lookList[i].type == "线下课") {
          offlineList.push({
            week: this.lookList[i].weekDay,
            date: this.lookList[i],
          });
        }
      }
      //  (onlineList + '----------------------------------------------------------------------------------');
      //  (offlineList);

      if (online > 0 && onlineList.length <= 0) {
        this.$message.error("选择了线上课但未排线上课");
        this.timeTable = [];
        return;
      }
      if (offline > 0 && offlineList.length <= 0) {
        this.$message.error("选择了线下课但未排线下课");
        this.timeTable = [];
        return;
      }

      // 获取要排课的总数  获取每周要排多少次
      while (online && online > 0) {
        // 排线上课g
        for (let i in onlineList) {
          let num;
          onlineList[i].week - date.getDay() >= 0
            ? (num = onlineList[i].week - date.getDay())
            : (num = onlineList[i].week - date.getDay() + 7); // +差值的天数://差值的天数+7
          //  (num);
          let dataStr = this.getThinkDate(date, num);
          this.timeTable.push({
            classDate: dataStr + " 00:00:00",
            actualTeacherId: this.leftForm.teacher,
            startClassTimeStr: onlineList[i].date.startTime,
            endClassTimeStr: onlineList[i].date.endTime,
            teachMode: "ONLINE",
          });
          online--;
          if (online == 0) break;
        }
        if (onlineList.length == 1 || this.isAllEqual(onlineList)) {
          date.setDate(date.getDate() + 7);
        }

        // 加一周
      }

      //  (date1)
      while (offline && offline > 0) {
        // 排线下课
        for (let i in offlineList) {
          let num;
          offlineList[i].week - date1.getDay() >= 0
            ? (num = offlineList[i].week - date1.getDay())
            : (num = offlineList[i].week - date1.getDay() + 7); // +差值的天数://差值的天数+7
          let dataStr = this.getThinkDate(date1, num);
          this.timeTable.push({
            classDate: dataStr + " 00:00:00",
            actualTeacherId: this.leftForm.teacher,
            startClassTimeStr: offlineList[i].date.startTime,
            endClassTimeStr: offlineList[i].date.endTime,
            teachMode: "OFFLINE",
          });
          offline--;
          if (offline == 0) break;
        }
        // 加一周
        if (offlineList.length == 1 || this.isAllEqual(offlineList)) {
          date1.setDate(date1.getDate() + 7);
        }
      }
      //  (this.timeTable);

      this.timeTable.sort((a, b) => {
        let aStr = dayjs(
          dayjs(a.classDate).format("YYYY-MM-DD") +
            " " +
            a.startClassTimeStr +
            ":00"
        ).valueOf();
        let bStr = dayjs(
          dayjs(b.classDate).format("YYYY-MM-DD") +
            " " +
            b.startClassTimeStr +
            ":00"
        ).valueOf();
        return aStr - bStr;
      });
      this.dialogFormVisible = false;
    },
    getThinkDate(date, num) {
      let Stamp = date;
      Stamp.setDate(date.getDate() + num); // 获取当前月数的第几天
      //  (date.getMonth() + 1)
      //  (Stamp.getMonth() + 1)
      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 + "";
      }
      //  (year + "-" + mvar + '-' + dvar);
      return year + "-" + mvar + "-" + dvar;
    },
    // 计算课酬
    computational() {
      if (this.timeTable.length <= 0) {
        this.$message.error("请先排课再计算课酬");
        return;
      }

      this.computationalBtn = true;
      let userId = this.leftForm.teacher || null;
      let giveTeachMode = this.centerForm.radio || null;
      let vipGroupCategoryId = this.leftForm.courseType || null;
      let vipGroupActivityId = this.leftForm.activeType || null;
      let onlineClassesUnitPrice = this.rightForm.onlinePrice || null;
      let offlineClassesUnitPrice = this.rightForm.offlinePrice || null;
      let onlineClassesNum = this.centerForm.onlineCourseNum || 0;
      let offlineClassesNum = this.centerForm.offlineCourseNum || 0;
      let singleClassMinutes = this.leftForm.classTime;
      if (this.hotType == "GIVE_CLASS") {
        if (this.centerForm.radio == "ONLINE") {
          onlineClassesNum = parseInt(onlineClassesNum);
        } else if (this.centerForm.radio == "OFFLINE") {
          offlineClassesNum = parseInt(offlineClassesNum);
        }
      }
      let onlineTeacherSalary = this.rightForm.onlineCourse || null;
      let offlineTeacherSalary = this.rightForm.offlineCourse || null;
      let studentId = this.activeStudentList
        .map((stu) => {
          return stu.studentId;
        })
        .join(",");
      if (this.courseType == "PRACTICE") {
        getPracticeGroupCostCount({
          vipGroupActivityId,
          onlineClassesUnitPrice,
          onlineTeacherSalary,
          offlineTeacherSalary,
          vipGroupCategoryId,
          offlineClassesUnitPrice,
          allCourseNum: onlineClassesNum,
          offlineClassesNum,
          userId,
          giveTeachMode,
          singleClassMinutes,
          organId: this.leftForm?.classOrganId,
          studentId,
        }).then((res) => {
          if (res.code == 200) {
            this.rightForm.onlineCourse = res.data.onlineTeacherSalary;
            this.rightForm.offlineCourse = res.data.offlineTeacherSalary;
            this.rightForm.allPrice = res.data.totalPrice;
            this.activeStudentList.forEach((stu) => {
              stu.paymentPrice = res.data.totalPrice;
            });
          }
        });
      } else {
        getVipGroupCostCount({
          vipGroupActivityId,
          onlineClassesUnitPrice,
          onlineTeacherSalary,
          offlineTeacherSalary,
          vipGroupCategoryId,
          offlineClassesUnitPrice,
          onlineClassesNum,
          offlineClassesNum,
          userId,
          studentIdList: userId,
          giveTeachMode,
          singleClassMinutes,
          studentIdList: studentId,
        }).then((res) => {
          if (res.code == 200) {
            this.rightForm.onlineCourse = res.data.onlineTeacherSalary;
            this.rightForm.offlineCourse = res.data.offlineTeacherSalary;
            this.rightForm.allPrice = res.data.totalPrice;
            this.activeStudentList.forEach((stu) => {
              stu.paymentPrice = res.data.totalPrice;
            });
          }
        });
      }
    },
    isAllEqual(array) {
      if (array.length > 0) {
        return !array.some((val, index) => {
          return val.week != array[0].week;
        });
      } else {
        return true;
      }
    },
    submitInfo() {
      if (!this.computationalBtn) {
        this.$message.error("请点击计算按钮计算课酬");
        return;
      }
      // let activeCourseType;
      let flag = false;
      //  (this.courseTypeList,)
      // this.courseTypeList.forEach((courseType) => {
      //   if (courseType.id == this.leftForm.courseType) {
      //     activeCourseType = courseType;
      //   }
      // });
      //  (activeCourseType)
      if (this.isMusicTheory) {
        if (
          this.leftForm.students.length > this.studentLimit ||
          this.leftForm.students.length < 1
        ) {
          this.$message.error(`请选择上课学生为1-${this.studentLimit}人`);
          flag = true;
        }
      } else {
        if (
          this.leftForm.students.length !== this.studentLimit &&
          this.courseType != "PRACTICE"
        ) {
          this.$message.error(`请选择上课学生为${this.studentLimit}人`);
          flag = true;
        }
      }
      if (flag) return;
      // 获取活动方案

      // 判断线上课课酬和线下课课酬
      let online = parseInt(this.centerForm.onlineCourseNum);
      let offline = parseInt(this.centerForm.offlineCourseNum);

      let giveNum = this.giveNum;
      let giveClassType = this.centerForm.radio;
      if (giveClassType == "ONLINE") {
        // 线上
        online += giveNum;
      } else if (giveClassType == "OFFLINE") {
        offline += giveNum;
      }
      let obj = {};
      obj.courseSchedules = this.timeTable;
      /**
       *
       * teacher: '',
        subject: '',
        courseType: '',
        activeType: '',
        classNum: '',
        classTime: '',
        signUpStart: '',
        signUpEnd: '',
        courseStart: '',
        courseEnd: ''
       */
      let studentIdList = 0;
      if (this.courseType == "PRACTICE") {
        studentIdList = this.leftForm.students;
        obj.practiceGroupApplyBaseInfoDto = {
          studentId: studentIdList, // 这个不要了
          vipGroupStudentCoursePrices: this.activeStudentList,
          coursesExpireDate: this.leftForm.courseEnd,
          teacherSchoolId: this.leftForm.section,
          // name: this.leftForm.name,
          offlineClassesNum: offline || 0,
          onlineClassesNum: online || 0,
          offlineClassesUnitPrice: this.rightForm.offlinePrice || 0,
          onlineClassesUnitPrice: this.rightForm.onlinePrice || 0,
          paymentExpireDate: this.leftForm.signUpEnd,
          registrationStartTime: this.leftForm.signUpStart,
          singleClassMinutes: this.leftForm.classTime,
          studentNum: this.leftForm.classNum,
          userId: this.leftForm.teacher,
          vipGroupActivityId: this.leftForm.activeType,
          vipGroupCategoryId: this.leftForm.courseType,
          onlineTeacherSalary: this.rightForm.onlineCourse || 0,
          offlineTeacherSalary: this.rightForm.offlineCourse || 0,
          giveTeachMode: this.centerForm.radio,
          subjectId: this.leftForm.subject,
          educationalTeacherId: this.leftForm.educationalTeacherId,
          organId: this.leftForm.classOrganId,
          firstStudentId: this.leftForm.students[0] || null,
          allCourseNum: online,
        };
      } else {
        studentIdList = this.leftForm.students.join(",") || null;
        obj.vipGroupApplyBaseInfo = {
          studentId: studentIdList, // 这个不要了
          studentIdList,
          vipGroupStudentCoursePrices: this.activeStudentList,
          coursesExpireDate: this.leftForm.courseEnd,
          teacherSchoolId: this.leftForm.section,
          // name: this.leftForm.name,
          offlineClassesNum: offline || 0,
          onlineClassesNum: online || 0,
          offlineClassesUnitPrice: this.rightForm.offlinePrice || 0,
          onlineClassesUnitPrice: this.rightForm.onlinePrice || 0,
          paymentExpireDate: this.leftForm.signUpEnd,
          registrationStartTime: this.leftForm.signUpStart,
          singleClassMinutes: this.leftForm.classTime,
          studentNum: this.leftForm.classNum,
          userId: this.leftForm.teacher,
          vipGroupActivityId: this.leftForm.activeType,
          vipGroupCategoryId: this.leftForm.courseType,
          onlineTeacherSalary: this.rightForm.onlineCourse || 0,
          offlineTeacherSalary: this.rightForm.offlineCourse || 0,
          giveTeachMode: this.centerForm.radio,
          subjectIdList: this.leftForm.subject,
          educationalTeacherId: this.leftForm.educationalTeacherId,
          organId: this.leftForm.classOrganId,
          firstStudentId: this.leftForm.students[0] || null,
        };
      }

      if (this.courseType == "PRACTICE") {
        createPractice(obj).then((res) => {
          if (res.code == 200) {
            this.resetFrom();
            if (res.data == "ING") {
              this.$confirm(
                "课程提交成功，已提交运营主管审批,审批通过后，课程创建成功！",
                "提示",
                {
                  confirmButtonText: "确定",
                  type: "warning",
                }
              ).then(() => {
                this.$message.success("提交成功");
                this.$store.dispatch("delVisitedViews", this.$route);
                this.$router.push({
                  path: "/vipManager/vipList",
                  query: {
                    rules: this.rules,
                    searchForm: this.searchForm,
                  },
                });
              });
            } else {
              this.$message.success("恭喜您创建成功");
              this.onCancel();
            }
          }
          if (res.code == 206) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning",
            }).then(() => {
              obj.allowOverstepActivityStudentNum = 1;
              createPractice(obj).then((res) => {
                if (res.code == 200) {
                  this.resetFrom();
                  this.$message.success("提交成功");
                  this.onCancel();
                }
              });
            });
          }
        });
      } else {
        // 新增
        createVip(obj).then((res) => {
          if (res.code == 200) {
            this.resetFrom();
            if (res.data == "ING") {
              this.$confirm(
                "课程提交成功，已提交运营主管审批,审批通过后，课程创建成功！",
                "提示",
                {
                  confirmButtonText: "确定",
                  type: "warning",
                }
              ).then(() => {
                this.$message.success("提交成功");
                this.$store.dispatch("delVisitedViews", this.$route);
                this.$router.push({
                  path: "/vipManager/vipList",
                  query: {
                    rules: this.rules,
                    searchForm: this.searchForm,
                  },
                });
              });
            } else {
              this.$message.success("恭喜您创建成功");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/vipManager/vipList",
                query: {
                  rules: this.rules,
                  searchForm: this.searchForm,
                },
              });
            }
          }
          if (res.code == 206) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning",
            }).then(() => {
              obj.allowOverstepActivityStudentNum = 1;
              createVip(obj).then((res) => {
                if (res.code == 200) {
                  this.resetFrom();
                  this.$message.success("提交成功");
                  this.$store.dispatch("delVisitedViews", this.$route);
                  this.$router.push({
                    path: "/vipManager/vipList",
                    query: {
                      rules: this.rules,
                      searchForm: this.searchForm,
                    },
                  });
                }
              });
            });
          }
        });
      }
    },
    setSection(val) {
      this.leftForm.section = "";
      this.rightForm.offlineCourse = "";
      this.rightForm.onlineCourse = "";
      this.computationalBtn = false;
      // this.leftForm.courseType = "";
      if (val) {
        getTeachSchool({
          userId: val,
        }).then((res) => {
          if (res.code == 200) {
            this.scetionList = res.data;
        //         if(this.scetionList.length <=0){
        //   this.$bus.$emit("showguide", ['teamPayType']);
        //   return
        // }
          }
        });
      }
      // for (let i in this.teacherList) {
      //   if (this.teacherList[i].id == val) {
      //     // 根据分部id去获取课程形式
      //     vipGroupCategory({ organId: this.teacherList[i].organId }).then(
      //       res => {
      //         if (res.code == 200) {
      //           this.courseTypeList = res.data;
      //         }
      //       }
      //     );
      //   }
      // }
      // this.getClassOrgan(); // 获取公用部分
    },
    // getClassOrgan() {
    //   // 获取公用分部
    //   const leftForm = this.leftForm;
    //   let teacher = leftForm.teacher ? leftForm.teacher : null;
    //   let educationalTeacherId = leftForm.educationalTeacherId
    //     ? leftForm.educationalTeacherId
    //     : null;
    //   leftForm.classOrganId = null; // 重置课程分部数据
    //   this.classOrganList = [];
    //   // 初始化上课学生
    //   this.studentList = [];
    //   this.leftForm.students = [];
    //   if (!teacher || !educationalTeacherId) {
    //     // 如果没有选择指导老师和乐团主管则不请求
    //     return;
    //   }
    //   getPublicOrgans({
    //     teacherId: teacher,
    //     eduTeacherId: educationalTeacherId,
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       let result = res.data ? res.data : [];
    //       this.classOrganList = result;
    //     }
    //   });
    // },
    async onClassChange(val) {
      // 课程分部改变时
      // 老师 乐团主管 都要重置
      this.computationalBtn = false;
      this.studentList = [];
      this.activeStudentList = [];
      this.$set(this.leftForm, "students", []);
      this.$set(this.leftForm, "teacher", "");
      this.$set(this.leftForm, "educationalTeacherId", "");
      this.$set(this.leftForm, "section", "");
      this.$set(this.leftForm, "activeType", "");
      this.$set(this.leftForm, "classTime", "");
      this.$set(this.leftForm, "subject", "");

      // this.leftForm.students = [];
      // this.leftForm.teacherId = "";
      // this.leftForm.educationalTeacherId = "";
      this.courseTypeList = [];
      if (this.leftForm.courseType) {
        this.$set(this.leftForm, "courseType", null);
      }

      // this.leftForm.courseType = null;
      if (val) {
        this.getOrganStudentList(val);
        vipGroupCategory({
          organId: val,
        }).then((res) => {
          if (res.code == 200) {
            this.courseTypeList = res.data;
          }
        });
        // 获取乐团主管
        try {
          const ruselt = await findUserByRole({
            id: val,
          });
          this.educationList = ruselt?.data?.educationId;
          if (this.educationList.length <= 0) {
            this.$bus.$emit("showguide", ["teamManager"]);
            return
          }
        } catch (e) {
          console.log(e);
        }
        /**
         *
        // 乐团主管
        this.educationList = ruselt?.data?.educationId;
         */
        // findEducationUsers({ organId: val }).then((res) => {
        //   if (res.code == 200) {
        //     this.educationList = res.data;
        //   }
        // });
        // 如果是网管课 则获取网管课单价
        if (this.courseType == "PRACTICE") {
          getPracticeGroupSellPrice({ organId: val }).then((res) => {
            if (res.code == 200) {
              this.rightForm.onlinePrice = res.data.singleClassMinutesPrice;
            }
          });
        }
      }
    },
    onCancel() {
      if (this.courseType) {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/accompanyManager/accompany",
        });
      } else {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/vipManager/vipList",
        });
      }
    },
    setCourse() {
      // if (
      //   this.hotType == "GIVE_CLASS" &&
      //   this.isGiveClass &&
      //   !this.centerForm.radio
      // ) {
      //   this.$message.error("您还未选择赠课类型");
      //   return;
      // }

      this.$refs["leftForm"].validate((vali) => {
        if (vali) {
          let centerForm = this.centerForm;
          if (this.maxCourseNum > 0 && this.minCourseNum > 0) {
            // 判断线上或线下总和大于排课次数
            let onlineNum = centerForm.onlineCourseNum || 0;
            let offlineNum = centerForm.offlineCourseNum || 0;
            let allNUm = parseInt(onlineNum) + parseInt(offlineNum);
            if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {
              this.$message.error("待排课数不可超过该活动限制");

              return;
            }
          }
          this.dialogFormVisible = true;
        }
      });
    },
    // setVipInfo(data) {
    //   // this.leftForm.name = data.name;
    //   this.leftForm.subject = parseInt(data.subjectIdList);
    //   // 激活声部下的所有老师
    //   this.changeSubject(parseInt(data.subjectIdList));
    //   // 设置老师
    //   this.leftForm.teacher = data.userId;
    //   this.setSection(data.userId);
    //   // 课程形式
    //   this.leftForm.courseType = data.vipGroupCategoryId;
    //   // 获取课程形式下的活动方案
    //   this.changeType(this.leftForm.courseType);
    //   // 根据课程形式获取活动方案
    //   this.leftForm.activeType = data.vipGroupActivityId;
    //   setTimeout((res) => {
    //     this.chioseActive(data.vipGroupActivityId);
    //   }, 1000);

    //   this.leftForm.section = data.teacherSchoolId;
    //   this.leftForm.classNum = data.studentNum;
    //   this.leftForm.classTime = data.singleClassMinutes;
    //   this.leftForm.signUpStart = data.registrationStartTime;
    //   this.leftForm.signUpEnd = data.paymentExpireDate;
    //   this.centerForm.onlineCourseNum = data.onlineClassesNum;
    //   this.centerForm.offlineCourseNum = data.offlineCourseNum;
    //   /**
    //    *   rightForm: {
    //     onlineCourse: '',
    //     offlineCourse: '',
    //     onlinePrice: '',
    //     offlinePrice: '',
    //     allPrice: ''
    //   },
    //    *
    //    */
    //   this.rightForm.onlineCourse = data.onlineTeacherSalary;
    //   this.rightForm.onlinePrice = data.onlineClassesUnitPrice;
    //   this.rightForm.offlineCourse = data.offlineTeacherSalary;
    //   this.rightForm.offlinePrice = data.offlineClassesUnitPrice;
    //   this.rightForm.allPrice = data.totalPrice;

    //   //subjectIdList
    // },
    getOrganStudentList(organId) {
      if (organId) {
        queryOrganStudentList({
          rows: 50,
          organId: organId,
        }).then((res) => {
          if (res.code == 200) {
            this.studentList = res.data.rows;
          }
        });
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        this.remoteLoading = true;
        // 发请求搜索
        const url = "/api-web/studentManage/queryOrganStudentList";
        const options = {
          method: "get",
          headers: {
            Authorization: getToken(),
          },
          params: {
            rows: 9999,
            search: query,
            organId: this.leftForm.classOrganId,
          },
          url,
        };
        this.remoteLoading = true;
        // this.studentList = []
        axios(options).then((res) => {
          this.remoteLoading = false;
          let result = res.data;
          if (result.code == 200) {
            // Array.prototype.splice.apply(this.studentList, result.data.rows);
            if (result.data.rows && result.data.rows.length > 0) {
              result.data.rows.forEach((item) => {
                this.studentList.unshift(item);
              });
              this.studentList = this.deweight(this.studentList, "userId");
            }
            // this.studentList = this.studentList.concat(result.data.rows);
          }
        });
        // queryStudentList({ rows: 100, search: query }).then(res => {
        //   if (res.code == 200) {
        //     this.remoteLoading = false;
        //     this.studentList = this.studentList.concat(res.data.rows);
        //     this.unique(this.studentList, "userId");
        //   }
        // });
      }
    },
    changeStudent(val) {
      this.computationalBtn = false;
      this.chioseActive();
      this.leftForm.activeType = "";
      this.activeStudentList = [];
      this.chioseStudent = val;
      let discount = this.rightForm.discount ? this.rightForm.discount : 100;
      this.studentList.forEach((stu) => {
        if (val.indexOf(stu.userId) != -1) {
          this.activeStudentList.push({
            studentId: stu.userId,
            userName: stu.username,
            onlineClassesUnitPrice: this.rightForm.onlinePrice,
            offlineClassesUnitPrice: this.rightForm.offlinePrice,
            paymentPrice: "",
          });
        }
      });
      if (
        this.leftForm.courseType &&
        this.leftForm.teacher &&
        this.leftForm.students &&
        this.leftForm.students.length >= 1
      ) {
        let studentIds = this.leftForm.students.join(",");
        // 根据课程类型获取活动方案
        vipGroupActivityFind({
          categoryId: this.leftForm.courseType,
          teacherId: this.leftForm.teacher,
          studentIds,
        }).then((res) => {
          if (res.code == 200) {
            this.activeList = res.data;
          }
        });
      }
    },
    changeStudentP(val) {
      this.chioseActive();
      this.leftForm.activeType = "";
      this.activeStudentList = [];
      this.chioseStudent = val;
      let discount = this.rightForm.discount ? this.rightForm.discount : 100;
      this.studentList.forEach((stu) => {
        if (val == stu.userId) {
          this.activeStudentList.push({
            studentId: stu.userId,
            userName: stu.username,
            onlineClassesUnitPrice: this.rightForm.onlinePrice,
            offlineClassesUnitPrice: this.rightForm.offlinePrice,
            paymentPrice: "",
          });
        }
      });
      if (this.leftForm.teacher && this.leftForm.students) {
        let studentIds = this.leftForm.students;
        // 根据课程类型获取活动方案
        vipGroupActivityFind({
          categoryId: this.leftForm.courseType,
          teacherId: this.leftForm.teacher,
          studentIds,
          courseType: this.courseType,
        }).then((res) => {
          if (res.code == 200) {
            this.activeList = res.data;
            this.classTimeList = [25];
            this.hasOffline = false;
          }
        });
      }
    },
    // 制定属性去重
    deweight(arr, key) {
      let res = [];
      arr.forEach((item) => {
        let list = [];
        res.forEach((resitem) => {
          list.push(resitem[key]);
        });
        if (list.indexOf(item[key]) === -1) {
          res.push(item);
        }
      });
      return res;
    },
    getStartTime(val) {
      if (val) {
        let date = dayjs(new Date()).format("YYYY-MM-DD");
        this.maskForm.endTime = addTimerFormMinute(
          date,
          val,
          this.leftForm.classTime
        );
      } else {
        this.maskForm.endTime = "";
      }
      if (!this.maskForm.endTime) {
        this.maskForm.startTime = "";
      }
    },
    changeStudentMoney(val) {
      if (val) {
        this.computationalBtn = false;
      }
    },
  },
  // watch: {
  //   rightForm: {
  //     handler (newName, oldName) {
  //       this.computationalBtn = false
  //     },
  //     deep: true
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.computeMoney {
  margin-top: 10px;
  float: right;
}
.m-core {
  margin-top: 30px;
  // display: flex;
  // flex-direction: row;
  // justify-content: space-around;

  .el-input {
    width: 180px;
  }

  h4 {
    font-size: 16px;
    background-color: #ccc;
    color: #fff;
    // text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    padding: 0 20px;
  }

  // .vipLeft {
  //   width: 400px;
  //   // h4 {
  //   //   font-size: 16px;
  //   //   background-color: #ccc;
  //   //   color: #fff;
  //   //   text-align: center;
  //   //   width: 100%;
  //   //   height: 40px;
  //   //   line-height: 40px;
  //   //   margin-bottom: 20px;
  //   // }
  // }

  // .center {
  //   width: 400px;
  // }

  .right {
    margin-top: 20px;
  }
}
.vipMsg {
  margin-bottom: 20px;
}
.planList {
  padding: 0 25px;

  .planTop {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-top: 20px;

    > p {
      font-size: 14px;
    }
  }

  .planCore {
    .row {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      text-align: center;

      div {
        width: 87px;
      }

      // div {
      //   &:nth-child(1) {
      //     text-align: left;
      //   }
      // }
    }
  }
  .nomore {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
  }
}

.okBtn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  margin-right: 20px;
  cursor: pointer;
  background-color: #f97215;
  float: right;
}
.submitP {
  margin-bottom: 20px;
  font-size: 14px;
  padding-left: 24px;
}
</style>