<template>
  <div class="context">
    <div class="panel">
      <div class="panel-body">
        <el-page-header @back="goBack" content="课程管理">
        </el-page-header>
        <span class="classNames">{{ title }} {{ ClassStateText }}</span>
        <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="searchBtnStatus"
                         :loading="searchBtnStatus">查询
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="change">
        <!--//0:未上课 1:准备上课 2:上课中  4:已下课-->
        <el-button @click="classBegin" type="primary" :disabled="BeginState" :loading="BeginState"
                   v-if="FinishClass == 1" size="mini">确认上课
        </el-button>
        <el-button @click="classClose" type="danger" size="mini" :disabled="!BeginState">关闭课程</el-button>
        <el-button @click="classFinish" type="primary" size="mini" v-if="FinishClass == 2">确认下课</el-button>
        <el-button @click="addFullMember" type="success" size="mini">添加上课会员</el-button>
        <el-button @click="addCrossMember" type="warning" size="mini">添加跨店会员</el-button>
        <el-button @click="addTempMember" type="primary" size="mini">添加临时会员</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="headurl" label="头像" width="75" align="center" sortable>
          <template slot-scope="scope">
            <div class="demo-image__preview" v-if="scope.row.headurl">
              <el-image style="width: 25px; height: 25px" :src="scope.row.headurl"
                        :preview-src-list="[scope.row.headurl]"></el-image>
            </div>
            <img src="../../assets/img/nav/head.png" alt v-else width="25px" height="25px"/>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="会员名" width="90" sortable/>
        <el-table-column prop="usercode" label="手机号" width="120" sortable v-if="!isCollapse"/>
        <el-table-column prop="ClassName" label="课程" width="110" sortable v-if="!isCollapse">
          <template slot-scope="scope">
            <span class="lessons" :style="{ background: scope.row.class_color }">{{ scope.row.class_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_time" label="预约时间" :formatter="filterFmtDate" sortable v-if="!isCollapse"/>

        <el-table-column prop="is_online" 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.is_online" ::checked="scope.row.is_online"
                         :disabled="scope.row.isHr == 1" name="type"
                         true-label="1" false-label="0"
                         @change="row.is_online = (checked == true ? 1 : 0)"/>
          </template>
        </el-table-column>

        <el-table-column prop="remain_totalhour" 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.is_tmp_user != 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-select>
            </div>
            <div v-if="scope.row.is_tmp_user == 1">
              <el-select v-model="scope.row.group_no" filterable placeholder="请选团队"
                         :disabled="FinishClass == 2 && scope.row.HrSubmitFlag == 1">
                <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="sn" label="心率带" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.is_tmp_user != 1">
              <el-select v-model="scope.row.sn" @change="bandToMember(scope.row)"
                         @focus="getSelectHrSensors(scope.row)" :disabled="scope.row.is_online == 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">
                  <!--私有的-->
                  <span v-if="item.hr_type == 1" style="background: #409eff; color: #fff">{{ item.label }}</span>
                  <!--共有的-->
                  <span v-else>{{ item.label }}</span>
                </el-option>
              </el-select>
              <el-button @click="sensorRetrieve(scope.row)" :type="scope.row.is_private == 1 ? 'primary' : 'danger'"
                         v-if="scope.row.sn" :disabled="scope.row.is_online == 1" icon="el-icon-cpu">
                {{ scope.row.sn }} {{ scope.row.is_private == 1 ? "私有" : "" }}
                设备收回
              </el-button>
            </div>
            <div v-if="scope.row.is_tmp_user == 1">
              <!--临时会员-->
              <el-select v-model="scope.row.sn" @change="bandToMember(scope.row)"
                         @focus="getSelectHrSensors(scope.row)" :disabled="scope.row.is_online == 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="sensorTempRetrieve(scope.row)" type="danger" v-if="scope.row.sn"
                         :disabled="scope.row.is_online == 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" style="color: red">预约未到</span>
            <span v-if="scope.row.status == 3">上课未预约</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="操作" width="500">

          <template slot-scope="scope">
            <el-button round type="primary" size="mini"
                       v-if="scope.row.status == 1"
                       @click="editMemberStat(scope.row, 2)" style="float:left;">
              预约未到
            </el-button>
            <el-button type="warning" size="mini" round v-if="scope.row.status == 2"
                       @click="editMemberStat(scope.row, 1)">
              上课
            </el-button>

            <!--正式会员删除提交-->
            <div v-if="scope.row.is_tmp_user == 0">
              <el-button type="danger" size="mini" round v-if="scope.row.status == 3"
                         @click="deleteClassMember(scope.row)">
                删除
              </el-button>
              <em v-if="FinishClass != 3">
                <el-button round type="warning" size="mini"
                           v-if="scope.row.status == 1 || (scope.row.status == 3 && FinishClass == 2)"
                           :disabled="scope.row.sn == 0 && scope.row.is_online == 0"
                           @click="submitFullMember(scope.row)">
                  提交
                </el-button>
              </em>
            </div>
            <!--临时会员删除提交-->
            <div v-else>
              <el-button round type="danger" size="mini" v-if="scope.row.status == 3 && scope.row.HrSubmitFlag != 1"
                         @click="deleteClassTempMember(scope.row)">
                删除
              </el-button>
              <span v-if="FinishClass != 3 && scope.row.is_tmp_user == 1">
								<el-button round type="warning" size="mini"
                           v-if="scope.row.status == 1 || (scope.row.status == 3 && FinishClass == 2)"
                           :disabled="scope.row.sn == '' && scope.row.is_online == 0"
                           @click="submitFullMember(scope.row)">
                  提交
                  </el-button>
							</span>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <br/>
      <el-pagination background :total="pagination.total" :page-size="pagination.pageItem"
                     @current-change="pageChange"></el-pagination>
    </div>
    <!--table结束-->

    <!--添加会员弹出框开始-->
    <!--添加正式会员区域-->
    <el-dialog title="添加上课会员" :visible.sync="dialogFullVisible" width="720px">
      <div class="dialogContent viplist">
        <span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
        <div>
          <!--选择正式会员-->
          <el-transfer filterable v-model="form.dialogFullValue" :data="form.dialogFullData"
                       :titles="['会员列表', '已添加会员']"></el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" :disabled="BtnConfirmMember" :loading="BtnConfirmMember"
                   @click="confirmFullMember">
          确定
        </el-button>
        <el-button size="small" @click="dialogFullVisible = 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="form.dialogTempValue" :data="form.dialogTempData"
                       :titles="['临时会员', '已添加会员']"></el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" :disabled="BtnTempConfirmMember" :loading="BtnTempConfirmMember"
                   @click="confirmTempMember">
          确定
        </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>
          <!--选择跨店分组-->
          <span>跨店分组
            <el-select v-model="form.acrossGroupId" filterable placeholder="请选择" @change="getAcrossUserQuery">
              <el-option v-for="item in form.acrossGroupList" :key="item.key" :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </span>

          <!--选择跨店会员-->
          <el-transfer filterable v-model="form.dialogAcrossValue" :data="form.dialogAcrossData"
                       :titles="['跨店会员', '已添加会员']" style="margin-top: 40px"/>
        </div>
      </div>
      <!--弹出框尾部-->
      <div class="dialogFooter">
        <el-button type="primary" size="small" :disabled="BtnAcrossConfirmMember" :loading="BtnAcrossConfirmMember"
                   @click="confirmAcrossMember">确定
        </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>
          <p>
            您是否确认下课？
            <br/>
            <br/>（确定后将不可再编辑上课学员的信息）
          </p>
          <br/>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" :disabled="BtnConfirmClassFinish" :loading="BtnConfirmClassFinish"
                   @click="getConfirmFinish">确定
        </el-button>
        <el-button size="small" @click="dialogFinishVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--弹出框结束-->
  </div>
</template>

<script>
import Global from "../../Global.js";
import {
  ClassDetailAndSnAdd,
  SelectHrSensors,
  BindHrSensorsToUser,
  UnBindHrSensorsToUser,
  ClassStartConfirm,
  BindHrSensorsToTempUser,
} from "../../api/getApiRes";

import {
  StandardRequest
} from "@/grpc/base_pb";

let qs = require("qs");
export default {
  data() {
    return {
      searchBtnStatus: false,
      BtnConfirmClassFinish: false,
      BtnConfirmMember: false,
      BtnTempConfirmMember: false,
      BtnAcrossConfirmMember: false,
      BeginState: true, //确认上课
      tableData: [],
      title: "",
      ClassType: 0,
      PkNum: 0,
      ClassStateText: "",
      FinishClass: 0, //当前上课状态 1已下课 2已上课 3准备上课 FinishClass
      dialogFullVisible: false, //添加上课会员
      dialogTempVisible: false, //添加临时会员
      dialogAcrossVisible: false, //添加跨店会员
      dialogFinishVisible: false, //确认下课dialog
      dialogTitle: "新增会员",
      current: getNowDate(),

      BeginTime: "",
      ClassName: "",
      // panel 配置项目
      panel: {
        name: "",
        phone: "",
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        loading: false,
        bindList: [
          {
            value: 0,
            HrId: 0,
            label: "请选择心率带",
            InVenueNo: 0,
            index: 0,
          },
        ],
        groupList: [
          {label: "红队", value: 1},
          {label: "蓝队", value: 2},
          {label: "黄队", value: 3},
        ],
        BeginTime: "",
        ClassName: "",
        time1: globalBt(),
      },
      form: {
        acrossGroupId: '',
        acrossGroupList: [],
        btnType: 0, //0新建，1编辑编辑
        dialogFullData: [],//正式会员穿梭待选
        dialogTempData: [],//临时会员穿梭待选
        dialogAcrossData: [],//跨店会员穿梭待选
        dialogFullValue: [],//正式会员穿梭已选
        dialogTempValue: [],//临时会员穿梭已选
        dialogAcrossValue: []//跨店会员穿梭已选
      },
      pagination: {
        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: {
    handleSelectionChange(val) {
      let row = "";
      for (let t in this.tableData) {
        this.tableData[t].is_online = 0;
      }
      for (let v in val) {
        val[v].is_online = 1;
      }
    },
    handleSelectAll(val) {
      if (val) {
        for (let t in this.tableData) {
          if (!this.tableData[t].sn) {
            this.tableData[t].is_online = 1;
            this.tableData[t].IsOnlineState = true;
          }
        }
      } else {
        for (let t in this.tableData) {
          if (!this.tableData[t].sn) {
            this.tableData[t].is_online = 0;
            this.tableData[t].IsOnlineState = false;
          }
        }
      }
      console.log();
    },
    // 确认上课
    classBegin() {
      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('3队pk课最多上课人数不应超过24人');
        // return false
      }

      // 没绑心率带不能开课,预约未到的不管他
      for (let i = 0; i < this.tableData.length; i++) {
        if (
            this.tableData[i].sn == 0 &&
            this.tableData[i].status != 2 &&
            this.tableData[i].is_online != 1
        ) {
          that.$message.error(
              "会员" + this.tableData[i].user_name + "没绑心率带，不能开课"
          );
          return false;
        }
      }
      let duRs = [];
      let row;
      let begin_time = parseInt(new Date().valueOf() / 1000);

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

      // 拼装上课人员信息
      for (let 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.user_name,
          head: row.headurl,
          static_hr: row.StaticHr,
          sex: row.Sex,
          height: row.Height,
          age: row.Age,
          user_id: row.std_id,
          weight: row.Weight,
          user_md5: row.UserMd5,
          birthday: row.Birthday,
          is_tmp_user: row.is_tmp_user,
          is_private: row.is_private,
          isOnline: parseInt(row.is_online),
        };
      }
      // 确认上课
      this.confirmBegin(duRs);
    },
    // 确认上课
    confirmBegin(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);
        }
      });
    },
    //关闭课程
    classClose() {
      this.$confirm("您确认要关闭课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.getConfirmClose();
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
    },
    //确认执行关闭课程
    getConfirmClose() {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdID: this.$route.query.StdId
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classGiveUpConfirm(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.$message({
              showClose: true,
              message: "课程关闭成功！",
              type: "success",
            });
            // 返回课程管理
            that.$router.push({
              path: "/classManage",
              query: {},
            });
          } else {
            that.$message({
              showClose: true,
              message: "课程关闭失败",
              type: "success",
            });
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //确认下课
    classFinish() {
      this.clearForm();
      this.dialogFinishVisible = true;
      this.btnType = 0;
      this.dialogTitle = "确认下课";
    },
    //提交下课
    getConfirmFinish() {
      this.BtnConfirmClassFinish = true;
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdId: this.$route.query.StdId
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classOverConfirm(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.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(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 添加上课会员
    addFullMember() {
      let that = this;
      this.clearForm();
      this.getClassMemberFull();
      this.form.dialogFullValue = [];

      // 遍历已添加的上课会员，回填选择会员穿梭框
      let std = [];
      if (this.tableData) {
        this.tableData.map(function (item) {
          console.log(item);
          if (item.is_tmp_user != 1) {
            std.push(item.uu_user_id);
          }
        });
      }
      that.form.dialogFullValue = std;
      this.dialogFullVisible = true;
    },
    // 获取本课程下的会员列表
    getClassMemberFull() {
      let that = this;

      const jsonStr = {
        shopId: localStorage.shopId,
        classId: this.$route.query.ClassId,//-99代表查询全部
        isAcross: 0 //0：不跨店 1跨店  -99是全部
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      that.client.vipUserSimpleQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            if (res.rs) {
              that.form.dialogFullData = turnResToOptionBySimViper(res.rs);
            } else {
              that.form.dialogFullData = [];
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
        }
      });
    },
    // 确认提交上课会员
    confirmFullMember() {
      let that = this;
      if (that.BtnConfirmMember == true) return false;
      that.BtnConfirmMember = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdId: this.$route.query.StdId,
        UUUserIdList: that.form.dialogFullValue.toString()
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipClassDetailAdd(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            // 关闭弹窗
            that.dialogFullVisible = false;
            // 重载列表
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: "会员添加成功！",
              type: "success",
            });
            that.BtnConfirmMember = false;
          } else {
            that.BtnConfirmMember = false;
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 添加跨店会员
    addCrossMember() {
      let that = this;
      this.clearForm();
      this.getAcrossGroup();
      this.form.dialogAcrossValue = [];
      // 遍历已添加的上课会员，回填选择跨店会员穿梭框
      let std = [];
      if (this.tableData) {
        this.tableData.map(function (item) {
          std.push(item.uu_user_id);
        });
      }
      that.form.dialogAcrossValue = std;
      this.dialogAcrossVisible = true;
    },
    // 获取跨店分组
    getAcrossGroup() {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.groupSimpleQueryByShopID(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            if (res.rs) {
              that.form.acrossGroupList = turnResShopAcrossOption(res.rs);
            } else {
              that.form.acrossGroupList = [];
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 获取跨店会员列表
    getAcrossUserQuery() {
      let that = this;
      const jsonStr = {
        groupId: that.form.acrossGroupId
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.acrossUserSimpleQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            if (res.rs) {
              that.form.dialogAcrossData = turnResToOptionBySimViper(res.rs);
            } else {
              that.form.dialogAcrossData = [];
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 确认提交跨店会员
    confirmAcrossMember() {
      let that = this;
      if (that.BtnAcrossConfirmMember == true) return false;
      that.BtnAcrossConfirmMember = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdId: this.$route.query.StdId,
        UUUserIdList: that.form.dialogAcrossValue.toString()
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipClassDetailAdd(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            // 关闭弹窗
            that.dialogAcrossVisible = false;
            // 重载列表
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: "会员添加成功！",
              type: "success",
            });
            that.BtnAcrossConfirmMember = false;
          } else {
            that.BtnAcrossConfirmMember = false;
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 添加临时会员
    addTempMember() {
      let that = this;
      this.clearForm();
      this.getTmpUserQuery();
      this.form.dialogTempValue = [];

      // 遍历已添加的上课会员，回填选择临时会员穿梭框
      let std = [];
      if (this.tableData) {
        this.tableData.map(function (item) {
          if (item.is_tmp_user == 1) {
            std.push(item.uu_user_id);
          }
        });
      }
      that.form.dialogTempValue = std;
      this.dialogTempVisible = true;
    },
    // 获取临时会员列表
    getTmpUserQuery() {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.tempVipUserSimpleQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            if (res.rs) {
              that.form.dialogTempData = turnResToOptionByTempUser(res.rs);
            } else {
              that.form.dialogTempData = [];
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //确认提交临时会员
    confirmTempMember() {
      let that = this;
      if (that.BtnTempConfirmMember == true) return false;
      that.BtnTempConfirmMember = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdId: this.$route.query.StdId,
        UUUserIdList: that.form.dialogTempValue.toString()
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.tmpClassDetailAdd(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            // 关闭弹窗
            that.dialogTempVisible = false;
            // 重载列表
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: "会员添加成功！",
              type: "success",
            });
            that.BtnTempConfirmMember = false;
          } else {
            that.BtnTempConfirmMember = false;
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //编辑会员上课状态 status: 1:预约上课 2:预约未到 3未预约上课
    editMemberStat(row, status) {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId,
        UuCrId: row.uu_cr_id,
        status: status,
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipClassDetailStatueEdit(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.$message({
              showClose: true,
              message: "执行成功！",
              type: "success",
            });
            // table 重载
            that.getTableQuery();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 删除正式会员
    deleteClassMember(row) {
      let that = this;

      this.$confirm("是否删除用户  " + row.user_name + "？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        const jsonStr = {
          shopId: localStorage.shopId,
          UuCrId: row.uu_cr_id
        };

        let paraRequest = new StandardRequest();
        paraRequest.setShopid(localStorage.shopId);
        paraRequest.setJsonstr(JSON.stringify(jsonStr));
        paraRequest.setSign(getSignStr(jsonStr));
        console.log(paraRequest);
        that.client.vipClassDetailDel(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
          if (err == null) {
            console.log(StandardReply.getJsonrst());
            let res = JSON.parse(StandardReply);
            if (res.code === 0) {
              that.$message({
                showClose: true,
                message: "当前学生上课记录已删除！",
                type: "success",
              });
              that.getTableQuery();
            } else {
              that.$message.error(res.memo + ',错误代码：' + res.code);
            }
          } else {
            let res = err;
            that.$message.error(res.message + ',错误代码：' + res.code);
            console.log(res);
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    //删除临时会员
    deleteClassTempMember(row) {
      let that = this;

      this.$confirm("是否删除临时会员  " + row.user_name + "？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        const jsonStr = {
          shopId: localStorage.shopId,
          UUStdId: row.uu_std_id,
          UuTcrId: row.uu_cr_id
        };

        let paraRequest = new StandardRequest();
        paraRequest.setShopid(localStorage.shopId);
        paraRequest.setJsonstr(JSON.stringify(jsonStr));
        paraRequest.setSign(getSignStr(jsonStr));
        console.log(paraRequest);
        that.client.tmpClassDetailDel(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
          if (err == null) {
            console.log(StandardReply.getJsonrst());
            let res = JSON.parse(StandardReply);
            if (res.code === 0) {
              that.$message({
                showClose: true,
                message: "当前临时会员上课记录已删除！",
                type: "success",
              });
              that.getTableQuery();
            } else {
              that.$message.error(res.memo + ',错误代码：' + res.code);
            }
          } else {
            let res = err;
            that.$message.error(res.message + ',错误代码：' + res.code);
            console.log(res);
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    // 获取心率带下拉菜单
    getSelectHrSensors(row) {
      let that = this;
      that.loading = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        UuUserId: row.uu_user_id
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.selectHrSensors(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.loading = false;
            if (res.rs) {
              that.panel.bindList = res.rs;
              let HrTypeText = "";
              res.rs.map(function (item, i) {
                HrTypeText = item.hr_type == 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(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //会员绑定心率带
    bandToMember(row) {
      let that = this;
      // 未到用户不能绑心率带
      if (row.status == 2) {
        row.sn = 0;
        that.$message.error("会员未到不能绑定心率带");
        return false;
      }
      let obj = this.panel.bindList.find((item) => {
        return item.HrId === row.sn;
      });

      const jsonStr = {
        shopId: localStorage.shopId,
        UuCrId: row.uu_cr_id,
        sn: obj.sn
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.bindHrSensor(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.$message({
              showClose: true,
              message: "心率带绑定成功！",
              type: "success",
            });
            // table 重载
            that.getTableQuery();
            // 重置心率带可选列表
            // that.getSelectHrSensors();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //正式会员设备回收
    sensorRetrieve(row) {
      let that = this;
      let text = "";
      if (this.$route.query.FinishClass == 2) {
        text = "当前上课种是否回收用户" + row.user_name + "的心率设备？(回收将重置用户的上课成绩)";
      } else {
        text = "是否回收用户" + row.user_name + "的心率设备？";
      }
      this.$confirm(text, "回收操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        const jsonStr = {
          shopId: localStorage.shopId,
          UuCrId: row.uu_cr_id,
          sn: row.sn
        };
        let paraRequest = new StandardRequest();
        paraRequest.setShopid(localStorage.shopId);
        paraRequest.setJsonstr(JSON.stringify(jsonStr));
        paraRequest.setSign(getSignStr(jsonStr));
        console.log(paraRequest);
        that.client.unBindHrSensor(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
          if (err == null) {
            console.log(StandardReply.getJsonrst());
            let res = JSON.parse(StandardReply);
            if (res.code === 0) {
              that.$message({
                showClose: true,
                message: "心率带" + row.sn + "回收成功！",
                type: "success",
              });
              // table 重载
              that.getTableQuery();
              // 重置心率带可选列表
              // that.getSelectHrSensors();
            } else {
              that.$message.error(res.memo + ',错误代码：' + res.code);
            }
          } else {
            let res = err;
            that.$message.error(res.message + ',错误代码：' + res.code);
            console.log(res);
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消回收",
        });
      });
    },
    //临时会员设备回收
    sensorTempRetrieve(row) {
      let that = this;
      if (this.FinishClass == 2) {
        that.$message.error("请删除临时会员后重新添加");
      } else {
        that.$message.error("临时会员无法替换心率带");
      }
    },
    // 提交单人
    submitFullMember(row) {
      let begin_time = parseInt(new Date().valueOf() / 1000);
      let duRs = [];
      if (!row.sn && row.is_online == 0) {
        this.$message.error(row.user_name + "没有绑定心率带");
        return false;
      }
      // 拼装上课人员信息
      duRs[0] = {
        sn: row.sn,
        group_no: row.group_no, //0不分队 1蓝队 2红队 3黄队
        begin_time: begin_time,
        name: row.user_name,
        head: row.headurl,
        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.is_tmp_user,
        is_private: row.is_private,
        isOnline: parseInt(row.is_online),
      };
      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);
        }
      });
    },
    clearForm() {
      // clear
      this.dialogCoachValue = [];
    },
    // 查询按钮
    query() {
      let that = this;
      that.searchBtnStatus = true;
      let totalTime = 2;
      let clock = window.setInterval(() => {
        totalTime--;
        if (totalTime < 0) {
          totalTime = 2;
          that.searchBtnStatus = false;
        }
      }, 1000);
      this.getTableQuery();
      this.$message.success("查询完毕");
    },
    goBack() {
      this.$router.push({
        path: "/classManage",
        query: {},
      });
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      that.BeginState = true;
      that.allTableData = [];
      that.tableData = [];
      that.recordsTotal = 0;

      const jsonStr = {
        shopId: localStorage.shopId,
        UUStdId: that.$route.query.StdId,
        name: that.panel.name,
        phone: that.panel.phone,
        start: that.panel.start,
        tableMax: that.pagination.pageItem
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipClassDetailQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.loading = false;

            if (res.rs) {
              // 没人不允许开课
              if (res.rs.length > 0) {
                // 全部预约 都是未到也不允许开课
                res.rs.map(function (item) {
                  // 只要有一个不是就放开
                  if (item.status != 2) {
                    that.BeginState = false;
                  }
                  if (item.is_online) {
                    item.is_online = item.is_online.toString();
                    item.IsOnlineState = item.is_online == 1 ? true : false;
                  } else {
                    item.IsOnlineState = false;
                  }
                });
              }
              that.allTableData = res.rs;
              that.recordsTotal = res.pagecount * that.pagination.pageItem;
              // 设置分页数据
              that.setPagination();
            } else {
              that.allTableData = [];
              that.recordsTotal = 0;
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 设置分页数据
    setPagination() {
      // 分页属性
      let that = this;
      that.pagination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
      that.draw = that.pagination.pageItem;
      // that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pagination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pagination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (let 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) {
      if (
          column == "0001-01-01T08:05:43+08:05" ||
          column == "0001-01-01T00:00:00Z"
      ) {
        return "未预约";
      } else if (column == "") {
        return "非预约方式";
      } else {
        return nonTfmtDate(column, 11);
      }
    },
    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 "";
    },
  },
  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_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 {
  left: 10%;
}

/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__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>
