dy-admin-manager/src/views/teamBuild/signupList.vue

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <div style="display: flex; justify-content: space-between">
          <div
            style="
              display: flex;
              margin-bottom: 15px;
              font-size: 18px;
              font-weight: 400;
            "
          >
            <p style="margin-right: 10px" v-if="applyExpireDate">
              报名截止时间:{{ applyExpireDate | formatTimer }}
            </p>
            <p v-if="paymentExpireDate">
              缴费截止时间:{{ paymentExpireDate | formatTimer }}
            </p>
          </div>
        </div>

        <div class="btnList">
          <!-- <div class='newBand close'
               v-permission="'musicGroup/cancelMusicGroup'"
               @click="onClose">停止乐团</div>   v-show="status == 'APPLY'"-->
          <div
            class="newBand"
            @click="payStart"
            v-permission="'musicGroup/openPay'"
            v-if="status == 'APPLY'"
          >
            开始缴费
          </div>
          <!-- v-show="status=='PAY'" -->
          <div
            class="newBand"
            v-permission="'musicGroup/found'"
            @click="onGoHome"
            v-if="status == 'APPLY' || status == 'PAY'"
          >
            确认开团
          </div>
          <div
            class="newBand"
            v-permission="'musicGroup/extensionApplyExpireDate'"
            @click="extendTime(false)"
            v-show="
              status == 'APPLY' ||
              status == 'PAY' ||
              status == 'PROGRESS' ||
              status == 'PREPARE'
            "
          >
            延长报名
          </div>

          <div
            class="newBand"
            v-permission="'musicGroup/extensionPayment'"
            @click="extendTime(true)"
            v-show="
              status == 'APPLY' ||
              status == 'PAY' ||
              status == 'PROGRESS' ||
              status == 'PREPARE'
            "
          >
            延长缴费
          </div>

          <div
            class="newBand"
            @click="onCreateQRCode('payment')"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            报名链接
          </div>
          <div class="newBand" @click="onCreateQRCode('detail')">缴费详情</div>
          <auth :auths="'studentRegistration/queryPreApplyList/4263'">
            <div
              class="newBand"
              style="margin-right: 0"
              @click="forecastVisible = true"
            >
              预报名名单
            </div>
          </auth>
          <!--    v-permission="getFullPermission('musicGroup/addMusicGroupRegs')" -->
          <div
            class="newBand"
            v-permission="'musicGroup/addMusicGroupRegs'"
            @click="mergeVisible = true"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            合并学员
          </div>
          <div
            class="newBand"
            style="background-color: #f97215; border: 1px solid #f97215"
            @click="onCreateQRCode('rePayment')"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            报名链接（无乐器）
          </div>
          <div
            class="newBand"
            v-permission="'studentRegistration/queryStudentApplyDetailExport'"
            @click="onDownLoadExecl"
          >
            名单导出
          </div>
          <auth :auths="'studentRegistration/getRegisterOrPreList'">
            <div
              class="newBand"
              style="margin-right: 0"
              @click="newForecastVisible = true"
            >
              时间数据统计
            </div>
          </auth>
          <auth :auths="'subject/findSubApplyDetail'">
            <el-popover placement="bottom" width="1000" trigger="hover">
              <el-table
                style="width: 100% !important"
                :data="leftList"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
              >
                <el-table-column
                  label="乐团声部"
                  prop="subjectName"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="计划招生"
                  prop="expectedStudentNum"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div>
                      <p v-show="!isEdit">{{ scope.row.expectedStudentNum }}</p>

                      <el-input
                        v-show="isEdit"
                        v-model.trim="scope.row.expectedStudentNum"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已报名"
                  prop="applyStudentNum"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="已缴费" prop="payNum" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getpayNum(scope.row)">{{
                        scope.row.payNum
                      }}</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="缴费中" prop="payingNum" align="center">
                  <template slot="header">
                    <p>
                      缴费中
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">提交订单尚未支付成功学员</div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getpayingNum(scope.row)">{{
                        scope.row.payingNum
                      }}</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="审核中" prop="checkNum" align="center">
                  <template slot="header">
                    <p>
                      审核中
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          不购买云教练系统学员数量，不包含已缴费学员
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getCheckNum(scope.row)">{{
                        scope.row.checkNum
                      }}</el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="购买云教练人数"
                  prop="buyCloudTeacherNum"
                  align="center"
                >
                  <template slot="header">
                    <p>
                      购买云教练人数
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          已缴费学员中购买了云教练系统的学员总数
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button
                        type="text"
                        @click="getCheckNum(scope.row, 'buyCloud')"
                        >{{ scope.row.buyCloudTeacherNum }}</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="入团未购云教练"
                  prop="noCloudTeacherStudentNumOfNormal"
                  align="center"
                >
                  <template slot="header">
                    <p>
                      入团未购云教练
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          【在读】学员中，未购买【云教练系统】学员数量
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button
                        type="text"
                        @click="getCheckNum(scope.row, 'noCloud')"
                        >{{
                          scope.row.noCloudTeacherStudentNumOfNormal
                        }}</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="购买乐器未入团人数" prop="cloudTeacherStudentNumOfApply" align="center">
                  <template slot="header">
                    <p>
                      购买乐器未入团人数
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          只购买乐器未解除限制学员数量（不包括退团学员）
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getCheckNum(scope.row, 'cloudTeacher')">{{
                        scope.row.cloudTeacherStudentNumOfApply
                      }}</el-button>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>
              <div
                class="btnWrap"
                v-permission="'musicGroup/updateExpectedStudentNum'"
                style="margin-right: 20px; margin-top: 20px"
              >
                <el-button
                  v-show="
                    !isEdit &&
                    (status == 'PAY' ||
                      status == 'APPLY' ||
                      status == 'PROGRESS' ||
                      status == 'PREPARE')
                  "
                  @click="isEdit = true"
                  >编辑</el-button
                >
                <el-button v-show="isEdit" @click="saveIsEdit">保存</el-button>
              </div>
              <div class="newBand" slot="reference">人数统计</div>
            </el-popover>
          </auth>
        </div>
      </div>
      <el-dialog
        title="选择合并乐团"
        :visible.sync="mergeVisible"
        width="950px"
      >
        <mergeMusic
          v-if="mergeVisible"
          style="padding: 0 20px"
          :organId="organId"
          @close="mergeVisible = false"
          @submited="getList"
        />
      </el-dialog>
      <el-dialog
        title="时间数据统计"
        :visible.sync="newForecastVisible"
        width="1100px"
      >
        <newForecastList
          v-if="newForecastVisible"
          @close="newForecastVisible = false"
        />
      </el-dialog>
      <el-dialog
        title="预报名名单"
        :visible.sync="forecastVisible"
        width="1150px"
      >
        <forecastList v-if="forecastVisible" @close="forecastVisible = false" />
      </el-dialog>
      <!--  stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      }, -->
    </div>
    <div class="searchList">
      <save-form
        :inline="true"
        :model="searchFrom"
        @submit="search"
        @reset="onReset"
      >
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.subject"
            filterable
            clearable
            placeholder="请选择专业"
          >
            <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>
          <el-select
            v-model.trim="searchFrom.isAllowAdjust"
            filterable
            placeholder="请选择是否允许调剂"
            clearable
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.name"
            placeholder="请输入用户名或手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-input v-model.trim="searchFrom.currentGrade" placeholder="请输入年级" clearable></el-input> -->
          <el-select
            v-model.trim="searchFrom.currentGrade"
            filterable
            clearable
            placeholder="请输入年级"
          >
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.paymentStatus"
            clearable
            filterable
            placeholder="报名缴费"
          >
            <el-option label="未开启缴费" value="0"></el-option>
            <el-option label="开启缴费" value="1"></el-option>
            <el-option label="已缴费" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.visited"
            clearable
            filterable
            placeholder="是否回访"
          >
            <el-option label="否" value="false"></el-option>
            <el-option label="是" value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.hasCloudTeacher"
            clearable
            filterable
            placeholder="是否购买云教练"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.noneNeedCloudTeacher"
            clearable
            filterable
            placeholder="是否解除限制"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.payingStatus"
            clearable
            filterable
            placeholder="订单状态"
          >
            <el-option label="缴费中" :value="1"></el-option>
            <el-option label="审核中" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="studentStatus">
          <el-select
            v-model.trim="searchFrom.studentStatus"
            clearable
            filterable
            placeholder="学员状态"
          >
            <el-option label="在读" value="NORMAL"></el-option>
            <!-- <el-option label="请假" value="LEAVE"></el-option>
            <el-option label="退团" value="QUIT"></el-option> -->
            <el-option label="报名" value="APPLY"></el-option>
          </el-select>
        </el-form-item>
        <!-- 专业actualSubjectId 调剂isAllowAdjust 手机号name -->
        <el-form-item>
          <el-button type="danger" native-type="search">搜索</el-button>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
    </div>
    <div>
      <el-table
        :data="rightList"
        ref="multipleTable"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkboxSelect"
        >
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-row style="margin-left: 64px">
                <el-col :span="4">
                  <el-form-item label="入团年份">
                    <span>
                      {{ props.row.createTime | dayjsFormat("YYYY年") }}</span
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="报名专业">
                    <span>{{ props.row.subjectName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="服从调剂:">
                    <span>{{ props.row.isAllowAdjust | isAllowAdjust }}</span>
                  </el-form-item></el-col
                >
                <!-- <el-col :span="4">
                  <el-form-item label="是否购买云教练:">
                    <span>{{
                      props.row.hasCloudTeacher == 1 ? "是" : "否"
                    }}</span>
                  </el-form-item></el-col
                > -->

                <el-col :span="4">
                  <!-- <el-form-item> -->
                  <!-- <template slot="label"> -->
                  <div class="hiddenwrap">
                    <p
                      style="
                        position: relative;
                        display: flex;
                        align-items: center;
                      "
                    >
                      解除限制
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          学员是否受到不购买云教练的缴费限制
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i
                        >:
                      </el-tooltip>
                    </p>
                    <!-- </template> -->

                    <span>
                      {{ props.row.noneNeedCloudTeacher == 1 ? "是" : "否" }}
                    </span>
                  </div>
                  <!-- </el-form-item>-->
                </el-col>
                <!-- <el-col :span="4">
                  <el-form-item label="备注:">
                    <overflow-text
                      :text="props.row.remark"
                    ></overflow-text> </el-form-item
                ></el-col> -->
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="studentName"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            <div>
              <p class="courseYellow left">
                学员: {{ scope.row.studentName }}({{ scope.row.gender | sex }})
              </p>
              <p class="left">家长: {{ scope.row.parentsName }}</p>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="家长姓名" prop="parentsName" align="center">
        </el-table-column> -->

        <!-- <el-table-column align="left" label="入团年份">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | dayjsFormat("YYYY年") }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          label="联系电话"
          prop="parentsPhone"
          align="center"
          width="110px"
        >
        </el-table-column>
        <el-table-column label="学员状态" prop="studentStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.studentStatus | musicGroupStudentType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="年级班级" align="center">
          <template slot-scope="scope">
            <div v-if=" gradeListObj[scope.row.currentGrade]">
              {{ gradeListObj[scope.row.currentGrade] + scope.row.currentClass }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="性别" prop="gender" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.gender | sex }}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="服从调剂" prop="isAllowAdjust" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isAllowAdjust | isAllowAdjust }}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="报名专业" prop="subjectName" align="center">
        </el-table-column> -->
        <el-table-column
          label="调剂专业"
          prop="actualSubjectName"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <p>
                {{ scope.row.actualSubjectName }}
              </p>
              <!-- <p>报名:{{ scope.row.subjectName }}</p> -->
            </div>
          </template>
        </el-table-column>

        <el-table-column label="是否回访" prop="paymentStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.visitNum ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- visited -->
        <!-- v-show='status == "PAY"' -->
        <el-table-column
          label="报名缴费/订单状态"
          prop="paymentStatus"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.paymentStatus | paymentStatus }}</p>
              <p>{{ scope.row.payingStatus | filtersPayingStatus }}</p>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="订单状态" prop="payingStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.payingStatus | filtersPayingStatus }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          label="是否购买会员"
          prop="hasCloudTeacher"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.hasCloudTeacher == 1 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="解除限制"
          fixed="right"
          prop="noneNeedCloudTeacher"
          align="center"
        >
          <template slot="header">
            <p style="position: relative; display: flex">
              解除限制
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">学员是否受到不购买云教练的缴费限制</div>
                <i
                  class="el-icon-question"
                  style="font-size: 18px; color: #f56c6c"
                ></i>
              </el-tooltip>
            </p>
          </template>
          <template slot-scope="scope">
            <div>
              {{ scope.row.noneNeedCloudTeacher == 1 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="备注" prop="remark" align="center">
          <template slot-scope="scope">
            <div>
              <overflow-text :text="scope.row.remark"></overflow-text>
            </div>
          </template>
        </el-table-column>
        <!-- {{ status }} -->
        <el-table-column
          label="操作"
          width="200px"
          align="center"
          v-if="
            status == 'PAY' ||
            status == 'APPLY' ||
            status == 'PROGRESS' ||
            status == 'PREPARE'
          "
        >
          <!--  v-show="
              status == 'PAY' || status == 'PROGRESS' || status == 'PREPARE' || status=='APPLY'
            " -->
          <template slot-scope="scope">
            <div>
              <auth :auths="'studentRegistration/batchUpdateSubject'">
                <el-button
                  type="text"
                  v-show="scope.row.paymentStatus != 2"
                  @click="resetSubject(scope.row)"
                  >修改专业</el-button
                >
              </auth>

              <!-- APPLY  status == "APPLY" || s-->
              <!-- <el-popover
                v-show="scope.row.remark"
                placement="top-start"
                title="备注"
                width="200"
                trigger="hover"
                :content="scope.row.remark"
              >
                <el-button type="text" slot="reference">备注</el-button>
              </el-popover> -->
              <!-- PAY -->
              <!-- &&  status == "PAY"-->
              <auth
                :auths="'studentRegistration/queryFeeDetail'"
                v-show="scope.row.paymentStatus == 2"
              >
                <el-button type="text" @click="lookdetail(scope.row)"
                  >查看</el-button
                >
              </auth>
              <auth
                :auths="'musicGroupQuit/apply2'"
                v-show="scope.row.paymentStatus == 2"
              >
                <el-button type="text" @click="quitTeam(scope.row)"
                  >退团</el-button
                >
              </auth>
              <!-- <auth
                :auths="'musicGroupQuit/directQuitMusicGroup3'"
                v-show="scope.row.paymentStatus == 2"
              >
                <el-button type="text" @click="quieTeams(scope.row)"
                  >退团</el-button
                >
              </auth> -->
              <auth
                :auths="'visit/add/teamSignupList'"
                v-if="scope.row.visitNum <= 0"
              >
                <el-button type="text" @click="addVisit(scope.row)"
                  >新增回访</el-button
                >
              </auth>
              <auth
                :auths="'subjectChange/getStudentOriginal'"
                v-show="scope.row.paymentStatus == 2"
                v-if="status != 'PROGRESS'"
              >
                <el-button type="text" @click="openChangeVoice(scope.row)"
                  >更改声部</el-button
                >
              </auth>
              <!--  -->
              <auth
                v-show="
                  scope.row.payingStatus == 2 &&
                  scope.row.noneNeedCloudTeacher == 0
                "
                :auths="'studentRegistration/setNoneCloudTeacher'"
              >
                <el-button type="text" @click="relieve(scope.row)"
                  >解除预约限制</el-button
                >
              </auth>
              <auth :auths="'studentRegistration/setCloudTeacherToFailed'">
                <el-button
                  type="text"
                  v-if="scope.row.payingStatus == 2"
                  @click="failedRelieve(scope.row)"
                  >拒绝审核</el-button
                >
              </auth>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        style="margin-top: 10px; margin-bottom: 10px"
        v-show="
          status == 'APPLY' || status == 'PROGRESS' || status == 'PREPARE'
        "
      >
        <el-button @click="onSelectAll">全选/取消</el-button>
        <auth :auths="'studentRegistration/openPayment'">
          <el-button
            style="background-color: #14928a; border: 1px solid #14928a"
            @click="onPartPayment"
            type="primary"
            >开启缴费</el-button
          >
        </auth>
        <!-- <div class='newBand' v-show="status=='APPLY'">允许缴费</div> -->
      </div>
      <pagination
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog title="修改专业" :visible.sync="subjectVisible" width="400px">
      <el-form :model="maskForm">
        <el-form-item label="选择专业">
          <el-select v-model.trim="maskForm.subject" filterable 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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="okReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="!isPay ? '延长报名' : '延长缴费'"
      :visible.sync="extendPaymentStatus"
      destroy-on-close
      width="400px"
    >
      <el-form :model="extendForm" ref="extendForm" :rules="extendRule">
        <el-form-item v-if="isPay" label="延长缴费时间" prop="expireDate">
          <el-date-picker
            v-model.trim="extendForm.expireDate"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="payDate()"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="延长报名时间" v-else prop="expireDate">
          <el-date-picker
            v-model.trim="extendForm.expireDate"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="applyDates"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="isPay"
          @click="onExtendPayment('extendForm', isPay)"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          @click="onExtendPayment('extendForm', isPay)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="订单详情" :visible.sync="orderVisible" width="800px">
      <template v-if="orderForm.length > 0">
        <descriptions :column="2">
          <template v-for="(item, index) in orderForm">
            <descriptions-item :key="index" :label="item.name"
              >{{ item.price | moneyFormat }}元</descriptions-item
            >
            <descriptions-item :key="index" label="缴费时间">{{
              item.createTime
            }}</descriptions-item>
          </template>
        </descriptions>
      </template>
      <el-row v-else>
        <el-col :span="24">
          <empty desc="暂无订单详情" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="开始缴费"
      :visible.sync="paymentStatus"
      width="400px"
      destroy-on-close
    >
      <el-form
        ref="paymentForm"
        class="paymentForm"
        :model="paymentForm"
        label-position="top"
        :rules="paymentRules"
      >
        <el-form-item label="请设置缴费截止日期" prop="paymentExpireDate">
          <el-date-picker
            v-model.trim="paymentForm.paymentExpireDate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="payDate()"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paymentStatus = false">取 消</el-button>
        <el-button type="primary" @click="onStartPayment('paymentForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 预报名链接 -->
    <qr-code v-model="codeStatus" :title="codeTitle" :codeUrl="qrCodeUrl" />

    <!-- 退团弹窗 -->
    <el-dialog
      title="退团信息确认"
      v-if="quitVisible"
      width="700px"
      :visible.sync="quitVisible"
    >
      <quiteTeam :quitForm="quitForm" :activeRow="activeRow" ref="quitForm" />
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-popover placement="right" width="500" trigger="click">
            <div class="popoverWrap">
              <p>乐团退团退费规则：</p>
              <p>退还乐器练习云教练费用：报名缴费时缴费的乐器练习云教练费用</p>
              <p>退还课程费用：缴费总额-已结束课时单价之和</p>
              <p>退还乐器费用：报名缴费时缴纳的乐器费用（团购、租金）</p>
              <p>退还教辅费用：报名缴费时缴费的教辅费用</p>
              <p>退还乐保费用：报名缴费时缴费的乐保费用</p>
              <p>退费金额暂不进入账户余额</p>
            </div>
            <el-button
              type="text"
              icon="el-icon-question"
              slot="reference"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div>
          <el-button @click="quitVisible = false">取 消</el-button>
          <el-button type="primary" @click="chioseType">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 回访记录 -->
    <el-dialog
      title="新增回访"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
      :visible.sync="visitVisiable"
    >
      <visit
        v-if="visitVisiable && detail"
        :detail="detail"
        @close="visitVisiable = false"
        @submited="getList"
      />
    </el-dialog>
    <el-dialog
      title="更改声部"
      :visible.sync="changeVoiceVisible"
      v-if="changeVoiceVisible"
      width="600px"
    >
      <changeVoice
        @close="closeChangeVoice"
        @submited="getList"
        :detail.sync="rowDetail"
        :courseViewType="courseViewType"
        :musicGroupId="id"
        :voiceList="leftList"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import qrCode from "@/components/QrCode/index";
import {
  getintoClass,
  getStudentList,
  findSound,
  musicGroupOpenPay,
  openPayment,
  musicGroupFound,
  extensionPayment,
  extensionApplyExpire,
  resetPlanNum,
  cancelMusicGroup,
  getTeamBaseInfo,
  studentApplyDetailExport,
  StudentQuit,
  getMusicGroupGradeList,
  checkCanReg,
  getRefundsDetail,
  applyMusicGroupQuit,
} from "@/api/buildTeam";
import { setNoneCloudTeacher, setCloudTeacherToFailed } from "./api";
import mergeMusic from "./components/merge-music";
import forecastList from "./components/forecast-list";
import newForecastList from "./components/newForecast-list";
import { resetStudentSubject, getStudentFeeDetail } from "@/api/studentManager";
import { vaildStudentUrl, vaildTeacherUrl } from "@/utils/validate";
import { addVisit } from "@/views/returnVisitManager/api.js";
import QRCode from "qrcodejs2";
import { visitChiose } from "@/utils/searchArray";
import axios from "axios";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import qs from "qs";
import { permission } from "@/utils/directivePage";
import cleanDeep from "clean-deep";
import changeVoice from "./modals/change-voice";
import visit from "@/views/withdrawal-application/modals/visit";
import quiteTeam from "@/views/teamDetail/components/modals/quite-team";
import { courseType } from "@/constant/index";
export default {
  name: "signupList",
  components: {
    pagination,
    qrCode,
    changeVoice,
    mergeMusic,
    forecastList,
    visit,
    newForecastList,
    quiteTeam,
  },
  data() {
    return {
      multipleSelection: [], //
      forecastVisible: false, // 预报名状态
      newForecastVisible: false,
      isEdit: false,
      rowDetail: null,
      mergeVisible: false,
      changeVoiceVisible: false,
      subjectVisible: false,
      orderVisible: false,
      quitVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: "",
        subject: "", // 专业
        isAllowAdjust: "", // 是否允许调剂
        currentGrade: null, // 入学年级
        paymentStatus: "",
        visited: "",
        hasCloudTeacher: null, // 是否购买云教练
        payingStatus: null,
        noneNeedCloudTeacher: null,
        studentStatus: null,
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        courseViewType: null,
        hasMaintenance: null,
        studentName: null,
        musicGroupName: null,
        isVisit: false,
        reason: "",
        userComment: null,
      },
      stepImgs: {
        APPLY: require("@/assets/images/base/clock.png"),
        PAY: require("@/assets/images/base/pay.png"),
      },
      status: "",
      id: "",
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40], // 选择限制显示条数
      },
      teamName: "",
      maskForm: {
        subject: "",
      },
      activeId: "",
      soundList: [],
      orderForm: [],
      paymentStatus: false,
      paymentForm: {
        paymentExpireDate: null,
        // feeType: null
      },
      paymentRules: {
        paymentExpireDate: [
          { required: true, message: "请设置缴费截止日期", trigger: "blur" },
        ],
      },
      paymentNum: 0, // 缴费了多少人
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      qrcodeStatus2: false, // 生成二维码
      qrcodes2: true,
      qrcode2: null,
      codeUrl2: null,
      codeStatus: false,
      codeTitle: null,
      qrCodeUrl: null,
      organId: "",
      extendPaymentStatus: false,
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" },
        ],
      },
      quitRules: {
        isCloudTeacherAmount: [{ required: true, message: "请输入云教练费用" }],
        cloudTeacherAmount: [
          { required: true, message: "请输入云教练金额", trigger: "blur" },
        ],
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用" },
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用" },
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用" },
        ],
        isMaintenanceFee: [{ required: true, message: "选择是否退还乐保费用" }],
        maintenanceFee: [{ required: true, message: "请输入退还乐保金额" }],
        reason: [{ required: true, message: "请填写退团退费原因" }],
      },
      applyExpireDate: "",
      paymentExpireDate: "",
      activeRow: { hasMaintenance: false },
      visitVisiable: false,
      visitForm: {
        musicGroupId: "",
        overview: "",
        purpose: "",
        studentId: "",
        type: "",
        visitTime: "",
        visitType: "",
        feedback: "",
        studentName: "",
      },

      visitChiose,
      visitRules: {
        overview: [{ required: true, message: "请输入学生近况" }],
        feedback: [{ required: true, message: "请输入家长反馈" }],
        visitTime: [{ required: true, message: "请输入回访时间" }],
        visitType: [{ required: true, message: "请选择回访类型" }],
      },
      isPay: false,
      applyDates: this.applyDate(),
      detail: null,
      gradeList: [],
      ischeckCanReg: false,
      courseViewType: null, // 乐团模式
      isManage: false,
      gradeListObj:{}
    };
  },
  created() {},
  mounted() {
    // 通过乐团状态判断显示隐藏的东西
    let isSuperAdmin = this.$store.getters.isSuperAdmin;
    let roles = this.$store.getters.roles;
    if (isSuperAdmin) {
      this.isManage = "super";
    } else {
      if (roles.indexOf(3) != -1) {
        this.isManage = "manage";
      } else {
        this.isManage = false;
      }
    }
    if (roles.indexOf(3) != -1 && roles.indexOf(4) != -1) {
      this.isManage = "super";
    }
    this.init();
  },
  activated() {
    this.init();
  },
  filters: {
    filtersPayingStatus(val) {
      let obj = {
        0: "--",
        1: "缴费中",
        2: "审核中",
      };
      return obj[val];
    },
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    async init() {
      this.status = this.$route.query.team_status;
      // 通过乐团id 获取乐团招生状态
      this.id = this.$route.query.id;
      this.teamName = this.$route.query.name;
      // 判断是否带缓存参数
      this.pickerOptions = this.beginDate(new Date());
      // checkCanReg
      try {
        this.ischeckCanReg = await (
          await checkCanReg({ musicGroupId: this.id })
        ).data;
      } catch (e) {
        console.log(e);
      }

      getMusicGroupGradeList({ musicGroupId: this.id }).then((res) => {
        let result = res.data;
        this.gradeListObj = res.data
        if (res.code == 200 && result) {
          for (let i in result) {
            this.gradeList.push({
              value: i,
              label: result[i],
            });
          }
        }
      });

      getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.organId = res.data.musicGroup.organId;
          this.courseViewType = res.data.musicGroup.courseViewType;
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
        }
      });

      // 根据乐团id获乐团声部
      findSound({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      });
      // 通过乐团id获取乐团学生列表
      this.getList();
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReset() {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null,
      };
      this.getList();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/teamList" });
    },
    payStart() {
      this.paymentStatus = true;
      getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
        }
      });
    },
    getList() {
      let obj = {
        musicGroupId: this.id,
        actualSubjectId: this.searchFrom.subject || null,
        isAllowAdjust: this.searchFrom.isAllowAdjust || null,
        name: this.searchFrom.name || null,
        currentGrade: this.searchFrom.currentGrade || null,
        paymentStatus: this.searchFrom.paymentStatus || null,
        visited: this.searchFrom.visited || null,
        hasCloudTeacher: this.searchFrom.hasCloudTeacher,
        payingStatus: this.searchFrom.payingStatus,
        studentStatus: this.searchFrom.studentStatus,
        noneNeedCloudTeacher: this.searchFrom.noneNeedCloudTeacher,
        page: this.rules.page,
        rows: this.rules.limit,
      };
      // 根据乐团id获取学团情况
      getintoClass({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.leftList = res.data;
        }
      });

      return getStudentList(obj).then((res) => {
        if (res.code == 200) {
          res.data.rows.forEach((item) => {
            // '未开启缴费', '开启缴费', '已缴费'
            if (item.paymentStatus == 2) {
              this.paymentNum += 1;
            }
          });
          this.rightList = res.data.rows;
          this.rules.total = res.data.total;
          return res;
        }
      });
    },
    onStartPayment(formName) {
      // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.id,
            expireDate: this.paymentForm.paymentExpireDate,
            // feeType: this.paymentForm.feeType
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("开启成功");
              this.paymentStatus = false;
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
              });
              this.status = "PAY";
              this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },
    onSelectAll() {
      // 选中全部
      this.$refs.multipleTable.toggleAllSelection();
    },
    onPartPayment() {
      // 部分缴费
      let selection = this.multipleSelection;
      if (selection.length <= 0) {
        this.$message.error("您还没有选择学生");
        return false;
      }
      let ids = [];
      selection.forEach((item) => {
        ids.push(item.id);
      });

      this.$confirm(`是否确认开启缴费?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          openPayment({
            ids: ids.join(","),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("开启成功");
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    onCreateQRCode(type) {
      // 生成报名二维码
      let id = this.id;
      this.codeStatus = true;
      if (type == "payment") {
        this.codeTitle = "学员报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id;
      } else if (type == "detail") {
        let teamName = this.$route.query.name;
        this.codeTitle = "报名缴费详情";
        this.qrCodeUrl =
          vaildTeacherUrl() +
          "/#/order?musicGroupId=" +
          id +
          "&musicGroupName=" +
          teamName;
      } else if (type == "rePayment") {
        this.codeTitle = "学生报名链接（无乐器）";
        this.qrCodeUrl =
          vaildStudentUrl() + "/#/login?musicGroupId=" + id + "&instrument=1";
      }
    },
    onCreateQRCode2() {
      // 生成报名二维码
      this.qrcodeStatus2 = true;
      let id = this.id;

      let teamName = this.$route.query.name;

      setTimeout(() => {
        document.getElementById("qrcode2").innerHTML = "";
        this.qrcode2 = new QRCode("qrcode2", {
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        this.qrcode2.makeCode(
          vaildTeacherUrl() +
            "/#/order?musicGroupId=" +
            id +
            "&musicGroupName=" +
            teamName
        );
        this.codeUrl2 =
          vaildTeacherUrl() +
          "/#/order?musicGroupId=" +
          id +
          "&musicGroupName=" +
          teamName;
      }, 500);
    },
    onDownLoadExecl() {
      // 报表导出
      let url = "/api-web/studentRegistration/queryStudentApplyDetailExport";
      let data = {
        musicGroupId: this.$route.query.id,
        page: 1,
        rows: 9999,
      };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(data),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate() +
                    "" +
                    nowTime.getHours() +
                    "" +
                    nowTime.getMinutes();
                  let fname = this.$route.query.id + "-" + ymd + ".xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    onGoHome() {
      // 确认开团
      // 判断是否有学生缴费
      if (this.paymentNum <= 0) {
        this.$message.error("当前缴费人数为0，无法开团");
        return;
      }
      this.$confirm(`是否确认开团?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          musicGroupFound({
            musicGroupId: this.$route.query.id,
          }).then((res) => {
            if (res.code == 200) {
              // let query = this.$route.query;
              // this.$message.success("开启成功");
              // this.$router.push({
              //   path: "/teamList",
              //   query: {
              //     ...query,
              //   },
              // });
              this.onCancel();
            }
          });
        })
        .catch(() => {});
    },
    onClose() {
      // 停止乐团
      this.$confirm("您确定停止乐团吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cancelMusicGroup({
            musicGroupId: this.$route.query.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("停止成功");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
              });
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改专业
    resetSubject(row) {
      this.activeId = row.studentId;
      this.maskForm.subject = row.actualSubjectId;
      this.subjectVisible = true;
      //   resetStudentSubject().then(res=>{]})
    },
    // 确认修改
    okReset() {
      if (!this.maskForm.subject) {
        this.$message.error("请选择调剂专业");
        return;
      }
      resetStudentSubject({
        musicGroupId: this.id,
        userId: this.activeId,
        subId: this.maskForm.subject,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.subjectVisible = false;
          this.maskForm.subject = "";
          getintoClass({ musicGroupId: this.id }).then((res) => {
            if (res.code == 200) {
              this.leftList = res.data;
            }
          });
          this.getList();
        }
      });
    },
    onExtendPayment(formName, isPay) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!isPay) {
            extensionApplyExpire({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长报名成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
                  if (res.code == 200) {
                    this.applyExpireDate = res.data.musicGroup.applyExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            extensionPayment({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长缴费成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
                  if (res.code == 200) {
                    this.paymentExpireDate =
                      res.data.musicGroup.paymentExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    async lookdetail(row) {
      await getStudentFeeDetail({
        musicGroupId: this.id,
        studentId: row.studentId,
      }).then((res) => {
        if (res.code == 200) {
          const paymentList = res.data || [];
          paymentList.forEach((item) => {
            if (item.type == "MAINTENANCE") {
              item.name = "乐器保养";
            } else if (item.type == "CLOUD_TEACHER" || item.type == "CLOUD_TEACHER_PLUS") {
              item.name = "乐器练习云教练";
            } else if (item.type == "COURSE") {
              item.name = "课程";
            }
            if (courseType[item.type]) {
              item.name = courseType[item.type];
            }
          });
          this.orderForm = paymentList;
        }
      });

      this.activeId = row.studentId;
      this.orderVisible = true;
    },
    saveIsEdit() {
      // 提交数据
      this.isEdit = false;
      resetPlanNum(this.leftList).then((res) => {});
    },
    async quitTeam(row) {
      try {
        const res = await getRefundsDetail({
          musicGroupId: this.$route.query.id,
          userId: row.studentId,
        });
        this.quitForm = {
          ...this.quitForm,
          ...res.data,
          courseViewType: this.courseViewType,
          studentName: row.studentName,
          musicGroupName: this.teamName,
          hasMaintenance: row.hasMaintenance,
        };

        this.activeRow = { ...row, ...res.data };

        this.activeRow.courseViewType = this.courseViewType;
        this.quitVisible = true;
        // this.quitForm.cloudTeacherAmount = row.cloudTeacherAmount;
      } catch (e) {
        console.log(e);
      }
      //  查询退团费用
    },
    // quieTeams(row) {
    //   this.$prompt("请输入退团原因", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     inputPattern: /\S/,
    //     inputErrorMessage: "请输入退团原因",
    //     type: "warning",
    //   })
    //     .then((val) => {
    //       // 发请求 退团
    //       StudentQuit({
    //         musicGroupId: this.id,
    //         userId: row.studentId,
    //         reason: val.value,
    //         isRefundCourseFee: false,
    //         isRefundInstrumentFee: false,
    //         isRefundTeachingAssistantsFee: false,
    //         isRefundMemberFee: false,
    //       }).then((res) => {
    //         this.quitForm = {
    //           // 退团信息确认
    //           isRefundCourseFee: null,
    //           isRefundInstrumentFee: null,
    //           isRefundTeachingAssistantsFee: null,
    //           isMaintenanceFee: null,
    //           cloudTeacherAmount: null,
    //           isCloudTeacherAmount: null,
    //           maintenanceFee: 0,
    //           reason: "",
    //         };
    //         if (res.code == 200) {
    //           this.$message.success("退团成功");
    //           this.getList();
    //           this.quitVisible = false;
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    chioseType() {
      this.$refs["quitForm"].$refs["quitForm"].validate((res) => {
        if (res) {
          this.$confirm("确定退团?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let row = this.activeRow;

              let params = {
                ...this.quitForm,
                musicGroupId: this.id,
                userId: row.studentId,
                reason: this.quitForm.reason,
                isRefundCourseFee: this.quitForm.isRefundCourseFee,
                isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
                isRefundTeachingAssistantsFee:
                  this.quitForm.isRefundTeachingAssistantsFee,
                maintenanceFee: this.quitForm.maintenanceFee,
                isRefundMemberFee: this.quitForm.isRefundMemberFee,
              };
              params.returnFeeDto = {
                accessoriesFee: params.accessoriesFee,
                courseFee: params.courseFee,
                isReturnAccessoriesFee: params.isReturnAccessoriesFee,
                isReturnCourseFee: params.isReturnCourseFee,
                isReturnMaintenanceFee: params.isReturnMaintenanceFee,
                isReturnMemberFee: params.isReturnMemberFee,
                isReturnMusicalFee: params.isReturnMusicalFee,
                maintenanceFee: params.maintenanceFee,
                memberFee: params.memberFee,
                musicalFee: params.musicalFee,
              };
              if (this.isManage) {
                params.status = "APPROVED";
              } else {
                params.status = "PROCESSING";
              }
              // 发请求 退团
              applyMusicGroupQuit(params).then((res) => {
                if (res.code == 200) {
                  this.quitForm = {
                    // 退团信息确认
                    isRefundCourseFee: null,
                    isRefundInstrumentFee: null,
                    isRefundTeachingAssistantsFee: null,
                    reason: "",
                    courseViewType: null,
                    hasMaintenance: null,
                    studentName: null,
                    musicGroupName: null,
                    isVisit: false,
                    reason: "",
                    userComment: null,
                  };
                  if(this.isManage == "super") {
                     this.$message.success("退团成功");
                  }else{
                     this.$message.success("退团申请成功");
                  }

                  this.getList();
                  this.quitVisible = false;
                }
              });
            })
            .catch(() => {});
        } else {
        }
      });

      // row.typeVisible = false;
    },
    addVisit(row) {
      // this.visitForm.studentName = row.studentName;
      // this.visitForm.musicGroupId = this.teamid;
      // this.visitForm.studentId = row.studentId;
      row.userId = row.studentId;
      this.detail = row;
      this.detail.musicGroupId = this.$route.query.id;
      this.visitVisiable = true;
    },
    openChangeVoice(row) {
      this.getList().then((res) => {
        for (const item of res.data.rows) {
          if (item.id === row.id) {
            this.rowDetail = { ...item, userId: item.studentId };
            this.changeVoiceVisible = true;
          }
        }
      });
    },
    closeChangeVoice() {
      this.changeVoiceVisible = false;
      // this.rowDetail = null
    },
    handleChange(val) {
      this.visitForm.type = val[0];
      this.visitForm.purpose = val[1];
    },
    submitAddVisit() {
      this.$refs.visitForm.validate((res) => {
        if (res) {
          this.visitForm.visitType = null;
          this.visitForm.musicGroupId = this.id;
          addVisit(cleanDeep(this.visitForm)).then((res) => {
            if (res.code === 200) {
              this.$message.success("新增成功");
              this.visitVisiable = false;
            }
          });
        }
      });
    },
    beginDate(date) {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() >= date.getTime(); //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },
    extendTime(isPay) {
      this.isPay = isPay;

      if (isPay) {
        // 点击的延长缴费
        this.extendForm.expireDate = this.paymentExpireDate;
      } else {
        // 点击的延长报名
        this.extendForm.expireDate = this.applyExpireDate;
      }
      this.extendPaymentStatus = true;
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        },
      };
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        },
      };
    },
    checkboxSelect(row) {
      return row.paymentStatus == 0;
    },
    relieve(row) {
      this.$confirm("操作后该学员即可不购买云教练缴费入团", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          const res = await setNoneCloudTeacher({ id: row.id });
          console.log("code", res.code);
          if (res.code == 200) {
            this.$message.success("解除预约成功");
            this.getList();
          } else if (res.code == 100) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(async (some) => {
              const res = await setNoneCloudTeacher({
                id: row.id,
                isContinue: true,
              });
              if (res.code == 200) {
                this.$message.success("解除预约成功");
                this.getList();
              }
            });
          }
        } catch (e) {
          console.log("错误", e);
        }
      });
    },
    failedRelieve(row) {
      this.$confirm("拒绝后学员需购买会员方可入团", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          const res = await setCloudTeacherToFailed({ id: row.id });
          this.$message.success("操作成功");
          this.getList();
        } catch (e) {
          console.log(e);
        }
      });
    },
    getCheckNum(row, type) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null,
      };
      this.searchFrom.subject = row.subjectId;
      if (type == "buyCloud") {
        this.searchFrom.hasCloudTeacher = 1;
      } else if (type == "noCloud") {
        this.searchFrom.hasCloudTeacher = 0;
        this.searchFrom.studentStatus = "NORMAL";
      } else {
        this.searchFrom.payingStatus = 2;
        this.searchFrom.hasCloudTeacher = 0;
      }
      this.search();
    },
    getpayingNum(row) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null,
      };
      this.searchFrom.subject = row.subjectId;
      this.searchFrom.payingStatus = 1;
      this.search();
    },
    getpayNum(row) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null,
      };
      this.searchFrom.subject = row.subjectId;
      this.searchFrom.paymentStatus = 2 + "";
      this.search();
    },
  },
  watch: {
    "quitForm.isMaintenanceFee"(val) {
      if (val) {
        this.quitForm.maintenanceFee = 300;
      } else {
        this.quitForm.maintenanceFee = 0;
      }
    },
    orderVisible(val) {
      if (!val) {
        this.orderForm = [];
      }
    },
    qrcodeStatus(val) {
      if (!val) {
        this.qrcode.clear();
      }
    },
    qrcodeStatus2(val) {
      if (!val) {
        this.qrcode2.clear();
      }
    },
    paymentStatus(val) {
      if (!val) {
        this.paymentForm = {
          paymentExpireDate: null,
          // feeType: null
        };
      }
    },
    quitVisible(val) {
      if (!val) {
        this.quitForm = {
          // 退团信息确认
          isRefundCourseFee: null,
          isRefundInstrumentFee: null,
          isRefundTeachingAssistantsFee: null,
          courseViewType: null,
          hasMaintenance: null,
          studentName: null,
          musicGroupName: null,
          isVisit: false,
          reason: "",
          userComment: null,
        };
        this.$refs["quitForm"].$refs["quitForm"].resetFields();
      }
    },

    // visitVisiable(val) {
    //   if (!val) {
    //     this.$refs["visitForm"].resetFields();
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
.courseYellow {
  color: #ff802c;
}
.hiddenwrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  p {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    font-weight: 700;
  }
}
.auth {
  display: inline-block;
  & + .auth {
    margin-left: 0px;
  }
}
.dialog-footer.question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sigup-container {
  margin-left: 12px;
  .topWrap {
    padding: 18px 58px 18px 0;
    // height: 136px;
    background-color: #fff;
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    .msg.pay {
      color: #f85043;
    }
    .msg {
      text-align: right;
      color: #f97215;
      font-size: 32px;
      font-weight: bold;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: 5px;
        margin-right: 8px;
      }
    }
    h2 {
      height: 48px;
      line-height: 48px;
      position: relative;
      // padding-left: 30px;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .term {
        height: 32px;
        line-height: 32px;
        border-radius: 24px;
        width: 100px;
        color: #14928a;
        border: 1px solid rgba(20, 146, 138, 1);
        font-size: 14px;
        text-align: center;
        margin-right: 12px;
        &:nth-child(1) {
          margin-left: 47px;
        }
      }
      .term.active {
        color: #fff;
        background-color: #14928a;
      }
      .squrt {
        position: absolute;
        left: -25px;
        top: 8px;
        height: 34px;
        width: 8px;
        background-color: #14928a;
      }
    }
    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      & > div {
        margin-right: 15px;
        margin-top: 10px;
      }
    }
    .newBand.close {
      background-color: #777;
      border: 1px solid #777;
    }
  }
  .searchList {
    background-color: #fff;
    padding: 0 58p 0 0px;
  }
  .sigup-core {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      width: 400px;
      background-color: #fff;
      height: 80vh;
      overflow: auto;
    }
    .right {
      width: calc(100% - 400px);
      margin-left: 12px;
      flex-grow: 1;
    }
  }
}
.el-dialog__body {
  overflow: hidden;
}
.left-code,
.right-code {
  // width: 50%;
  // float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}
.newBand {
  margin-bottom: 0;
  max-width: inherit;
}
/deep/.el-button--danger {
  background: #f85043;
}
.paymentForm {
  /deep/.el-input__inner,
  /deep/.el-input.el-input--suffix {
    width: 360px !important;
  }
}
.popoverWrap {
  p {
    line-height: 25px;
  }
}
/deep/.description-title {
  margin-bottom: 0;
}
/deep/.description-label {
  white-space: normal !important;
}
.left {
  text-align: left;
}
</style>