dy-admin-manager/src/views/teamBuild/components/teamBaseInfo.vue

<template>
  <div class="base-container">

    <div class="banseLeft">
      <div class="head">乐团基本信息：</div>
      <!-- <div class="num">乐团编号：dywh01</div> -->
      <el-form
        :model="topFrom"
        :inline="true"
        ref="topinfo"
        label-width="120px"
        style="margin-left: 11px"
      >
        <el-form-item
          label="所属分部"
          prop="section"
          :rules="[{ required: true, message: '所属分部不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.section"
            filterable
            :disabled="basdisabled"
            @change="changeSection"
            clearable
          >
            <el-option
              v-for="(item, index) in sectionList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="收费类型"
          prop="type"
          :rules="[{ required: true, message: '收费类型不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.type"
            filterable
            :disabled="basdisabled"
            clearable
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="收费模式"
          prop="courseViewType"
          :rules="[{ required: true, message: '收费模式不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.courseViewType"
            filterable
            :disabled="basdisabled"
            clearable
          >
            <el-option label="课程收费" :value="0"></el-option>
            <el-option label="系统收费" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="合作单位"
          prop="school"
          :rules="[{ required: true, message: '合作单位不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.school"
            :disabled="!topFrom.section || basdisabled"
            @change="chioseSchool"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in cooperationList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="教学地点"
          prop="address"
          :rules="[{ required: true, message: '教学地点不能为空' }]"
        >
          <template #label>
            <p style="position: relative; display: inline-block">
              教学地点
              <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>
          <el-select
            v-model.trim="topFrom.address"
            filterable
            clearable
            :disabled="!topFrom.section || basdisabled"
          >
            <el-option
              v-for="(item, index) in addList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团名称"
          prop="name"
          :rules="[{ required: true, message: '乐团名称不能为空' }]"
        >
          <el-input
            placeholder="请输入乐团名称"
            v-model.trim="topFrom.name"
            :disabled="basdisabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="运营主管"
          prop="boss"
          :rules="[{ required: true, message: '运营主管不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.boss"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="(item) in bossList"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团主管"
          prop="teacher"
          :rules="[{ required: true, message: '乐团主管不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.teacher"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in educationList"
              :key="index"
              :label="item.realName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修技师" prop="repairUserId">
          <el-select
            v-model.trim="topFrom.repairUserId"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in technician"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="预报名截止时间"
          prop="time"
          :rules="[{ required: true, message: '请输入预报名截止时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.time"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item
          label="报名截止时间"
          prop="time"
          :rules="[{ required: true, message: '请输入报名截止时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.time"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="预计开团时间"
          prop="startTime"
          :rules="[{ required: true, message: '请输入预计开团时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.startTime"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="招生年级" v-if="basdisabled">
          <el-input
            placeholder="请输入招生年级"
            v-model.trim="startClassString"
            :disabled="basdisabled"
          ></el-input> -->
          <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="startClassString"
            placement="top-start"
          >
            <div style="width: 180px; overflow: hidden">
              {{ startClassString }}
            </div>
          </el-tooltip> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item
          label="招生年级"
          v-else
          prop="startClass"
          :rules="[{ required: true, message: '请选择招生年纪' }]"
        >
          <el-select
            placeholder="起始年级"
            clearable
            multiple
            collapse-tags
            filterable
            v-model.trim="topFrom.startClass"
          >
            <el-option
              v-for="item in classStatus"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item
          label="课酬结算标准"
          :rules="[{ required: true, message: '请选择课酬结算标准' }]"
          prop="salary"
        >
          <el-select
            v-model.trim="topFrom.salary"
            clearable
            :disabled="basdisabled"
            filterable
          >
            <el-option label="默认课酬" value="TEACHER_DEFAULT"></el-option>
            <el-option label="3.0课酬" value="GRADIENT_SALARY"></el-option>
            <!-- <el-option label="课堂课酬" value="CLASSROOM_SALARY"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="机构类型" prop="ownershipType">
          <el-select
            v-model.trim="topFrom.ownershipType"
            :disabled="basdisabled"
          >
            <el-option label="自有" value="OWN"></el-option>
            <el-option label="三方" value="COOPERATION"></el-option>
            <!-- <el-option label="租赁"
            value="LEASE"></el-option>-->
          </el-select>
        </el-form-item>
        <!-- v-if="teamStatus == 'resetTeam' || teamStatus == 'teamList'" -->
        <el-form-item label="乐队指导" prop="head">
          <el-select
            v-model.trim="topFrom.head"
            filterable
            :disabled="!topFrom.section || basdisabled"
            clearable
          >
            <el-option
              v-for="(item, index) in teacherList"
              :key="index"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label prop="isClass">
          <el-checkbox v-model.trim="topFrom.isClass" :disabled="basdisabled"
            >课堂课乐团</el-checkbox
          >
        </el-form-item>
        <br />
        <el-form-item label="" v-if="teamStatus == 'teamDraft'">
          <p style="color: red; padding-left: 50px">
            修改【收费类型】会重置乐团声部与缴费信息
          </p>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <!-- <div
          class="nextBtn"
          v-if="teamStatus == 'resetTeam'"
          v-permission="{
            child: 'musicGroup/update',
            parent: '/resetTeaming/teamBaseInfo',
          }"
          @click="resetSubmit"
        >
          修改
        </div> -->
        <!-- 审批或者草稿的下一步 -->
        <div class="nextBtn" @click="gotoNext(1)" v-if="!basdisabled">保存</div>
        <!-- <div
          class="nextBtn"
          @click="
            () => {
                           this.$router.push({
        query: merge(this.$route.query, { tabrouter: 2 }),
      });
            }
          "
          v-if="teamStatus == 'teamCanceled'"
        >
          下一步
        </div> -->
      </div>
    </div>

  </div>
</template>
<script>
import {
  getType,
  getTeamBaseInfo,
  resetTeamBaseInfo,
  getEmployeeOrgan,
  getStudentList,
  musicGroupOpenPay,
  extensionPayment,
   extensionApplyExpire,
  findUserByRole,
  getTeacher
} from "@/api/buildTeam";
import { findTechnician } from "@/api/repairManager";
import dayjs from "dayjs";
import merge from "webpack-merge";
import {
  queryEmployByOrganId,
  queryByOrganId,
  getSchool,
} from "@/api/systemManage";
import qrCode from "@/components/QrCode/index";
import { classStatus } from "@/utils/searchArray";
import { vaildStudentUrl, vaildTeacherUrl } from "@/utils/validate";
import mergeMusic from "../components/merge-music";
export default {
  components: {
    mergeMusic,
    qrCode,
  },
  name: "teamBaseInfo",
  props: ["getTeamList"],
  data() {
    return {
      classStatus,
      organId: null,
      topFrom: {
        type: "", // 收费类型
        section: "", //所属分部
        courseViewType: "", // 收费模式
        school: "", // 合作单位
        teacher: "", // 乐团主管
        name: "", //乐团名称
        boss: "", // 运营主管
        time: "", // 报名截止时间
        startClass: [], // 招生年级起始
        address: "", // 教学地点
        salary: "", // 收费模式
        head: "",
        isClass: false, //是否为课堂课
        startTime: "",
        feeType: null,
        paymentPattern: "", // 缴费方式
        paymentValid: [], // 缴费有效期
        paymentValidStartDate: null, // 缴费有效期开始
        paymentValidEndDate: null, // 缴费有效期结束
        ownershipType: "OWN", // 合作机构类型
        repairUserId: null, // 维修技师
      },
      baseInfo: {},
      money: 580,
      orderInfo: {
        marketPrice: 0, // 原价总金额
        referencePrice: 0, // 现价总金额
      }, // 金额列表，金额计算
      sectionList: [], // 分部列表
      typeList: [], // 收费类型列表
      cooperationList: [], // 教学点列表
      teacherList: [], // 获取老师列表
      educationList:[], // 乐团主管
      bossList:[],
      addList: [], // 教学地点列表
      activeTeam: [],
      teamid: "",
      teamStatus: "",
      isInit: false,
      technician: [],
      basdisabled: false,
      // 整合报名中
      paymentExpireDate: "",
         applyExpireDate:null,
      mergeVisible: false,
      team_status: "",
      paymentNum: 0,
      paymentStatus: false,

      paymentForm: {
        paymentExpireDate: null,

        // feeType: null
      },
      paymentRules: {
        paymentExpireDate: [
          { required: true, message: "请设置缴费截止日期", trigger: "blur" },
        ],
      },
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" },
        ],
      },
      isPay: false,
      extendPaymentStatus: false, // 延长缴费
      codeStatus: false,
      qrCodeUrl: null,
      codeTitle: null,
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.id) {
      this.teamid = this.$route.query.id;
    }
    this.teamStatus = this.$route.query.type;
    this.team_status = this.$route.query.team_status;
    console.log(this.team_status);
    if (this.$route.query.type == "newTeam") {
      this.onReset();
    }

    this.init();
  },
  activated() {
    if (
      (this.teamid && this.teamid != this.$route.query.id) ||
      this.teamStatus != this.$route.query.type
    ) {
      this.init();
    }

    if (this.$route.query.clear == "true") {
      this.onReset();
    }
    if (this.teamStatus == "newTeam") {
      this.$store.dispatch("buildIndex", 0);
    }

    if (this.teamStatus != "newTeam") {
      this.$store.dispatch("draftIndex", 0);
    }
    this.teamStatus = this.$route.query.type;

    if (
      this.teamStatus == "look" ||
      this.teamStatus == "teamAudit" ||
      this.teamStatus == "feeAudit" ||
      this.teamStatus == "APPLY" ||
      this.teamStatus == "PAY"
    ) {
      this.basdisabled = true;
    } else {
      this.basdisabled = false;
    }
  },
  deactivated() {},
  beforeDestroy() {
    this.topFrom.paymentExpireDate = this.paymentExpireDate;
    console.log( this.topFrom.paymentExpireDate )
    sessionStorage.setItem(`${this.teamid}base`, JSON.stringify(this.topFrom));
  },

  methods: {
    //|| this.teamStatus === 'teamAudit'
    isNotEditing: function () {
      return !(
        this.teamStatus === "teamDraft" ||
        this.teamStatus === "newTeam" ||
        this.teamStatus === "teamList"
      );
    },
    changeFeeType(val) {},
    changePaymentValidStartDate(val) {
      if (val) {
        this.$set(this.topFrom, "paymentValidEndDate", "");
      }
    },
    changePaymentPattern(val) {
      // if (val === 2) {
      //   // this.topFrom.paymentValidStartDate = null
      //   this.$set(this.topFrom, 'paymentValidEndDate', '')
      // }
    },
    beginDate(end) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    init() {
      this.isInit = true;
      this.teamStatus = this.$route.query.type;
      if (this.teamStatus == "newTeam") {
        this.$store.dispatch("buildIndex", 0);
      }

      if (this.teamStatus != "newTeam") {
        this.$store.dispatch("draftIndex", 0);
      }
      // 传过来的乐团信息
      this.activeTeam = this.getTeamList;
      if (
        this.teamStatus == "look" ||
        this.teamStatus == "teamAudit" ||
        this.teamStatus == "feeAudit" ||
        this.teamStatus == "teamCanceled"
      ) {
        this.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
      if (this.$route.query.id) {
        // 单团修改
        this.teamid = this.$route.query.id;
        let sotrage = JSON.parse(
          sessionStorage.getItem(`${this.$route.query.id}base`)
        );
        if (!sotrage?.section) {
          getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
            if (res.code == 200) {
              // if (this.$listeners.getBaseInfo) {
              //   this.$listeners.getBaseInfo(res.data);
              // }

              // 头部
             this.setBase(res)
              // // 循环缴费月
              // this.payList.chioseMonth = res.data.months;
              if (res.data.musicGroup.organId) {
                // 获取员工
                 this.getBaseList(res.data.musicGroup.organId)
              }
              this.$emit("getBaseInfo", res.data);
            }
          });
        } else {
          this.topFrom = sotrage;
          this.applyExpireDate = sotrage.time
          this.paymentExpireDate = Storage.paymentExpireDate
          console.log( sotrage,this.applyExpireDate,this.paymentExpireDate)
          if (this.topFrom.section) {
            // 获取员工
             this.getBaseList(this.topFrom.section)
          }
        }
      }
      this.getStudentStatus();
      this.$emit("getName", this.topFrom.name);
      getEmployeeOrgan().then((res) => {
        if (res.code == 200) {
          this.sectionList = res.data;
        }
      });
      // 2.获取收费类型选项卡
      getType({ rows: 1000 }).then((res) => {
        if (res.code == 200) {
          this.typeList = res.data.rows;
        }
      });
      // 缓存设置时的状态
    },
    changeSection(val) {
      // 修改分部的时候 重置运营主管 重置乐团主管 重置乐队指导 合作单位  教学点
      this.topFrom.teacher = "";
      this.topFrom.boss = "";
      this.topFrom.head = "";
      this.topFrom.school = "";
      this.topFrom.address = "";
      // 发请求 根据分部id 查询所有员工
      this.getBaseList(val)
    },
    async getBaseList(val){
      // 合作单位
      queryByOrganId({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.cooperationList = res.data;
        }
      });
      // 教学点=>学校
      getSchool({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.addList = res.data;
        }
      });
      // 获取维修技师
      findTechnician().then((res) => {
        if (res.code == 200) {
          this.technician = res.data;
        }
      });
      // 获取乐团主管
      try {
        const ruselt = await findUserByRole({organId: val,employeeRole:'EDUCATION' })
        this.educationList = ruselt.data
      }catch(e){
        console.log(e)
      }
      // 获取运营主管
          try {
        const ruselt = await findUserByRole({organId: val,employeeRole:'TEAM_TEACHER' })
        this.bossList = ruselt.data
      }catch(e){
        console.log(e)
      }
      // 获取指导老师
      getTeacher({organId: val}).then(res=>{
        if(res.code == 200){
          this.teacherList = res.data
        }
      })
    },
    chioseSchool(val) {},
    gotoNext(num) {
      this.$refs["topinfo"].validate((valid, object) => {
        if (!valid) {
          this.$message.error("请填写建团必要参数");
        } else {
          // 判断一下是否勾选了课程类型而没有输入金额
          // 验证通过
          this.$store.dispatch("topinfo", this.topFrom);
          // if (this.teamStatus == "teamDraft") {
          //   // 获取数据提交
          // } else {
          //   // this.resetSubmit();
          //   console.log("来了");
          //   this.$router.push({
          //     query: merge(this.$route.query, { tabrouter: 2 }),
          //   });
          // }
          this.resetSubmit();
        }
      });
    },
    resetSubmit() {
      this.$refs["topinfo"].validate((valid, object) => {
        if (!valid) {
          this.$message.error("请填写必要参数");
        } else {
          let status = null;
          // 1.resetTeam 乐团修改
          // 2.newTeam 新建乐团
          // 3.teamList 跨团修改
          // 4.teamDraft 乐团草稿
          switch (this.teamStatus) {
            case "resetTeam": {
              status = "PROGRESS";
              break;
            }
            case "newTeam": {
              status = null;
              break;
            }
            case "teamList": {
              status = null;
              break;
            }
            case "teamDraft": {
              status = "DRAFT";
              break;
            }
          }
          let obj = {};
          // topFrom.ownershipType
          //  修改  合并对象
          obj.musicGroup = {
            settlementType: this.topFrom.salary,
            applyExpireDate: dayjs(this.topFrom.time).format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            chargeTypeId: this.topFrom.type,
            cooperationOrganId: this.topFrom.school,
            courseViewType: this.topFrom.courseViewType,
            teamTeacherId: this.topFrom.boss,
            educationalTeacherId: this.topFrom.teacher,
            enrollClasses: this.topFrom.startClass.join(","),
            name: this.topFrom.name,
            paymentPattern: this.topFrom.paymentPattern,
            paymentValidStartDate: this.topFrom.paymentValidStartDate
              ? dayjs(this.topFrom.paymentValidStartDate).format("YYYY-MM-DD")
              : this.topFrom.paymentValidStartDate,
            paymentValidEndDate: this.topFrom.paymentValidEndDate
              ? dayjs(this.topFrom.paymentValidEndDate).format("YYYY-MM-DD")
              : this.topFrom.paymentValidEndDate,
            organId: this.topFrom.section,
            // paymentMonths:obj.months  有待确认
            schoolId: this.topFrom.address,
            id: this.teamid,
            directorUserId: this.topFrom.head,
            isClassroomLessons: this.topFrom.isClass,
            status,
            expectStartGroupDate: this.topFrom.startTime,
            ownershipType: this.topFrom.ownershipType,
            repairUserId: this.topFrom.repairUserId || null,
            feeType: this.topFrom.feeType,
          };
          obj.musicGroupPaymentEntities = [];
          // 发请求
          resetTeamBaseInfo(obj).then((res) => {
            if (res.code == 200) {
              if (this.teamStatus == "teamDraft") {
                this.$message.success("保存成功");
                // 跳到第二页

                this.$emit("chiosetab", 1);
              } else {
                this.$message.success("修改乐团成功");
                // this.$router.push({ path: '/business/teamDetails', query: { id: this.teamid, name: this.topFrom.name } })
              }
              this.init();
            }
          });
        }
      });
    },
    changeApplyTime(val) {
      this.$set(this.topFrom, "paymentValidStartDate", "");
      this.$set(this.topFrom, "paymentValidEndDate", "");
      // this.topFrom.paymentValidStartDate = ''
      // this.topFrom.paymentValidEndDate = ''
    },
    onReset() {
      this.topFrom = {
        type: "", // 收费类型
        section: "", //所属分部
        school: "", // 合作单位
        courseViewType: "",
        teacher: "", // 乐团主管
        name: "", //乐团名称
        boss: "", // 运营主管
        time: "", // 报名截止时间
        startClass: [], // 招生年级起始
        paymentValid: [], // 缴费有效期时间起始
        address: "", // 教学地点
        salary: "", // 收费模式
        head: "",
        paymentPattern: "", // 缴费方式
        isClass: false, //是否为课堂课
        startTime: "",
        ownershipType: "OWN", // 合作机构类型
        feeType: null,
      };
      this.$refs["topinfo"].resetFields();
    },
    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: "/business/teamDetail",
              //   query: {
              //     ...query,
              //   },
              // });
              this.onCancel();
            }
          });
        })
        .catch(() => {});
    },
    payStart() {
      this.paymentStatus = true;
    },
    getStudentStatus() {
      let obj = {
        musicGroupId: this.teamid,
        page: 1,
        rows: 9999,
      };
      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;
        }
      });
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.applyExpireDate) {
            return (
              time.getTime() <=
              new Date(self.applyExpireDate.replace(/-/g, "/")).getTime()
            );
          } else {
            return false;
          }
        },
      };
    },
    onStartPayment(formName) {
      // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.teamid,
            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: "/business/teamDetail" });
              // this.$router.push({
              //   path: "/business/resetTeaming",
              //   query: {
              //     status: "PAY",
              //     id: this.$route.query.id,
              //     name: this.$route.query.name,
              //   },
              // });
              // this.team_status = "PAY";
              // this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              // this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.paymentExpireDate) {
            return (
              time.getTime() >
              new Date(self.paymentExpireDate.replace(/-/g, "/")).getTime()
            );
          } else {
            return false;
          }
        },
      };
    },
    extendTime(isPay) {
      this.isPay = isPay;

      if (isPay) {
        // 点击的延长缴费
        this.extendForm.expireDate = this.paymentExpireDate;
      } else {
        // 点击的延长报名
        this.extendForm.expireDate = this.applyExpireDate;
      }
      this.extendPaymentStatus = true;
    },
    onExtendPayment(formName, isPay) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!isPay) {
            extensionApplyExpire({
              musicGroupId: this.teamid,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长报名成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
                  if (res.code == 200) {
                    this.applyExpireDate = res.data.musicGroup.applyExpireDate;
                     this.setBase(res)
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            extensionPayment({
              musicGroupId: this.teamid,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长缴费成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
                  if (res.code == 200) {
                    this.paymentExpireDate =
                      res.data.musicGroup.paymentExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    onCreateQRCode(type) {
      // 生成报名二维码
      let id = this.teamid;
      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";
      }
    },
    gotoStudentList() {
      this.$router.push({
        query: merge(this.$route.query, { tabrouter: 7 }),
      });
      //  this.$router.replace({query:{...this.$route.query,tabrouter:7}})
    },
    setBase(res){
       this.topFrom.name = res.data.musicGroup.name;
              this.$emit("getName", this.topFrom.name);
              this.topFrom.time = res.data.musicGroup.applyExpireDate;
              this.topFrom.type = res.data.musicGroup.chargeTypeId;
              this.topFrom.startClass = res.data.musicGroup.enrollClasses.split(
                ","
              );
              this.topFrom.paymentPattern = res.data.musicGroup.paymentPattern;
              this.topFrom.paymentValidStartDate =
                res.data.musicGroup.paymentValidStartDate;
              this.topFrom.paymentValidEndDate =
                res.data.musicGroup.paymentValidEndDate;
              this.topFrom.section = res.data.musicGroup.organId;
              this.topFrom.courseViewType = res.data.musicGroup.courseViewType;
              this.topFrom.school = res.data.musicGroup.cooperationOrganId;
              this.topFrom.teacher = res.data.musicGroup.educationalTeacherId;
              this.topFrom.boss = res.data.musicGroup.teamTeacherId;
              this.topFrom.address = res.data.musicGroup.schoolId;
              this.topFrom.salary = res.data.musicGroup.settlementType;
              this.topFrom.head = res.data.musicGroup.directorUserId
                ? res.data.musicGroup.directorUserId
                : null;
              this.topFrom.isClass = res.data.musicGroup.isClassroomLessons;
              this.topFrom.startTime = res.data.musicGroup.expectStartGroupDate;
              this.topFrom.ownershipType = res.data.musicGroup.ownershipType;
              this.topFrom.repairUserId = res.data.musicGroup.repairUserId
                ? res.data.musicGroup.repairUserId
                : null;
              this.topFrom.feeType = res.data.musicGroup.feeType
                ? res.data.musicGroup.feeType
                : null;
              this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
              this.applyExpireDate = res.data.musicGroup.applyExpireDate;
    }
  },
  computed: {
    startClassString() {
      return this.topFrom.startClass
        .map((item) => {
          for (let i in this.classStatus) {
            if (item == this.classStatus[i].value) {
              return this.classStatus[i].label;
            }
          }
          // return  this.classStatus[item]
        })
        .join(",");
    },
    showNext() {
      const teamStatus = this.teamStatus;
      return (
        teamStatus == "newTeam" ||
        teamStatus == "teamDraft" ||
        teamStatus == "teamAudit" ||
        teamStatus == "feeAudit"
      );
    },
  },
};
</script>
<style lang="scss" >
.base-container {
  overflow: auto;
  // display: flex;
  // flex-direction: row;
  // justify-content: flex-start;
  // flex-wrap: nowrap;
  font-size: 14px;
  color: #444;
  // width: fill-available;
  .banseLeft {
    // width: 1050px;
    .head {
      height: 48px;
      line-height: 48px;
      background-color: #edeef0;
      font-size: 14px;
      font-weight: bold;
      color: #444;
      padding: 0 11px;
      margin-bottom: 20px;
    }
    .noMargin.head {
      margin-bottom: 0;
    }
    .num {
      padding: 15px 11px;
    }
    .checkRow {
      min-width: 1200px;
      padding-left: 28px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow: auto;

      .el-checkbox {
        line-height: 72px;
        width: 120px;
      }
      .inputWrap {
        line-height: 72px;
        font-size: 14px;
        color: #777;
        margin-left: 65px;
        input {
          // border: none;
          // width: 80px;
          // margin-right: 10px;
          // outline: none;
        }
      }
      .inputWrap.rightFirst {
        margin-left: 245px;
      }
      .textWrap {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
        color: #777;
        align-items: center;

        span {
          color: #f97215;
        }
      }
      .selectWrap {
        font-size: 14px;
        padding-top: 5px;
        margin-left: 100px;
        margin-right: 52px;
        .rowSelect {
          .el-input__inner {
            min-height: 69px;
          }
        }
      }

      .chioseList {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #777;
        margin-left: 64px;
        .chioseItem {
          width: 80px;
          height: 30px;
          border-radius: 15px;
          border: 1px solid #979797;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .chioseItem.active {
          background-color: #14928a;
          border: 1px solid #14928a;
          color: #fff;
        }
      }
      // &:nth-child(even) {
      //   background-color: #c6cbd4;
      //   input {
      //     background-color: #c6cbd4;
      //   }
      // }
    }
  }
  .btnWrap {
    margin-top: 30px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .subTitle {
    // width: 1203px;
    height: 40px;
    line-height: 40px;
    background-color: #fefceb;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
  }
  .chioseWrap {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 25px;
    p {
      width: 80px;
      font-size: 14px;
      // margin-right: 30px;
    }
  }

  .classCheckBox {
    margin-right: 10px;
  }
}
</style>
<style scoped lang="scss">


/deep/.el-date-editor {
  width: 180px !important;
}
/deep/.el-checkbox {
  margin-left: 15px !important;
}
/deep/.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 180px;
}
input[disabled] {
  background-color: #fff;
  border-color: #b3b3b3;
  color: #606266;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: rgb(19, 129, 122);
  border-color: rgb(19, 129, 122);
  // -webkit-box-shadow: -1px 0 0 0 rgb (19, 129, 122);
  box-shadow: -1px 0 0 rgb(19, 129, 122);
  color: #fff;
  outline: none;
}
/deep/.el-radio-button__inner {
  &:hover {
    color: rgb(19, 129, 122);
  }
  outline: none;
}
/deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>