mteacher/src/views/applyActive/components/theoryCourse.vue

<template>
    <div class="vipCourse">
        <div>
            <!-- <van-divider content-position="center"
                :style="{ padding: '0 16px', margin: '.05rem 0' }">课程信息</van-divider> -->
            <div class="vip-title">课程信息</div>
            <van-field
                label="课程声部"
                input-align="right"
                placeholder="请选择课程声部"
                v-model="formName.subjectListName"
                @click="onSelect('subjectList')"
                readonly
                is-link
            />
            <van-field
                label="课程形式"
                v-model="formName.vipGroupCategoryName"
                input-align="right"
                placeholder="请选择课程形式"
                @click="onSelect('vipGroupCategory')"
                readonly
                is-link
            />
            <van-cell
                class="courseStudent"
                title="上课学员"
                @click="onCheckStudent"
                readonly
                input-align="right"
                :is-link="checkboxSelectDataList.length > 0 ? false : true"
                :value="checkboxSelectDataList.length > 0 ? '重新选择' : '请选择上课学员'"
                :value-class="checkboxSelectDataList.length > 0 ? 'studentColor' : null"
            />
            <div
                v-if="checkboxSelectDataList.length > 0"
                style="
                    text-align: center;
                    line-height: 1.8;
                    padding: 0.05rem 0;
                    background: #fafbff;
                "
            >
                <p
                    style="color: #323233"
                    v-for="(item, index) in checkboxSelectDataList"
                    :key="index"
                >
                {{ item.username }} - {{ item.parentsPhone }}
                </p>
            </div>
            <!-- <van-divider content-position="center" :style="{ padding: '0 16px', margin: '.05rem 0' }">课时组成</van-divider> -->
            <div class="vip-title">课时组成</div>
            <van-field
                label="课时总数"
                input-align="right"
                placeholder="输选择课时总数"
                readonly value="10节" />
            <van-field
                label="课程时长"
                v-model="form.singleClassMinutes"
                input-align="right"
                placeholder="请选择课程时长"
                @click="onClickSingleClass"
                readonly
                is-link
            />
            <van-field
                @click="dataForm.status = true"
                v-model="form.courseStart"
                label="排课开始时间"
                :readonly="true"
                input-align="right"
                is-link
                placeholder="请选择"
            />

            <van-cell
                title-class="title-time"
                v-for="(item, index) in scheduleList"
                :key="index"
            >
                <template slot="title">
                    <span class="online">{{ item.type }}</span>
                    <span class="week">{{ item.weekStr }}</span>
                    <span class="timer">{{ item.startTime + "-" + item.endTime }}</span>
                </template>
                <template slot="default">
                    <van-button type="warning"
                    @click="onScheduleRemove(item)"
                    round size="small" plain
                    >删除</van-button>
                </template>
            </van-cell>
            <div class="add-plan van-cell" @click="onCourseSchedule">
                <van-icon name="add-o" />课时安排
            </div>
            <van-field
                label="排课列表"
                v-if="scheduleList.length > 0"
                readonly
                input-align="right"
                @click="onShowTimeTable"
                is-link
            />

             <div style="margin: 16px;">
                <van-button round block type="info" @click="onSubmit">确认排课</van-button>
            </div>
        </div>
        <!-- 每课时长 -->
        <van-action-sheet
            v-model="statusList.classTimerStatus"
            :actions="loadData.classTimer"
            cancel-text="取消"
            @cancel="statusList.classTimerStatus = false"
            @select="onClassTimerSelect"
        />
        <!-- 课时安排 -->
        <van-popup v-model="dataForm.status" position="bottom">
            <van-datetime-picker
                v-model="dataForm.currentDate"
                type="date"
                :min-date="dataForm.minDate"
                :formatter="formatter"
                @cancel="dataForm.status = false"
                @confirm="onCurrentConfirm"
            />
        </van-popup>
        <!-- 课程信息所用 :close-on-click-overlay="false"  -->
        <van-popup v-model="sheetForm.sheetStatus" position="bottom">
            <van-picker
                :loading="sheetForm.loading"
                :default-index="sheetForm.index"
                :columns="sheetForm.columns"
                show-toolbar
                @cancel="sheetForm.sheetStatus = false"
                @confirm="onSheetConfirm"
            />
        </van-popup>
        <!-- 课时安排 -->
        <van-popup v-model="courseForm.teachingStatus" position="bottom">
            <van-picker
                :columns="courseForm.columns"
                show-toolbar
                @cancel="courseForm.teachingStatus = false"
                @confirm="onTeachinConfirm"
            />
        </van-popup>
        <!-- 选择上课学生 -->
        <van-popup
            v-model="statusList.studentStatus"
            :lock-scroll="true"
            position="bottom"
            :style="{ height: '180%' }"
            class="studentChiose"
        >
            <div v-if="statusList.studentStatus">
                <van-sticky>
                    <van-search
                        show-action
                        shape="round"
                        @search="onSearch"
                        v-model="params.search"
                        placeholder="请输入学生名或手机号"
                    >
                        <template #action>
                        <div @click="onSearch">搜索</div>
                        </template>
                    </van-search>
                </van-sticky>
                <div class="paddingB80">
                    <van-list
                        v-model="loading"
                        class="studentContainer"
                        v-if="dataShow"
                        key="data"
                        :finished="finished"
                        finished-text=""
                        @load="getStudent"
                    >
                        <van-checkbox-group v-model="checkboxSelect">
                        <van-cell-group>
                            <van-cell
                            v-for="(item, index) in dataList"
                            :key="index"
                            @click="onCheckboxSelect(item)"
                            class="input-cell"
                            :center="true"
                            >
                            <template slot="icon">
                                <img class="logo" v-if="item.avatar" :src="item.avatar" alt="" />
                                <img class="logo" v-else src="@/assets/images/icon_student.png" alt="" />
                            </template>
                            <template slot="title">
                                {{ item.username }}
                            </template>
                            <template slot="label">
                                <span>{{ desensitPhone(item.parentsPhone) }}</span>
                            </template>
                            <template slot="default">
                                <van-checkbox :name="item.userId.toString()"></van-checkbox>
                            </template>
                            </van-cell>
                        </van-cell-group>
                        </van-checkbox-group>
                    </van-list>
                    <m-empty class="empty" msg="暂无学生" v-else key="data" />
                </div>
                <div class="button-group-popup">
                    <span class="btn" @click="onPopupCancel">取消</span>
                    <span class="btn primary" @click="onPopupSubmit">确定</span>
                </div>
            </div>
        </van-popup>

        <!-- 课表展示 -->
        <van-popup v-model="statusList.classTime" position="bottom">
            <van-row>
                <van-col span="12">上课类型</van-col>
                <van-col span="12">上课时间</van-col>
            </van-row>
            <div class="tableContainer">
                <van-row v-for="(item, index) in timeTable" :key="index">
                <van-col span="12">
                    {{ item.teachMode == "ONLINE" ? "线上" : "线下" }}
                </van-col>
                <van-col span="12">
                    {{ item.classDate }} {{ item.startClassTimeStr }}
                </van-col>
                </van-row>
            </div>
        </van-popup>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import setLoading from "@/utils/loading";
import { browser } from "@/common/common";
import {
    findSubSubjects,
    vipGroupCategory,
} from "@/api/teacher";
import { getStudents, createActivityVipGroup } from "../api";
import cleanDeep from 'clean-deep'
import MEmpty from "@/components/MEmpty";
let minutes = []; // 分钟数
for (let i = 0; i < 60; i++) {
  let mi = i < 10 ? "0" + i : i;
  minutes.push(mi + "分");
}
export default {
    name: 'apply',
    components: {
        MEmpty,
    },
    data() {
        return {
            subjectId: null,
            selectTeacher: {
                status: false
            },
            dataForm: {
                // 时间下拉框
                status: false,
                minDate: new Date(),
                currentDate: new Date(),
            },
            statusList: {
                classTimerStatus: false,
                studentStatus: false, // 上课学生状态
                classTime: false,
            },
            form: {
                vipGroupCategoryId: null,
                courseStart: null,
                studentNum: null,
                onlineClassesUnitPrice: null,
                offlineClassesUnitPrice: null,
                singleClassMinutes: null,
                onlineClassesNum: 10,
                offlineClassesNum: 0,
                subjectIdList: null,
                vipGroupActivityId: null
            },
            formName: {
                vipGroupCategoryName: null,
                vipGroupCategoryIndex: 0,
                subjectListName: null,
                subjectListIndex: 0, // 声部名称
            },
            courseForm: {
                // 排课弹窗
                teachingStatus: false, // 课时安排状态
                columns: [
                {
                    // 课程选项 , "线下"
                    values: ["线上"],
                    className: "type",
                },
                {
                    values: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    className: "week",
                },
                {
                    values: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                    className: "hours",
                    defaultIndex: 7,
                },
                {
                    values: minutes,
                    className: "minutes",
                }],
            },
            loadData: {
                // 下拉加载数据
                subjectList: [],
                vipGroupCategory: [], // 课程形式
                vipGroupCategorySelect: [], // 选中的课程形式JSON
                classTimer: [],
            },
            sheetForm: {
                // 上拉弹窗
                currentType: null, // 当前选择的类型
                sheetStatus: false,
                loading: true, // 加载数据
                index: 0, // 选中的索引值
                columns: [],
            },
            timeTable: [], // 生成的课表
            scheduleList: [],
            checkboxSelect: [],
            checkboxSelectIds: [],
            checkboxSelectList: [], //选中学生列表
            checkboxSelectDataList: [],
            loading: false,
            finished: false,
            params: {
                search: null,
                page: 1,
                rows: 20,
            },
            dataShow: true, // 是否有数据
            dataList: [],
        }
    },
    mounted() {
    },
    watch: {
        'form.singleClassMinutes'() {
        this.scheduleList = []
        }
    },
    methods: {
        async onSubmit() {
            let form = this.form;
            if (!form.subjectIdList) {
                this.$toast("请选课程声部");
                return false;
            }
            if (!form.vipGroupCategoryId) {
                this.$toast("请选择课程形式");
                return false;
            }
            if (this.checkboxSelectIds.length <= 0) {
                this.$toast("请选择上课学生");
                return;
            }

            if (this.scheduleList.length <= 0) {
                this.$toast("课时安排不能为空");
                return false;
            }

            if (!this.checkCourseList()) {
                return;
            }
            // 排课
            this.setTimeTable();
            form.studentIdList = this.checkboxSelectIds.join(",");
            form.firstStudentId = this.checkboxSelectDataList.length > 0 ? this.checkboxSelectDataList[0].userId : null;
            let params = {
                courseSchedules: this.timeTable,
                vipGroupApplyBaseInfo: {
                    ...form,
                    userId: this.teacherId,
                    activityCourseType: 'music_theory',
                },
            };
            setLoading(true);
            await createActivityVipGroup(params)
                .then((res) => {
                    let result = res.data;
                    setLoading(false);
                    if (result.code == 200) {
                        this.$toast("申请成功");
                        setTimeout(() => {
                            this.onSubmitStatus = true;
                            if (browser().iPhone) {
                                window.webkit.messageHandlers.DAYA.postMessage(
                                JSON.stringify({
                                    api: "back",
                                })
                                );
                            } else if (browser().android) {
                                DAYA.postMessage(
                                JSON.stringify({
                                    api: "back",
                                })
                                );
                            } else {
                                this.$router.push("/business");
                            }
                        }, 500);
                    } else {
                        this.$toast(result.msg);
                    }
                })
                .catch(() => {
                    setLoading(false);
                });
        },
        onCourseSchedule() {
            // 课时安排
            if (!this.form.singleClassMinutes) {
                this.$toast("请选课程时长");
                return;
            }
            if (!this.form.courseStart) {
                this.$toast("请选择排课开始时间");
                return;
            }
            this.courseForm.teachingStatus = true;
        },
        onScheduleRemove(item) { // 删除课程安排
            let index = this.scheduleList.indexOf(item)
            if (index !== -1) {
                this.scheduleList.splice(index, 1)
            }
        },
        setTimeTable() {
            if (!this.checkCourseList(false)) {
                return;
            }
            // return
            // 重置排课列表
            this.timeTable = [];

            let form = this.form,
                scheduleList = this.scheduleList;

            // if(!form.courseStart) {
            //     this.$toast('请选择排课开始时间')
            //     return
            // }
            // 拿到线上课数与线下课数 以及
            let online = 10;
            let offline = 0;

            // 判断是否有课程安排
            if (scheduleList.length <= 0) {
                return;
            }
            let totalCount = Number(online) + Number(offline);
            let tempCourseStart = form.courseStart.replace(/-/gi, "/");
            let dateOperation = new Date(tempCourseStart);
            let forMark = 0;
            while (totalCount && totalCount > 0) {
                for (let i = 0; i < scheduleList.length; i++) {
                    // console.log(totalCount, scheduleList)
                    if (online == 0 && offline == 0) break;
                    let num = scheduleList[i].weekIndex - dateOperation.getDay();
                    // 如果是同一天一个周期会出现排课都排到一天
                    if (forMark > 0 && num == 0 && i == 0) {
                        num = num + 7;
                    }
                    if (num < 0) {
                        // 如果为负数则为下周
                        num = num + 7;
                    }
                    let dataStr = this.getThinkDate(dateOperation, num);

                    // 判断是否大于当前时间
                    let nowGetTime = new Date().getTime();
                    let courseTime = new Date(
                        dataStr.replace(/-/gi, "/") +
                        " " +
                        scheduleList[i].startTime +
                        ":00"
                    ).getTime();
                    if (nowGetTime < courseTime) {
                        let tempArr = {
                            classDate: dataStr,
                            startClassTimeStr: scheduleList[i].startTime,
                            endClassTimeStr: scheduleList[i].endTime,
                        };
                        // console.log(scheduleList[i].type, online, offline)
                        if (scheduleList[i].type == "线上" && online > 0) {
                            tempArr.teachMode = "ONLINE";
                            this.timeTable.push(tempArr);
                            online--;

                            totalCount--;
                        } else if (scheduleList[i].type == "线下" && offline > 0) {
                            tempArr.teachMode = "OFFLINE";
                            this.timeTable.push(tempArr);
                            offline--;

                            totalCount--;
                        }
                    }
                }
                // 加一周
                if (scheduleList.length == 1) {
                    dateOperation.setDate(dateOperation.getDate() + 7);
                } else if (
                    scheduleList.every((item) => item.weekStr === scheduleList[0].weekStr)
                ) {
                    // 标记循环次数(标记判断课程安排是不是同一天)
                    forMark++;
                }
            }

            this.timeTable.sort((a, b) => {
                let aStr = dayjs(
                dayjs(a.classDate).format("YYYY-MM-DD") +
                    " " +
                    a.startClassTimeStr +
                    ":00"
                ).valueOf();
                let bStr = dayjs(
                dayjs(b.classDate).format("YYYY-MM-DD") +
                    " " +
                    b.startClassTimeStr +
                    ":00"
                ).valueOf();
                return aStr - bStr;
            });
        },
        onClickSingleClass() {
            if (!this.formName.vipGroupCategoryName) {
                this.$toast("请选择课程形式");
                return;
            }
            this.statusList.classTimerStatus = true;
        },
        onCheckStudent() {
            if(!this.form.subjectIdList) {
                this.$toast('请选择课程声部')
                return
            }
            this.statusList.studentStatus = true;
        },
        onShowTimeTable() {
            // 显示排课列表
            if (!this.checkCourseList()) {
                return;
            }
            this.statusList.classTime = true;
            this.setTimeTable();
        },
        getThinkDate(date, num) {
            let Stamp = date;
            Stamp.setDate(date.getDate() + num); // 获取当前月数的第几天
            var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
            var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var mvar = "";
            if (month < 10) {
                mvar = "0" + month;
            } else {
                mvar = month + "";
            }
            var day = Stamp.getDate();
            var dvar = "";
            if (day < 10) {
                dvar = "0" + day;
            } else {
                dvar = day + "";
            }
            return year + "-" + mvar + "-" + dvar;
        },
        onTeachinConfirm(value) {
            // 添加课程
            let scheduleList = this.scheduleList;
            let startTime =
                (value[2] >= 10 ? value[2] : "0" + value[2]) +
                ":" +
                value[3].split("分")[0];
            let endTime = this.MinutesTest(
                value[2],
                value[3],
                this.form.singleClassMinutes
            );

            let isAdd = true;
            scheduleList.forEach((item) => {
                let isStartTime = this.timeIsrange(startTime, endTime, item.startTime);
                let isEndTime = this.timeIsrange(startTime, endTime, item.endTime);
                if (isAdd) {
                //
                if (value[1] == item.weekStr) {
                    if (isStartTime || isEndTime) {
                    isAdd = false;
                    } else {
                    isAdd = true;
                    }
                } else if (value[1] != item.weekStr) {
                    isAdd = true;
                }
                }
            });
            // 判断结束时间
            const endTime1 = endTime ? Number(endTime.split(":")[0]) : 0
            const endTime2 = endTime ? Number(endTime.split(":")[1]) : 0
            if(endTime1 >= 21 && endTime2 > 0) {
                this.$toast("课程安排结束时间不可超过21:00");
                return;
            }

            if (isAdd) {
                // 判断时间范围是否有重复
                scheduleList.push({
                type: value[0], // 线上还是线下
                weekStr: value[1],
                weekIndex: this.getWeek(value[1]),
                startTime: startTime,
                endTime: endTime,
                id: Date.now(),
                });

                this.courseForm.teachingStatus = false;

                this.setTimeTable();
            } else {
                this.$toast("该时间段已排课请重选时间");
                return;
            }
        },
        checkCourseList(isShowToast = true) {
            let scheduleList = this.scheduleList || [];
            let hasOnLine = false; // 是否有线上课时安排
            scheduleList.forEach((item) => {
                if (item.type == "线上") {
                    hasOnLine = true;
                }
            });
            if (!hasOnLine) {
                if (isShowToast) {
                    this.$toast("课时安排缺少线上课类型");
                }
                return false;
            }
            return true;
        },
        // 分钟小时相加减
        MinutesTest(houer, mins, interval) {
            let min = mins.split("分")[0];
            let sdate1 = new Date(1900, 1, 1, houer, min);
            sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
            let H = sdate1.getHours();
            let M = sdate1.getMinutes();
            if (H < 10) H = "0" + H;
            if (M < 10) M = "0" + M;
            return H + ":" + M;
        },
        // 判断时间是否在时间段内
        timeIsrange(beginTime, endTime, nowTime) {
            var strb = beginTime.split(":");
            if (strb.length != 2) {
                return false;
            }
            var stre = endTime.split(":");
            if (stre.length != 2) {
                return false;
            }
            var strn = nowTime.split(":");
            if (stre.length != 2) {
                return false;
            }
            var b = new Date();
            var e = new Date();
            var n = new Date();
            b.setHours(strb[0]);
            b.setMinutes(strb[1]);
            e.setHours(stre[0]);
            e.setMinutes(stre[1]);
            n.setHours(strn[0]);
            n.setMinutes(strn[1]);

            if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
                // 在时间范围内
                return true;
            } else {
                // 不在时间范围内
                return false;
            }
        },
        getWeek(str) {
            // 获取周几索引值
            let template = {
                '周一': 1,
                '周二': 2,
                '周三': 3,
                '周四': 4,
                '周五': 5,
                '周六': 6,
                '周日': 0,
            };
            return template[str];
        },
        // 搜索
        onSearch() {
            this.params.page = 1;
            this.dataList = [];
            this.dataShow = true;
            this.loading = true;
            this.finished = false;
            this.getStudent();
        },
        async getStudent() {
            let params = this.params;
            await getStudents(cleanDeep({
                ...params,
                activityCourseType: 'music_theory'
                // subjectId:this.form.subjectIdList
            })).then((res) => {
                let result = res.data;
                this.loading = false;
                if (result.code == 200) {
                    if(this.dataList.length > 0 && result.data.pageNo == 1) {
                        return
                    }
                    params.page = result.data.pageNo;
                    this.dataList = this.dataList.concat(result.data.rows);
                    if (params.page >= result.data.totalPage) {
                        this.finished = true;
                    }
                    this.params.page++;
                } else {
                    this.finished = true;
                }
                // 判断是否有数据
                if (this.dataList.length <= 0) {
                    this.dataShow = false;
                }
            });
        },
        onPopupCancel() {
            // 关闭弹窗
            this.statusList.studentStatus = false;
            // this.params.search = null
            this.checkboxSelect = [];
            this.checkboxSelectList = [];
        },
        onPopupSubmit() {
            const vipGroupCategorySelect = this.loadData.vipGroupCategorySelect;
            let len = this.checkboxSelect.length
            if(len < 1 || len > vipGroupCategorySelect.studentNum) {
                this.$toast(`请选择学生1~${vipGroupCategorySelect.studentNum}名，当前选择${len}名`)
                return
            }

            this.checkboxSelectDataList = JSON.parse(
                JSON.stringify(this.checkboxSelectList)
            );
            this.checkboxSelectIds = JSON.parse(JSON.stringify(this.checkboxSelect));
            this.checkboxSelect = [];
            this.checkboxSelectList = [];

            this.statusList.studentStatus = false;
        },
        onCheckboxSelect(value) {
            if (this.checkboxSelect.includes(value.userId.toString())) {
                this.checkboxSelect.forEach((item, index) => {
                if (item == value.userId.toString()) {
                    this.checkboxSelect.splice(index, 1);
                }
                });
                this.checkboxSelectList.forEach((item, index) => {
                if (item.userId == value.userId) {
                    this.checkboxSelectList.splice(index, 1);
                }
                });
            } else {
                this.checkboxSelect.push(value.userId.toString());
                this.checkboxSelectList.push(value);
            }
        },
        onSelect(name) {
            let sheetForm = this.sheetForm;
            sheetForm.columns = [];
            sheetForm.sheetStatus = true;
            sheetForm.loading = true;
            sheetForm.currentType = name;
            sheetForm.index = 0;
            let arr = this.loadData[name];
            if (arr && arr.length > 0) {
                sheetForm.columns = arr;
                sheetForm.index = this.formName[name + "Index"];
                sheetForm.loading = false;
            } else {
                this.onLoadingData(name);
            }
            this.sheetForm.status = true;
        },
        async onLoadingData() {
            // 加载数据
            let sheetForm = this.sheetForm;
            if (sheetForm.currentType == "subjectList") {
                // 请求声部
                await findSubSubjects().then((res) => {
                    let result = res.data;
                    if (result.code == 200 && result.data.length > 0) {
                        let tempArr = [];
                        result.data.forEach((item) => {
                            item.value = item.id;
                            item.text = item.name;
                            tempArr.push(item);
                        });
                        this.loadData.subjectList = tempArr;
                        sheetForm.columns = tempArr;
                        sheetForm.loading = false;
                    } else {
                        this.$toast("暂无科目列表");
                        sheetForm.loading = false;
                    }
                });
            } else if (sheetForm.currentType == "vipGroupCategory") {
                // 课程形式
                vipGroupCategory({ includeMusicTheory: 1 }).then((res) => {
                let result = res.data;
                if (result.code == 200 && result.data.length > 0) {
                    let tempArr = [];
                    result.data.forEach((item) => {
                    if (item.musicTheory) {
                        item.value = item.id;
                        item.text = item.name;
                        tempArr.push(item);
                    }
                    });
                    if(!tempArr || tempArr.length <= 0) {
                        this.$toast("暂无课程形式");
                    }
                    this.loadData.vipGroupCategory = tempArr;
                    sheetForm.columns = tempArr;
                    sheetForm.loading = false;
                } else {
                    this.$toast("暂无课程形式");
                    sheetForm.loading = false;
                }
                });
            }
        },
        onClassTimerSelect(value) {
            // 每课时长设置
            if(this.form.singleClassMinutes != value.value) {
                this.timeTable = [] // 生成的课表
                this.scheduleList = []
            }
            this.form.singleClassMinutes = value.value;
            this.statusList.classTimerStatus = false;
        },
        onSheetConfirm(value, index) {
            // 上拉弹窗
            let sheetForm = this.sheetForm,
                form = this.form,
                formName = this.formName,
                loadData = this.loadData;
            if (sheetForm.currentType == "subjectList") {
                // 科目名称赋值
                form.subjectIdList = value.value;
                formName.subjectListName = value.text;
                formName.subjectListIndex = index;
                loadData.subjectListSelect = value;

                // 重置上课学生
                this.dataList = []
                this.params.search = null
                this.loading = false
                this.finished = false
                this.dataShow = true
                this.params.page = 1
                this.checkboxSelect = [];
                this.checkboxSelectIds = [];
                this.checkboxSelectList = []; //选中学生列表
                this.checkboxSelectDataList = [];
            } else if(sheetForm.currentType == "vipGroupCategory") {
                form.vipGroupCategoryId = value.value;
                formName.vipGroupCategoryName = value.text;

                formName.vipGroupCategoryIndex = index;
                loadData.vipGroupCategorySelect = value;
                form.studentNum = value.studentNum; // 每班人数
                // form.singleClassMinutes = value.singleClassMinutes // 每课时长
                form.onlineClassesUnitPrice = Math.ceil(value.onlineClassesUnitPrice);
                form.offlineClassesUnitPrice = Math.ceil(value.offlineClassesUnitPrice);

                // 每课时长赋值
                form.singleClassMinutes = null;
                loadData.classTimer = [];
                let tempSingle = value.singleClassMinutes.split(",");
                form.singleClassMinutes = tempSingle.length > 0 ? tempSingle[0] : null
                tempSingle.forEach((item) => {
                    this.loadData.classTimer.push({
                        name: item,
                        value: item,
                    });
                });

                this.scheduleList = []
                this.timeTable = []
            }
            sheetForm.sheetStatus = false;
        },
        onCurrentConfirm(value) {
            // 排课开始时间
            let selectDate = new Date(value);
            let tempMonth =
                selectDate.getMonth() + 1 >= 10
                ? selectDate.getMonth() + 1
                : "0" + (selectDate.getMonth() + 1);
            let tempDay =
                selectDate.getDate() >= 10
                ? selectDate.getDate()
                : "0" + selectDate.getDate();
            this.form.courseStart =
                selectDate.getFullYear() + "-" + tempMonth + "-" + tempDay;
            this.dataForm.status = false;
        },
        formatter(type, val) {
            if (type === "year") {
                return `${val}年`;
            } else if (type === "month") {
                return `${val}月`;
            } else if (type == "day") {
                return `${val}日`;
            }
            return val;
        },
        desensitPhone(phone) {
            // 手机号脱敏
            let first = phone.substr(0, 3);
            let last = phone.substr(-4);
            return first + "****" + last;
        },
    }
}
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentColor {
    color: @mColor !important;
}
.studentContainer {
    /deep/.van-cell__title {
        font-size: 0.16rem;
        color: @mFontColor;
        flex: 1 auto;
    }

    .logo {
        width: 0.35rem;
        height: 0.35rem;
        margin-right: 0.12rem;
        border-radius: 100%;
    }

    .input-cell {
        padding: 0.12rem 0.16rem 0.2rem;

        .van-checkbox {
            justify-content: flex-end;
        }
    }

    /deep/.van-cell__value {
        height: 0.2rem;
    }

    /deep/.van-checkbox__icon .van-icon {
        border-color: @sFontColor;
    }

    /deep/.van-checkbox__icon--checked .van-icon {
        border-color: #01C1B5;
    }

    .van-tag {
        margin-left: 0.08rem;
    }
}
.button-group-popup {
    position: fixed;
    bottom: 0;
    padding: 0.2rem 0;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    .btn {
        padding: 0 0.45rem;
        line-height: 0.4rem;
        display: inline-block;
        border: 1px solid @mColor;
        border-radius: 1rem;
        color: @mColor;
        background: #fff;
        font-size: 0.18rem;
        &.primary {
        color: #fff;
        background: @mColor;
        }
    }
    .btn + .btn {
        margin-left: 0.1rem;
    }
}
.vip-title {
   padding: .06rem .14rem .04rem;
    font-size: .14rem;
    color: #808080;
}
.courseStudent {
    .van-cell__value {
        color: #c8c9cc;
        font-size: .16rem;
    }
}
.add-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .1rem 0;
    font-size: .16rem;

    .van-icon {
        margin-right: .05rem;
        font-size: .20rem;
    }
}
/deep/.van-cell__title {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  margin-right: 12px;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
  font-size: 16px;
}
.title-time {
    display: flex;
    align-items: center;
    flex: 1 auto;
    color: #4a4a4a;

    .online {
        color: @tFontColor;
    }

    .week {
        padding-left: 0.4rem;
        padding-right: 0.15rem;
    }
}
.van-row {
    line-height: 0.4rem;
    border-top: 1px solid #edeef0;
    text-align: center;
    font-size: 0.14rem;

    &:first-child {
        border-top: 0;
        background: #edeef0;
        color: #444;
        font-size: 0.15rem;
    }
}
.tableContainer {
    max-height: 2.44rem;
    overflow: auto;

    .van-row {
        color: #444;

        &:first-child {
            border-top: 0;
            background: #fff;
            font-size: 0.14rem;
        }
    }
}
.paddingB80 {
  padding-bottom: .8rem;
}
/deep/.studentChiose {
  border-radius: 0 0 0px 0px;
  overflow: auto;
}
</style>