<template>
	<div class="context">
		<div class="panel">
			<div class="panel-body">
				<br />
				<el-page-header @back="goBack" content="课程管理">
					<br />
				</el-page-header>
				<span class="classNames">{{ title }} {{ ClassStateText }}</span>

				<br />
				<div class="panel_control">
					<el-row :gutter="20">
						<el-col :span="6">
							<em>会员名:</em>
							<el-input
								v-model="panel.name"
								placeholder="请输入会员名"
							></el-input>
						</el-col>
						<el-col :span="6">
							<em>手机号:</em>
							<el-input
								v-model="panel.phone"
								placeholder="请输入手机号"
								type="number"
							></el-input>
						</el-col>
						<el-col :span="4">
							<el-button
								size
								type="primary"
								@click="query"
								plain
								:disabled="serachBtnStatus"
								:loading="serachBtnStatus"
								>查询</el-button
							>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="change">
				<el-button
					@click="confirmBegin"
					type="primary"
					:disabled="BeginState"
					:loading="BeginState"
					v-if="FinishClass == 3"
					size="mini"
					>确认上课</el-button
				>
				<el-button
					@click="confirmClose"
					type="danger"
					:disabled="!BeginState"
					size="mini"
					>关闭课程</el-button
				>
				<el-button
					@click="addFinish"
					type="primary"
					v-if="FinishClass == 2"
					size="mini"
					>确认下课</el-button
				>
				<el-button @click="addFinishMember" size="mini">添加上课会员</el-button>
				<el-button @click="addTempMember" type="warning" size="mini"
					>添加临时会员</el-button
				>
				<el-button @click="addCrossMember" type="primary" size="mini"
					>添加跨店会员</el-button
				>
				<!--<el-button @click="allSetOnline" type="warning">全部网课</el-button>-->
			</div>
		</div>
		<div class="table">
			<el-table
				:data="tableData"
				border
				is-horizontal-resize
				:default-sort="{ prop: 'data', order: 'descending' }"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				class
				:row-class-name="tableRowClassName"
				@selection-change="handleSelectionChange"
				ref="multipleTable"
			>
				>
				<el-table-column
					type="index"
					label="排名"
					align="center"
					width="50"
				></el-table-column>
				<el-table-column
					prop="head"
					label="头像"
					width="75"
					align="center"
					sortable
				>
					<template slot-scope="scope">
						<div class="demo-image__preview" v-if="scope.row.Head">
							<el-image
								style="width: 25px; height: 25px"
								:src="scope.row.Head"
								:preview-src-list="[scope.row.Head]"
							></el-image>
						</div>
						<img
							src="../../assets/img/nav/head.png"
							alt
							v-else
							width="25px"
							height="25px"
						/>
						<!--<img class="head" :src="scope.row.Head" alt="" height="51" width="51" v-if="scope.row.Head">-->
						<!--<img class="head" src="../assets/img/nav/head.png" height="51" width="51" v-else/>-->
					</template>
				</el-table-column>
				<el-table-column
					prop="Name"
					label="会员名"
					width="90"
					sortable
				></el-table-column>
				<el-table-column
					prop="Phone"
					label="手机号"
					width="120"
					sortable
					v-if="!isCollapse"
				></el-table-column>
				<el-table-column
					prop="ClassName"
					label="课程"
					width="110"
					sortable
					v-if="!isCollapse"
				>
					<template slot-scope="scope">
						<span
							class="lessons"
							:style="{ background: scope.row.ClassColor }"
							>{{ scope.row.ClassName }}</span
						>
					</template>
				</el-table-column>
				<el-table-column
					prop="OrderTime"
					label="预约时间"
					:formatter="filterFmtDate"
					sortable
					v-if="!isCollapse"
				></el-table-column>
				<el-table-column prop="IsOnline" label="是否网课" width="140">
					<template slot="header" slot-scope="scope">
						<el-checkbox
							@change="(val) => handleSelectAll(val)"
							label="是否网课"
						/>
					</template>
					<template slot-scope="scope">
						<el-checkbox
							label="网课"
							v-model="scope.row.IsOnlineState"
							::checked="scope.row.IsOnlineState"
							:disabled="scope.row.BindId > 0 || scope.row.HrSubmitFlag == 1"
							name="type"
							true-label="1"
							false-label="0"
							@change="wathcIsOnlineRow(scope.row.IsOnlineState, scope.row)"
						></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column
					prop="RemainTotalhour"
					label="剩余课时"
					width="110"
					sortable
				></el-table-column>
				<el-table-column
					prop="group_no"
					label="队伍"
					width="140"
					v-if="ClassType == 2"
					sortable
				>
					<template slot-scope="scope">
						<!--正式会员-->
						<div v-if="scope.row.IsTmpUser != 1">
							<el-select
								v-model="scope.row.group_no"
								filterable
								:disabled="FinishClass == 2 && scope.row.DpId != 0"
								placeholder="请选团队"
							>
								<el-option
									v-for="item in panel.groupList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</div>
						<div v-if="scope.row.IsTmpUser == 1">
							<el-select
								v-model="scope.row.group_no"
								filterable
								:disabled="FinishClass == 2 && scope.row.HrSubmitFlag == 1"
								placeholder="请选团队"
							>
								<el-option
									v-for="item in panel.groupList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="BindId" label="心率带" sortable>
					<template slot-scope="scope">
						<div v-if="scope.row.IsTmpUser != 1">
							<el-select
								v-model="scope.row.BindId"
								@change="bindSensorToUser(scope.row)"
								@focus="getSelectHrSensors(scope.row)"
								:disabled="scope.row.IsOnline == 1"
								filterable
								v-if="!scope.row.BindId"
								placeholder="请选心率带"
							>
								<el-option
									v-for="item in panel.bindList"
									:key="item.index"
									:label="item.label"
									:value="item.HrId"
								>
									<!--私有的-->
									<span
										v-if="item.HrType == 1"
										style="background: #409eff; color: #fff"
										>{{ item.label }}</span
									>
									<!--共有的-->
									<span v-else>{{ item.label }}</span>
								</el-option>
							</el-select>
							<el-button
								@click="takeBack(scope.row)"
								:type="scope.row.IsPrivate == 1 ? 'primary' : 'danger'"
								v-if="scope.row.BindId"
								:disabled="scope.row.IsOnline == 1"
								icon="el-icon-cpu"
							>
								{{ scope.row.Sn }} {{ scope.row.IsPrivate == 1 ? "私有" : "" }}
								设备收回
							</el-button>
						</div>
						<div v-if="scope.row.IsTmpUser == 1">
							<!--临时会员-->
							<el-select
								v-model="scope.row.BindId"
								@change="bindSensorToTmepUser(scope.row)"
								@focus="getSelectHrSensors(scope.row)"
								:disabled="scope.row.IsOnline == 1"
								filterable
								v-if="!scope.row.Sn"
								placeholder="请选心率带"
							>
								<el-option
									v-for="item in panel.bindList"
									:key="item.index"
									:label="item.label"
									:value="item.HrId"
								></el-option>
							</el-select>
							<el-button
								@click="takeTempBack(scope.row)"
								type="danger"
								v-if="scope.row.Sn"
								:disabled="scope.row.IsOnline == 1"
								icon="el-icon-cpu"
							>
								{{ scope.row.Sn }}
								临时设备收回
							</el-button>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="Status" label="状态" width="110" sortable>
					<template slot-scope="scope">
						<span v-if="scope.row.Status == 1">预约上课</span>
						<span v-if="scope.row.Status == 2">预约未到</span>
						<span v-if="scope.row.Status == 3">上课未预约</span>
					</template>
				</el-table-column>

				<el-table-column prop="Status" label="操作">
					<template slot-scope="scope">
						<div v-if="scope.row.DpId <= 0">
							<el-button
								type="primary"
								round
								v-if="scope.row.Status == 1"
								size="mini"
								@click="pauseRow(scope.row, 2)"
								>预约未到</el-button
							>
							<el-button
								type="warning"
								round
								v-if="scope.row.Status == 2"
								size="mini"
								@click="pauseRow(scope.row, 1)"
								>上课</el-button
							>
							<el-button
								type="danger"
								round
								v-if="scope.row.Status == 3"
								size="mini"
								@click="getClassOverDetailDel(scope.row)"
								>删除</el-button
							>&nbsp;
							<em v-if="FinishClass != 3">
								<el-button
									type="warning"
									round
									v-if="
										scope.row.Status == 1 ||
											(scope.row.Status == 3 && FinishClass == 2)
									"
									size="mini"
									:disabled="scope.row.BindId == 0 && scope.row.IsOnline == 0"
									@click="getClassDetailAndSnAdd(scope.row)"
									>提交</el-button
								>
							</em>
							<!-- :disabled="scope.row.HrSubmitFlag == 0 && scope.row.IsOnline == 0" -->
						</div>
						<div v-if="scope.row.IsTmpUser == 1">
							<el-button
								type="danger"
								round
								v-if="scope.row.Status == 3 && scope.row.HrSubmitFlag != 1"
								size="mini"
								@click="getClassOverTempDel(scope.row)"
								>删除</el-button
							>&nbsp;
							<span v-if="FinishClass != 3 && scope.row.IsTmpUser == 1">
								<el-button
									type="warning"
									round
									v-if="
										scope.row.Status == 1 ||
											(scope.row.Status == 3 && FinishClass == 2)
									"
									size="mini"
									:disabled="scope.row.Sn == '' && scope.row.IsOnline == 0"
									@click="getClassDetailAndSnAdd(scope.row)"
									>提交</el-button
								>
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<br />
			<el-pagination
				background
				:total="pageination.total"
				:page-size="pageination.pageItem"
				@current-change="pageChange"
			></el-pagination>
		</div>
		<!--添加上课会员-->
		<el-dialog title="添加上课会员" :visible.sync="dialogVisible" width="720px">
			<div class="dialogContent viplist">
				<span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
				<div>
					<el-transfer
						filterable
						v-model="dialogValue"
						:data="form.dialogdata"
						:titles="['会员列表', '已添加会员']"
					></el-transfer>
				</div>
			</div>
			<div class="dialogFooter">
				<el-button
					type="primary"
					size="small"
					:disabled="BtnConfirmMember"
					:loading="BtnConfirmMember"
					@click="confirmMember"
					>确定</el-button
				>
				<el-button size="small" @click="dialogVisible = false">取消</el-button>
			</div>
		</el-dialog>
		<!--添加临时会员-->
		<el-dialog
			title="添加临时会员"
			:visible.sync="dialogTempVisible"
			width="720px"
		>
			<div class="dialogContent viplist">
				<span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
				<div>
					<el-transfer
						filterable
						v-model="dialogTempValue"
						:data="form.dialogTempdata"
						:titles="['临时会员', '已添加会员']"
					></el-transfer>
				</div>
			</div>
			<div class="dialogFooter">
				<el-button
					type="primary"
					size="small"
					:disabled="BtnTempConfirmMember"
					:loading="BtnTempConfirmMember"
					@click="TempconfirmMember"
					>确定</el-button
				>
				<el-button size="small" @click="dialogTempVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
		<!--添加跨店会员-->
		<el-dialog
			title="添加跨店会员"
			:visible.sync="dialogAcrossVisible"
			width="720px"
		>
			<div class="dialogContent viplist">
				<span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
				<div>
					<el-transfer
						filterable
						v-model="dialogAcrossValue"
						:data="form.dialogAcrossdata"
						:titles="['跨店会员', '已添加会员']"
					></el-transfer>
				</div>
			</div>
			<div class="dialogFooter">
				<el-button
					type="primary"
					size="small"
					:disabled="BtnAcrossConfirmMember"
					:loading="BtnAcrossConfirmMember"
					@click="AcrossConfirmMember"
					>确定</el-button
				>
				<el-button size="small" @click="dialogAcrossVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
		<el-dialog
			title="确认下课"
			:visible.sync="dialogFinishVisible"
			width="650px"
		>
			<div class="dialogContent">
				<span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
				<div>
					<!--<el-transfer filterable v-model="dialogCoachValue" :data="form.dialogCoachdata"-->
					<!--:titles="['教练列表', '已添加教练']"></el-transfer>-->
					<p>
						您是否确认下课？
						<br />
						<br />（确定后将不可再编辑上课学员的信息）
					</p>
					<br />
				</div>
			</div>
			<div class="dialogFooter">
				<el-button
					type="primary"
					size="small"
					:disabled="BtnConfirmClassFinish"
					:loading="BtnConfirmClassFinish"
					@click="confirmClassFinish"
					>确定</el-button
				>
				<el-button size="small" @click="dialogFinishVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Global from "../../Global.js";
import {
	ClassDetailQuery,
	ClassOverDetailListQuery,
	VipUserSimpleQuery,
	ClassOverDetailAdd,
	ClassDetailAndSnAdd,
	ClassOverDetailStatusEdit,
	ClassOverDetailDel,
	SelectHrSensors,
	BindHrSensorsToUser,
	UnBindHrSensorsToUser,
	ClassStartConfirm,
	ShopManagerListQuery,
	ClassOverConfirm,
	TmpUserQuery,
	ClassOverTmpDetailAdd,
	ClassTmpUserOverDetailDel,
	BindHrSensorsToTempUser,
	AcrossUserSimpleQuery,
	ClassGiveUpConfirm,
} from "../../api/getApiRes";

let qs = require("qs");
export default {
	data() {
		return {
			serachBtnStatus: false,
			BtnConfirmClassFinish: false,
			BtnConfirmMember: false,
			BtnTempConfirmMember: false,
			BtnAcrossConfirmMember: false,
			BeginState: true, //确认上课
			tableData: [],
			title: "",
			ClassType: 0,
			PkNum: 0,
			ClassStateText: "",
			FinishClass: 0, //当前上课状态 1已下课 2已上课 3准备上课 FinishClass
			dialogVisible: false, //添加下课会员
			dialogTempVisible: false, //添加临时会员
			dialogAcrossVisible: false, //
			dialogFinishVisible: false, //确认下课dialog
			dialogLesson: false, //课时调整
			dialogGift: false, //赠送课时调整
			dialogExpTime: false, //有效期调整
			dialogLessonTable: false, //会员课程
			dialogTitle: "新增会员",
			current: getNowDate(),
			dialogValue: [],
			dialogTempValue: [],
			dialogCoachValue: [],
			dialogAcrossValue: [],
			BeginTime: "",
			ClassName: "",
			// panel 配置项目
			panel: {
				name: "",
				phone: "",
				usercode: "",
				username: "",
				compname: "",
				keyword: "",
				USERCODE: "",
				endType: "",
				taskstatus: 99,
				draw: 1,
				start: 0,
				recordsTotal: 0,
				tableData: [],
				allTableData: [],
				limit: "10",
				multipleSort: false,
				loading: false,
				fileList: [],
				bindList: [
					{
						value: 0,
						HrId: 0,
						label: "请选择心率带",
						InVenueNo: 0,
						index: 0,
					},
				],
				groupList: [
					{ label: "红队", value: 1 },
					{ label: "蓝队", value: 2 },
					{ label: "黄队", value: 3 },
				],
				multipleSelection: [],
				detectedmac: "",
				BeginTime: "",
				ClassName: "",
				options: [
					{ value: 99, label: "全部" },
					{ value: 1, label: "进行中" },
					{ value: 2, label: "已完成" },
				],
				endTypeOptions: [
					{ value: 99, label: "全部" },
					{ value: 30, label: "近一个月" },
					{ value: 7, label: "近一周" },
					{ value: 1, label: "当日" },
				],
				time1: globalBt(),
			},
			form: {
				name: "",
				userCode: "",
				coach: "",
				coachOptions: [],
				shopId: "",
				memberType: 1,
				lesson: 1,
				gift: 1,
				btnType: 0, //0新建，1编辑编辑
				memo: "",
				expTime: "",
				dialogdata: [], //穿梭待选
				dialogTempdata: [], //穿梭待选
				dialogValue: [], //穿梭已选
				dialogCoachdata: [], //穿梭已选
				dialogAcrossdata: [], //穿梭已选
			},
			memberTypes: [
				{ value: 1, label: "年会员" },
				{ value: 2, label: "充值会员" },
			],
			pageination: {
				pageItem: 1000,
				pageoptions: pageOptions(),
				total: 1000,
				pageIndex: 1,
			},
			isCollapse: document.body.clientWidth < 1366,
		};
	},
	mounted() {
		this.getTableQuery();
		// this.getSelectHrSensors();
		this.ClassType = this.$route.query.ClassType;
		this.PkNum = this.$route.query.PkNum;
		this.FinishClass = this.$route.query.FinishClass;
		this.title =
			this.$route.query.ClassName +
			" " +
			this.$route.query.BeginStr +
			"-" +
			this.$route.query.EndStr;
	},
	methods: {
		// 禁用或启用绑定心率带
		showOrDiss(row) {
			// console.log(row);
			// if (row.isOnline == 1) {
			//     row.isOnline = 0
			// } else {
			//     row.isOnline = 1
			// }
		},
		handleSelectionChange(val) {
			let row = "";
			for (let t in this.tableData) {
				this.tableData[t].IsOnline = 0;
			}
			for (let v in val) {
				val[v].IsOnline = 1;
			}
		},
		handleSelectAll(val) {
			if (val) {
				for (let t in this.tableData) {
					if (!this.tableData[t].Sn) {
						this.tableData[t].IsOnline = 1;
						this.tableData[t].IsOnlineState = true;
					}
				}
			} else {
				for (let t in this.tableData) {
					if (!this.tableData[t].Sn) {
						this.tableData[t].IsOnline = 0;
						this.tableData[t].IsOnlineState = false;
					}
				}
			}
			console.log();
		},
		wathcIsOnlineRow(checked, row) {
			console.log(row);
			// if(row.Sn){
			//     row.IsOnlineState = false;
			//     this.$message.error( '请先解绑心率带');
			//     return false
			// }else{
			row.IsOnline = checked == true ? 1 : 0;
			// }
		},
		// 请选心率带
		bindSensorToUser(row) {
			let that = this;
			let obj = {};
			// 未到用户不能绑心率带
			if (row.Status == 2) {
				row.BindId = 0;
				that.$message.error("会员未到不能绑定心率带");
				return false;
			}
			obj = this.panel.bindList.find((item) => {
				return item.HrId === row.BindId;
			});
			// let oldSn = row.BindId == 0 ? row.Sn : '';
			let oldSn = "";
			let param = {
				token: localStorage.token,
				shopId: localStorage.shopId,
				cfId: row.CfId,
				userId: row.UserId,
				sn: obj.Sn,
				hrId: row.BindId,
			};
			let postdata = qs.stringify(param);
			BindHrSensorsToUser(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "心率带绑定成功！",
						type: "success",
					});
					// table 重载
					that.getTableQuery();
					// 重置心率带可选列表
					// that.getSelectHrSensors();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		toggleSelection(rows) {
			// if(rows.IsOnline == 1){
			//     // 网课学生状态置入
			//
			// }
			if (rows) {
				rows.forEach((row) => {
					console.log(row);
					this.$refs.multipleTable.toggleRowSelection(1);
				});
			}
		},
		// 临时会员绑定心率带
		bindSensorToTmepUser(row) {
			let that = this;
			let obj = {};
			obj = this.panel.bindList.find((item) => {
				return item.HrId === row.BindId;
			});
			// let oldSn = row.BindId == 0 ? row.Sn : '';
			let param = {
				token: localStorage.token,
				sn: obj.Sn,
				cfId: row.CfId,
				userId: row.UserId,
				shopId: localStorage.shopId,
				hrId: row.BindId,
			};
			let postdata = qs.stringify(param);
			BindHrSensorsToTempUser(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "临时会员心率带绑定成功！",
						type: "success",
					});
					// table 重载
					that.getTableQuery();
					// 重置心率带可选列表
					// that.getSelectHrSensors();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 设备回收
		takeBack(row) {
			let that = this;
			let text = "";
			if (this.$route.query.FinishClass == 2) {
				text =
					"当前上课种是否回收用户" +
					row.Name +
					"的心率设备？(回收将重置用户的上课成绩)";
			} else {
				text = "是否回收用户" + row.Name + "的心率设备？";
			}
			this.$confirm(text, "回收操作", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					let param = {
						token: localStorage.token,
						cfId: row.CfId,
						bindId: row.BindId,
						userId: row.UserId,
						sn: row.Sn,
					};
					let postdata = qs.stringify(param);
					UnBindHrSensorsToUser(postdata).then((res) => {
						let json = res;
						if (json.Code == 0) {
							that.$message({
								showClose: true,
								message: "心率带" + row.Sn + "回收成功！",
								type: "success",
							});
							// table 重载
							that.getTableQuery();
							// 重置心率带可选列表
							// that.getSelectHrSensors();
						} else {
							that.$message.error(json.Memo + " 错误码：" + json.Code);
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消回收",
					});
				});
		},
		takeTempBack(row) {
			let that = this;
			if (this.FinishClass == 2) {
				that.$message.error("请删除临时会员后重新添加");
			} else {
				that.$message.error("临时会员无法替换心率带");
			}

			// let that = this;
			// let text = "";
			// if (this.$route.query.FinishClass == 2) {
			//     text = '当前上课种是否回收用户' + row.Name + '的心率设备？(回收将重置用户的上课成绩)'
			// } else {
			//     text = '是否回收用户' + row.Name + '的心率设备？'
			// }
			// this.$confirm(text, '回收操作', {
			//     confirmButtonText: '确定',
			//     cancelButtonText: '取消',
			//     type: 'warning'
			// }).then(() => {
			//     let param = {
			//         token: localStorage.token,
			//         cfId: row.CfId,
			//         bindId: row.BindId,
			//         userId: row.UserId,
			//         sn: row.Sn,
			//     };
			//     let postdata = qs.stringify(param);
			//     UnBindHrSensorsToUser(postdata).then(res => {
			//         let json = res;
			//         if (json.Code == 0) {
			//             that.$message({
			//                 showClose: true,
			//                 message: '心率带' + row.Sn + '回收成功！',
			//                 type: 'success'
			//             });
			//             // table 重载
			//             that.getTableQuery();
			//             // 重置心率带可选列表
			//             // that.getSelectHrSensors();
			//         } else {
			//             that.$message.error(json.Memo + ' 错误码：' + json.Code);
			//         }
			//     })
			// }).catch(() => {
			//     this.$message({
			//         type: 'info',
			//         message: '已取消回收'
			//     });
			// });
		},
		// 确认下课
		addFinish() {
			this.clearForm();
			// 重新获得教练名单
			this.getCoachOption();
			this.dialogFinishVisible = true;
			this.btnType = 0;
			this.dialogTitle = "确认下课";
		},
		// 获取教练选项
		getCoachOption() {
			let that = this;
			let param = {
				token: localStorage.token,
				name: this.panel.name, //
				phone: this.panel.phone, //
				shopId: localStorage.ShopId, //
				adminType: 4, //
				start: 1, //
				tableMax: 299, //
			};
			let postdata = qs.stringify(param);
			ShopManagerListQuery(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.form.dialogCoachdata = turnResToOptionByUsers(json.Rs);
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 确认下课
		confirmClassFinish() {
			this.BtnConfirmClassFinish = true;
			let that = this;
			// checkNum
			let userlist = that.dialogCoachValue.toString();
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				teacherList: userlist,
			};
			let postdata = qs.stringify(param);
			// 下课记录详情添加
			ClassOverConfirm(postdata).then((res) => {
				that.BtnConfirmClassFinish = false;
				let json = res;
				if (json.Code == 0) {
					// 关闭弹窗
					that.dialogFinishVisible = false;
					// 重载列表
					that.getTableQuery();
					that.$message({
						showClose: true,
						message: "当前课程已确认下课！",
						type: "success",
					});
					// 返回下课列表
					// that.$router.push({path: '/finish'});
					this.$router.go(-1);
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 确认上课
		confirmBegin() {
			let that = this;
			// 根据课程类型提示最大上课人数
			let ClassType = parseInt(this.$route.query.ClassType);
			if(ClassType == 1 && this.tableData.length > 30){
				that.$message.error('团课做多上课人数不应超过30人');
				// return false
			} 
			if(ClassType == 2 && this.tableData.length > 16){
				that.$message.error('2队pk课最多上课人数不应超过16人');
				// return false
			} 
			if(ClassType == 3 && this.tableData.length > 24){
				that.$message.error('2队pk课最多上课人数不应超过24人');
				// return false
			}

			// 没绑心率带不能开课,预约未到的不管他
			for (var i = 0; i < this.tableData.length; i++) {
				if (
					this.tableData[i].Sn == 0 &&
					this.tableData[i].Status != 2 &&
					this.tableData[i].IsOnline != 1
				) {
					that.$message.error(
						"会员" + this.tableData[i].Name + "没绑心率带，不能开课"
					);
					return false;
				}
			}
			let duRs = [];
			// "sn":"10001",//心率带
			// "group_no":0,// 0不分队 1蓝队 2红队 3黄队
			// "begin_time":1605686788,//开始上课时间戳
			// "name":"张三",
			// "head":"http://192.168.0.2/lhs.png",
			// "static_hr":100,
			// "sex":1,//性别
			// "height":176,
			// "age":40,
			// "user_id":50,
			// "weight":1000
			let row;
			let begin_time = parseInt(new Date().valueOf() / 1000);

			// 过滤未到会员
			let curPeolle = this.tableData.filter((item) => {
				if (item.Status != 2) {
					return item;
				}
			});

			// 拼装上课人员信息
			for (var i = 0; i < curPeolle.length; i++) {
				row = curPeolle[i];
				// 过滤预约未到
				duRs[i] = {
					sn: row.Sn,
					group_no: row.group_no, //0不分队 1蓝队 2红队 3黄队
					begin_time: begin_time,
					name: row.Name,
					head: row.Head,
					static_hr: row.StaticHr,
					sex: row.Sex,
					height: row.Height,
					age: row.Age,
					user_id: row.UserId,
					weight: row.Weight,
					user_md5: row.UserMd5,
					birthday: row.Birthday,
					is_tmp_user: row.IsTmpUser,
					is_private: row.IsPrivate,
					isOnline: parseInt(row.IsOnline),
				};
			}
			// 确认上课
			this.getClassStartConfirm(duRs);
		},
		// 确认上课
		getClassStartConfirm(duRs) {
			duRs = '{"Rs":' + JSON.stringify(duRs).toString() + "}";
			let that = this;
			that.BeginState = true;
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				duRs: duRs,
			};
			let postdata = qs.stringify(param);
			ClassStartConfirm(postdata).then((res) => {
				let json = res;
				that.BeginState = false;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "确认上课成功！",
						type: "success",
					});

					// 返回课程管理
					that.$router.push({
						path: "/classManage",
						query: {},
					});
					// that.FinishClass = 2;
					// that.getTableQuery();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		//关闭课程
		confirmClose() {
			this.$confirm("您确认要关闭课程?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.getConfirmClassClose();
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消",
					});
				});
		},
		//确认执行关闭课程
		getConfirmClassClose() {
			let that = this;
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
			};
			let postdata = qs.stringify(param);
			ClassGiveUpConfirm(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "课程关闭成功！",
						type: "success",
					});
					// 返回课程管理
					that.$router.push({
						path: "/classManage",
						query: {},
					});
				} else {
					that.$message({
						showClose: true,
						message: "课程关闭失败",
						type: "success",
					});
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 添加下课会员
		addFinishMember() {
			let that = this;
			this.clearForm();
			this.getClassVipuserQuery();
			this.dialogValue = [];

			// 遍历已添加的上课会员，回填穿梭框
			let std = [];
			if (this.tableData) {
				this.tableData.map(function(item) {
					if (item.IsTmpUser != 1) {
						std.push(item.UserId);
					}
				});
			}
			that.dialogValue = std;
			this.dialogVisible = true;
		},
		// 获取临时会员列表
		getTmpUserQuery() {
			let that = this;
			let param = {
				token: localStorage.token,
				start: 1,
				tableMax: 999,
			};
			let postdata = qs.stringify(param);
			TmpUserQuery(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.form.dialogTempdata = turnResToOptionByTempUser(json.Rs);
				} else {
					that.$message.error(json.Memo);
				}
			});
		},
		// 获取跨店会员列表
		getAcrossUserQuery() {
			let that = this;
			let param = {
				token: localStorage.token,
				start: 1,
				tableMax: 999,
			};
			let postdata = qs.stringify(param);
			AcrossUserSimpleQuery(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.form.dialogAcrossdata = turnResToOptionBySimViper(json.Rs);
				} else {
					that.$message.error(json.Memo);
				}
			});
		},
		// 添加临时会员
		addTempMember() {
			let that = this;
			this.clearForm();
			// this.getClassVipuserQuery();
			this.getTmpUserQuery();
			this.dialogTempValue = [];
			let std = [];
			if (this.tableData) {
				this.tableData.map(function(item) {
					if (item.IsTmpUser == 1) {
						std.push(item.UserId);
					}
				});
			}
			that.dialogTempValue = std;
			this.dialogTempVisible = true;
		},
		// 添加跨店会员
		addCrossMember() {
			let that = this;
			this.clearForm();
			this.getAcrossUserQuery();
			this.dialogAcrossValue = [];
			let std = [];
			if (this.tableData) {
				this.tableData.map(function(item) {
					std.push(item.UserId);
				});
			}
			that.dialogAcrossValue = std;
			this.dialogAcrossVisible = true;
		},
		clearForm() {
			// clear
			this.form.name = "";
			this.form.userCode = "";
			this.form.shopId = "";
			this.dialogCoachValue = [];
		},
		// 获取本课程下的会员列表
		getClassVipuserQuery() {
			let that = this;
			let param = {
				token: localStorage.token,
				// classId: this.$route.query.classId,
			};
			let postdata = qs.stringify(param);
			// ClassVipuserQuery(postdata).then(res => {
			VipUserSimpleQuery(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					// that.form.dialogdata = turnResToOptionByViper(json.Rs);
					that.form.dialogdata = turnResToOptionBySimViper(json.Rs);
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 确认提交上课会员
		confirmMember() {
			let that = this;
			if (that.BtnConfirmMember == true) return false;
			that.BtnConfirmMember = true;
			// checkNum
			let userlist = that.dialogValue.toString();
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				userlist: userlist,
			};
			let postdata = qs.stringify(param);
			// 下课记录详情添加
			ClassOverDetailAdd(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					// 关闭弹窗
					that.dialogVisible = false;
					// 重载列表
					that.getTableQuery();
					that.$message({
						showClose: true,
						message: "会员添加成功！",
						type: "success",
					});
					that.BtnConfirmMember = false;
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
					that.BtnConfirmMember = false;
				}
			});
		}, // 确认提交临时会员
		TempconfirmMember() {
			let that = this;
			if (that.BtnTempConfirmMember == true) return false;
			that.BtnTempConfirmMember = true;
			// checkNum
			let userlist = that.dialogTempValue.toString();
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				tmpuserlist: userlist,
			};
			let postdata = qs.stringify(param);
			// 下课记录详情添加
			ClassOverTmpDetailAdd(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					// 关闭弹窗
					that.dialogTempVisible = false;
					// 重载列表
					that.getTableQuery();
					that.$message({
						showClose: true,
						message: "会员添加成功！",
						type: "success",
					});
					that.BtnTempConfirmMember = false;
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
					that.BtnTempConfirmMember = false;
				}
			});
		},
		// 确认提交跨店会员
		AcrossConfirmMember() {
			let that = this;
			if (that.BtnAcrossConfirmMember == true) return false;
			that.BtnAcrossConfirmMember = true;
			// checkNum
			let userlist = that.dialogAcrossValue.toString();
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				userlist: userlist,
			};
			let postdata = qs.stringify(param);
			// 下课记录详情添加
			ClassOverDetailAdd(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					// 关闭弹窗
					that.dialogAcrossVisible = false;
					// 重载列表
					that.getTableQuery();
					that.$message({
						showClose: true,
						message: "会员添加成功！",
						type: "success",
					});
					that.BtnAcrossConfirmMember = false;
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
					that.BtnAcrossConfirmMember = false;
				}
			});
		},
		pauseRow(row, status) {
			let that = this;
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				cfId: row.CfId,
				status: status,
			};
			let postdata = qs.stringify(param);
			ClassOverDetailStatusEdit(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "执行成功！",
						type: "success",
					});
					// table 重载
					that.getTableQuery();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},

		// 下课记录详情删除
		getClassOverDetailDel(row) {
			let that = this;
			let param = {
				token: localStorage.token,
				stdId: row.StdId,
				cfId: row.CfId,
			};
			this.$confirm("是否删除用户  " + row.Name + "？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					let postdata = qs.stringify(param);
					ClassOverDetailDel(postdata).then((res) => {
						let json = res;
						if (json.Code == 0) {
							that.$message({
								showClose: true,
								message: "当前学生上课记录已删除！",
								type: "success",
							});
							that.getTableQuery();
						} else {
							that.$message.error(json.Memo + " 错误码：" + json.Code);
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		// 下课记录临时会员删除
		getClassOverTempDel(row) {
			let that = this;
			let param = {
				token: localStorage.token,
				stdId: row.StdId,
				tcfId: row.CfId,
			};
			this.$confirm("是否删除临时会员  " + row.Name + "？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					let postdata = qs.stringify(param);
					ClassTmpUserOverDetailDel(postdata).then((res) => {
						let json = res;
						if (json.Code == 0) {
							that.$message({
								showClose: true,
								message: "当前临时会员上课记录已删除！",
								type: "success",
							});
							that.getTableQuery();
						} else {
							that.$message.error(json.Memo + " 错误码：" + json.Code);
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		// 查询按钮
		query() {
			let that = this;
			that.serachBtnStatus = true;
			let totalTime = 2;
			let clock = window.setInterval(() => {
				totalTime--;
				if (totalTime < 0) {
					totalTime = 2;
					that.serachBtnStatus = false;
				}
			}, 1000);
			this.getTableQuery();
			this.$message.success("查询完毕");
		},
		goBack() {
			this.$router.push({
				path: "/classManage",
				query: {},
			});
		},
		// 页面数据查询
		getTableQuery() {
			let that = this;
			that.loading = true;
			that.BeginState = true;
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				start: 1, //
				tableMax: 9999, //
			};
			that.allTableData = [];
			that.tableData = [];
			that.recordsTotal = 0;
			let postdata = qs.stringify(param);
			ClassOverDetailListQuery(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.loading = false;
					if (json.Rs) {
						// 没人不允许开课
						if (json.Rs.length > 0) {
							// 全部预约 都是未到也不允许开课
							json.Rs.map(function(item) {
								// 只要有一个不是就放开
								if (item.Status != 2) {
									that.BeginState = false;
								}
								item.IsOnline = item.IsOnline.toString();
								item.IsOnlineState = item.IsOnline == 1 ? true : false;
							});
						}
						// 分队处理
						// 未上课的分队，已上课的旧的不处理，新人需要处理
						if (that.FinishClass == 3) {
							if (that.ClassType == 2) {
								that.TurnUnit(json.Rs);
							} else {
								json.Rs.map(function(item) {
									item.group_no = item.GroupNo;
								});
							}
						} else {
							// 已上课的状态
							json.Rs.map(function(item, i) {
								if (that.ClassType == 2) {
									if (item.GroupNo == 0) {
										item.group_no = (i % that.PkNum) + 1;
									} else {
										item.group_no = item.GroupNo;
									}
								} else {
									item.group_no = item.GroupNo;
								}
							});
						}
						that.allTableData = json.Rs;
						that.recordsTotal = json.Rs.length;
					} else {
						that.allTableData = [];
						that.recordsTotal = 0;
					}
					// 设置分页数据
					that.setPagination();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 分队
		TurnUnit(Rs) {
			let that = this;
			// 分拆2队
			if (that.PkNum == 2) {
				Rs.map(function(item, t) {
					item.group_no = (t % 2) + 1;
				});
			}

			// 分拆3队
			if (that.PkNum == 3) {
				Rs.map(function(item, t) {
					item.group_no = (t % 3) + 1;
				});
			}
		},
		// 获取心率带下拉菜单
		getSelectHrSensors(row) {
			let that = this;
			that.loading = true;
			let param = {
				token: localStorage.token,
				shopId: localStorage.shopId,
				userId: row.UserId,
			};
			let postdata = qs.stringify(param);
			SelectHrSensors(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.loading = false;
					if (json.Rs) {
						that.panel.bindList = json.Rs;
						let HrTypeText = "";
						json.Rs.map(function(item, i) {
							HrTypeText = item.HrType == 1 ? "(私有)" : "";
							item.label = "Sn：" + item.Sn + HrTypeText;
							item.index = i + 1;
						});
						that.panel.bindList.push({
							value: 0,
							HrId: 0,
							label: "请选择心率带",
							InVenueNo: 0,
						});
					} else {
						that.panel.bindList = [];
					}
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		// 设置分页数据
		setPagination() {
			// 分页属性
			let that = this;
			that.pageination.total = that.recordsTotal;

			// 默认分页
			that.tableData = that.allTableData.filter((item, index) => {
				return index < that.pageination.pageItem;
			});
		},
		// 每页显示数量
		handleSizeChange() {
			let that = this;
			that.tableData = that.allTableData.filter((item, index) => {
				return index < that.pageination.pageItem;
			});
			that.draw = that.pageination.pageItem;
			// that.getTableQuery();
		},
		// 翻页
		pageChange(pageIndex) {
			let that = this;
			// 获取当前页
			let index = that.pageination.pageItem * (pageIndex - 1);
			// 数据总数
			let nums = that.pageination.pageItem * pageIndex;
			// 容器
			let tables = [];
			for (var i = index; i < nums; i++) {
				if (that.allTableData[i]) {
					tables.push(that.allTableData[i]);
				}
				this.tableData = tables;
			}
			that.start = index * that.draw;
			// that.getTableQuery();
		},
		// 过滤时间
		filterFmtDate(value, row, column) {
			let that = this;
			if (
				column == "0001-01-01T08:05:43+08:05" ||
				column == "0001-01-01T00:00:00Z"
			) {
				return "未预约";
			} else {
				return nonTfmtDate(column, 11);
			}
		},
		// 提交单人
		getClassDetailAndSnAdd(row) {
			let begin_time = parseInt(new Date().valueOf() / 1000);
			let duRs = [];
			if (!row.Sn && row.IsOnline == 0) {
				this.$message.error(row.Name + "没有绑定心率带");
				return false;
			}
			// 拼装上课人员信息
			duRs[0] = {
				sn: row.Sn,
				group_no: row.group_no, //0不分队 1蓝队 2红队 3黄队
				begin_time: begin_time,
				name: row.Name,
				head: row.Head,
				static_hr: row.StaticHr,
				sex: row.Sex,
				height: row.Height,
				age: row.Age,
				user_id: row.UserId,
				weight: row.Weight,
				user_md5: row.UserMd5,
				birthday: row.Birthday,
				is_tmp_user: row.IsTmpUser,
				is_private: row.IsPrivate,
				isOnline: parseInt(row.IsOnline),
			};
			duRs = '{"Rs":' + JSON.stringify(duRs).toString() + "}";
			let that = this;
			let param = {
				token: localStorage.token,
				stdId: this.$route.query.StdId,
				duRs: duRs,
			};
			let postdata = qs.stringify(param);
			ClassDetailAndSnAdd(postdata).then((res) => {
				let json = res;
				if (json.Code == 0) {
					that.$message({
						showClose: true,
						message: "提交成功！",
						type: "success",
					});
					this.getTableQuery();
				} else {
					that.$message.error(json.Memo + " 错误码：" + json.Code);
				}
			});
		},
		tableRowClassName({ row, rowIndex }) {
			if (row.group_no == 1) {
				return "red-row";
			} else if (row.group_no == 2) {
				return "blue-row";
			} else if (row.group_no == 3) {
				return "yellow-row";
			}
			return "";
		},
		// 全部网课todo
		allSetOnline() {
			let that = this;
			let row = "";
			that.tableData.map(function(item) {
				row = item;
				console.log(row);
				// 没有bindID的 且没有被禁用的 选中
				if (row.BindId == 0 && row.HrSubmitFlag == 0) {
					row.IsOnline = "1";
				} else {
					// row.IsOnline = 0;
				}
			});
		},
		// 刷新列表要清空先 todo
	},
	watch: {
		$route(to) {
			if (to.name == "ClassEdit") {
				this.getTableQuery();
				this.FinishClass = this.$route.query.FinishClass;
				this.ClassType = this.$route.query.ClassType;
				this.PkNum = this.$route.query.PkNum;

				this.title =
					this.$route.query.ClassName +
					" " +
					this.$route.query.BeginStr +
					"-" +
					this.$route.query.EndStr;
			}
		},
		FinishClass(to) {
			switch (parseInt(to)) {
				case 1:
					this.ClassStateText = "已下课";
					break;
				case 2:
					this.ClassStateText = "已上课";
					break;
				case 3:
					this.ClassStateText = "准备上课";
					break;
			}
		},
		PkNum(to) {
			let that = this;
			if (to == 2) {
				that.panel.groupList = [
					{ label: "红队", value: 1 },
					{ label: "蓝队", value: 2 },
				];
			} else {
				that.panel.groupList = [
					{ label: "红队", value: 1 },
					{ label: "蓝队", value: 2 },
					{ label: "黄队", value: 3 },
				];
			}
		},
	},
};
</script>

<style scoped>
@import "../../assets/css/panel.css";

.context {
	/* height: 770px; */
	overflow-y: scroll;
	display: block;
	margin: 0 auto;
	background-color: #fff !important;
	padding: 30px;
}

.classNames {
	height: 25px;
	background: #f0f2f5;
	font-family: "Source Han Sans CN";
	font-weight: normal;
	font-size: 16px;
	color: #3799ff;
	border-radius: 250px;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 3px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

.head {
	overflow: hidden;
	display: block;
	margin: 0 auto;
	border-radius: 250px;
}

.panel_control {
	width: 100%;
	overflow: hidden;
	display: block;
	margin: 0 auto;
}

/*.panel-body {*/
.panel_control {
	padding: 20px;
	background: #f0f2f5;
}

.change {
	width: 100%;
	overflow: hidden;
	display: block;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

.change button {
	float: left;
}

.change button.pull-right {
	float: right;
}

.lessons {
	padding: 1px 7px;
	border-radius: 250px;
	float: left;
	color: #000;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
	/*float: left;*/
	left: 10%;
}

/*/deep/ .el-checkbox  .el-checkbox {*/
/*margin-right: 1px;*/
/*}*/
/deep/ .el-checkbox__label span {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	float: left;
}

.cell em {
	margin-left: 5px;
	margin-right: 5px;
}

/deep/
	.el-transfer-panel
	.el-transfer-panel__header
	.el-checkbox
	.el-checkbox__label
	span {
	width: 50px;
	float: right;
	right: 0;
}

/*/deep/ .el-table .red-row {*/
/*background: #fb88c1;*/
/*}*/

/*/deep/ .el-table .blue-row {*/
/*background: #7099d0;*/
/*}*/
/*/deep/ .el-table .yellow-row {*/
/*background: #fbe56e;*/
/*}*/

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
	content: " 是否网课";
}

/deep/
	.el-table__body-wrapper
	.el-table-column--selection
	.cell
	.el-checkbox:after {
	content: " 网课";
}
</style>
