<template>
  <div class="context">
    <div class="panel">
      <h5>科目管理</h5>
    </div>
    <div class="change">
      <el-button type="primary" @click="addLesson" size="mini">新增课程</el-button>
      <el-button @click="lessonsMemberEdit" size="mini">增删课程会员</el-button>
      <el-button type="danger" @click="delList" size="mini">删除</el-button>
      <el-button type="success" @click="query" :disabled="serachBtnStatus" size="mini">刷新</el-button>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          is-horizontal-resize
          :default-sort="{prop: 'date', order: 'descending'}"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange"
          @current-change="clickChange"
      >
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template scope="scope">
            <span>{{ (start) + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="class_name" label="课程名称" width="120"/>
        <el-table-column prop="is_curr" label="是否跨店" width="110" align="center" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.is_curr!= 1">否</span>
            <span v-if="scope.row.is_curr == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="class_type" label="课程类型" width="110" align="center" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.class_type != 0">占用课时</span>
            <span v-if="scope.row.class_type == 0">不占课时</span>
          </template>
        </el-table-column>
        <el-table-column prop="consume_hour" label="消耗课时" width="110" align="center" sortable>
        </el-table-column>
        <el-table-column prop="top_limit" label="建议人数" width="120" align="center" sortable>
        </el-table-column>
        <el-table-column prop="wx_visible" label="微信可见" align="center" width="120">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.wx_visible"
                :active-value="1"
                :inactive-value="0"
                active-color="#409EFF"
                inactive-color="#D9D9D9"
                @change=changeWechat($event,scope.row)
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="class_color" label="课程颜色" width="110" align="center">
          <template slot-scope="scope">
            <el-color-picker
                :predefine="predefineColors"
                v-model="scope.row.class_color"
                @change="changeColor(scope.row.class_color,scope.row)"></el-color-picker>
          </template>
        </el-table-column>
        <el-table-column prop="memo" label="备注" width="180">
          <template slot-scope="scope">
                      <span v-if="scope.row.memo != null">
                        <el-popover
                            placement="top"
                            title="标题"
                            width="200"
                            trigger="hover"
                            :content="scope.row.memo">
                            <span slot="reference"
                                  v-if="scope.row.memo.length > 6">{{ scope.row.memo.substr(0, 6) }} ....</span>
                        </el-popover>
                        <span v-if="scope.row.memo.length <= 6">{{ scope.row.memo }}</span>
                        </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="ClassSelf.ClassId" label="操作" width="220px">
          <template slot-scope="scope">
            <el-button type="text" @click="editLesson(scope.row)">编辑课程</el-button>
            <el-button type="text" @click="viewLessonMember(scope.row)">查看会员</el-button>
          </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="dialogTitle" :visible.sync="dialogLesson" :width="form.btnType == 0? '450px':'450px'">
      <div>
        <div class="pull-left">
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="课程名称" :required="true">
              <el-input v-model="form.ClassName"></el-input>
            </el-form-item>
            <el-form-item label="消耗课时">
              <el-input-number v-model="form.ConsumeHour" :min="0" :max="99999" label="（天）"></el-input-number>
            </el-form-item>
            <el-form-item label="建议上课人数">
              <el-input-number v-model="form.TopLimit" :min="0" :max="99999" label="（天）"></el-input-number>
            </el-form-item>
            <el-form-item label="微信可见" v-if="form.btnType == 0">
              <el-switch
                  v-model="form.wxVisible"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9">
              </el-switch>
            </el-form-item>
            <el-form-item label="是否可选课">
              <el-switch
                  v-model="form.ClassType"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9">
              </el-switch>
            </el-form-item>
            <el-form-item label="是否跨店">
              <el-switch
                  v-model="form.isCurr"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
              >
                <!--:disabled="true"-->
              </el-switch>
            </el-form-item>
            <el-form-item label="课程颜色">
              <el-color-picker :predefine="predefineColors" v-model="form.ClassColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.Memo"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmAddLesson">确定</el-button>
        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditLesson">确定</el-button>
        <el-button size="small" @click="dialogLesson = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="增删课程会员" :visible.sync="dialogVisible" width="650px">
      <div class="dialogTitle">
        <span>基础功能</span>
      </div>
      <div>
        <el-transfer filterable v-model="trMemberValue" :data="trMemberData" :titles="['会员列表', '已加会员']"/>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmLessonMemberEdit">确定</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="课程会员" :visible.sync="dialogTableVisible" style="overflow-y: scroll">
      <el-table :data="gridData">
        <el-table-column property="user_name" label="姓名" width="200"></el-table-column>
        <el-table-column property="usercode" label="手机"></el-table-column>
        <el-table-column property="vip_type" label="会员类型">
          <template slot-scope="scope">
            <span v-if="scope.row.vip_type == 1">年费会员</span>
            <span v-if="scope.row.vip_type == 2">充值会员</span>
          </template>
        </el-table-column>
        <el-table-column property="exp_time" label="有效期" :formatter="filterFmtDate"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Global from '../../Global.js'
import {
  StandardRequest
} from "@/grpc/base_pb";

let qs = require('qs');
export default {
  data() {
    return {
      serachBtnStatus: false,
      dialogLesson: false,//新增课程
      dialogVisible: false,
      dialogTableVisible: false,
      dialogTitle: '',
      gridData: [],
      trMemberData: [],
      trMemberValue: [],
      allTableData: [],
      start: 0,
      draw: 1,
      // panel 配置项目
      panel: {
        usercode: '',
        username: '',
        compname: '',
        keyword: '',
        USERCODE: '',
        taskstatus: 99,
        tableData: [],
        allTableData: [],
        draw: 1,
        start: 0,
        recordsTotal: 0,
        limit: '10',
        multipleSort: false,
        loading: false,
        fileList: [],
        multipleSelection: [],
        detectedmac: '',
        options: [
          {value: 99, label: '全部'},
          {value: 1, label: '进行中'},
          {value: 2, label: '已完成'},
        ],
        time1: globalBt(),
      },
      form: {
        ClassName: "",
        ConsumeHour: 0,
        TopLimit: 0,
        ClassType: 0,
        wxVisible: 1,
        ClassColor: "#ffffff",
        teacherId: "",
        classId: "",
        isCurr: "",
        Memo: "",
      },
      multipleSelection: [],
      pageination: {
        pageItem: 10,//每页的条数
        pageoptions: pageOptions(),
        total: 10,
        pageIndex: 1,
      },
      tableData: [],
      tableRadio: [],
      predefineColors: [
        '#8ABFF7',
        '#73C1BC',
        '#ADE5C7',
        '#CBECF0',
        '#DCEDC8',
        '#EBF2DB',
        '#C9D1FD',
        '#C6ACF4',
        '#E2B5FA',
        '#E1BEE7',
        '#FFA5D9',
        '#F89A9A',
        '#F2B1AC',
        '#F8BBD0',
        '#FFCDD2',
        '#FCC66C',
        '#D6B9A7',
        '#D9D9C4',
        '#FCECBE',
        '#E9E9E9',
        '#FFA5FC',
        '#B7BEFF',
        '#91E5FF',
        '#97FFF8',
        '#A7FFB8',
        '#75FF65',
        '#FFFF94',
        '#FFE0AC',
        '#FFB770',
        '#FFCCB5'
      ]
    }
  },
  mounted() {
    this.panelSelect();
    this.getTableQuery();
  },
  methods: {
    clickChange(item) {
      this.tableRadio = item
    },
    // 新增课程
    addLesson() {
      this.form.btnType = 0; //新增
      // clear
      this.form.ClassName = '';
      this.form.ConsumeHour = 0;
      this.form.TopLimit = 0;
      this.form.wxVisible = 1;
      this.form.ClassColor = "#ffffff";
      this.form.Memo = "";
      this.dialogLesson = true;
      this.dialogTitle = '新增课程'
      this.panelSelect();
    },
    // 确认添加课程
    confirmAddLesson() {
      let that = this;
      if (!that.form.ClassName) {
        this.$message.error('错了哦，课程名称不能为空');
        return false
      }
      if (that.form.ClassName.length > 8) {
        this.$message.error('错了哦，课程名称字数超过8个字');
        return false
      }
      if (that.form.Memo) {
        if (that.form.Memo.length > 200) {
          this.$message.error('错了哦，备注字数超过200个字');
          return false
        }
      }

      const jsonStr = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        className: that.form.ClassName,
        isCurr: that.form.isCurr,
        consumeHour: that.form.ConsumeHour,
        topLimit: that.form.TopLimit,
        classType: that.form.ClassType,
        wxVisible: that.form.wxVisible,
        classColor: that.form.ClassColor,
        memo: that.form.Memo,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classAdd(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            // 关闭弹窗
            that.dialogLesson = false;
            // 重载列表
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: '添加课程成功！',
              type: 'success'
            });
            this.getTableQuery()
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 编辑
    editLesson(row) {
      let that = this;
      this.clearForm();
      this.form.btnType = 1; //编辑
      this.form.ClassName = row.class_name;
      this.form.ConsumeHour = row.consume_hour;
      this.form.TopLimit = row.top_limit;
      this.form.wxVisible = row.wx_visible;
      this.form.ClassColor = row.class_color;
      this.form.classId = row.class_id;
      this.form.ClassType = row.class_type;
      this.form.ShopId = row.shop_id;
      this.form.isCurr = row.is_curr;
      this.form.Memo = row.memo;
      this.dialogLesson = true;
      this.dialogTitle = '编辑课程'
    },
    //确认编辑课程
    confirmEditLesson() {
      let that = this;
      // checkNum
      if (!that.form.ClassName) {
        this.$message.error('错了哦，课程名称不能为空');
        return false
      }
      if (that.form.ClassName.length > 8) {
        this.$message.error('错了哦，课程名称字数超过8个字');
        return false
      }
      if (that.form.Memo) {
        if (that.form.Memo.length > 200) {
          this.$message.error('错了哦，备注字数超过200个字');
          return false
        }
      }

      const jsonStr = {
        shopId: localStorage.shopId,
        classId: that.form.classId,
        isCurr: that.form.isCurr,
        className: that.form.ClassName,
        consumeHour: that.form.ConsumeHour,
        topLimit: that.form.TopLimit,
        classType: that.form.ClassType,
        wxVisble: that.form.wxVisible,
        classColor: that.form.ClassColor,
        memo: that.form.Memo,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classEdit(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            // 关闭弹窗
            that.dialogLesson = false;
            // 重载列表
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: '课程编辑成功！',
              type: 'success'
            });
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 删除
    delList() {
      let that = this;
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      let row = that.tableRadio;

      const jsonStr = {
        classId: row.class_id,
        status: 9//状态9是删除
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.client.classStatusEdit(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: '已取消删除'
        });
      });
    },
    // 修改微信可见状态
    changeWechat(e, row) {
      let that = this;
      const jsonStr = {
        classId: row.class_id,
        wxVisible: e
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classWxVisibleEdit(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          let text = parseInt(e) == 1 ? '可见' : '不可见';
          if (res.code === 0) {
            that.$message({
              showClose: true,
              message: '当前用户微信已' + text,
              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);
        }
      })
    },
    // 改色
    changeColor(c, row) {
      let that = this;
      const jsonStr = {
        classId: row.class_id,
        classColor: c,//
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classColorEdit(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);
        }
      })
    },
    // 增删会员课程
    lessonsMemberEdit() {
      let that = this;
      let row = this.tableRadio;

      if (row.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      this.panelSelect();

      this.dialogVisible = true
      this.form.classId = row.class_id;
      that.trMemberValue = [];

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

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipUserSimpleQuery(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) {
              let userArray = [];
              res.rs.map(function (item) {
                userArray.push(item.uu_user_id)
              });
              that.trMemberValue = userArray;
            } else {
              return false;
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 确认课程会员增删
    confirmLessonMemberEdit() {
      let that = this;
      let userlist = that.trMemberValue.toString();

      const jsonStr = {
        classId: this.form.classId,
        UuUserIdList: userlist,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classVipEdit(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.dialogVisible = false;
            that.getTableQuery();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    clearForm() {
      // clear
      this.form.ClassName = '';
      this.form.ConsumeHour = 0;
      this.form.TopLimit = 0;
      this.form.wxVisible = 1;
      this.form.ClassColor = '';
      this.form.Memo = '';
    },

    //查看会员
    viewLessonMember(row) {
      let that = this;

      that.gridData = [];
      that.dialogTableVisible = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        classId: row.class_id,
        isAcross: -99//0：不跨店 1跨店  -99是全部
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipUserSimpleQuery(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) {
              this.gridData = res.rs
            } else {
              return false;
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 查询按钮
    query() {
      let that = this;
      this.getTableQuery();
      that.serachBtnStatus = true;
      let totalTime = 2
      let clock = window.setInterval(() => {
        totalTime--
        if (totalTime < 0) {
          totalTime = 2;
          that.serachBtnStatus = false;
        }
      }, 1000)
      this.$message.success('查询完毕');
    },
    // 加载选项
    panelSelect() {
      let that = this;
      that.trMemberData = [];
      const jsonStr = {
        shopId: localStorage.shopId,
        classId: -99,//代表查询全部
        isAcross: -99//0：不跨店 1跨店  -99是全部
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.vipUserSimpleQuery(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.trMemberData = turnResToOption(res.rs)
            } else {
              return false;
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;

      const jsonStr = {
        shopId: localStorage.shopId,
        classType: 1,//0:选课时不显示(显示午休/午餐的类似的课程) 1:选课显示
        start: that.start,
        tableMax: that.pageination.pageItem
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classQuery(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.allTableData = res.rs;
              that.recordsTotal = res.pagecount * that.pageination.pageItem;
            } else {
              that.allTableData = [];
              that.recordsTotal = 0;
            }
            // 设置分页数据
            that.setPaginations();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      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 (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) {
      let that = this;
      if (column == "0001-01-01T08:05:43+08:05" || column == "0001-01-01T00:00:00Z") {
        return '无有效期';
      } else {
        return nonTfmtDatetoLength(column, 10);
      }
    },
  },
  watch: {
    $route(to) {
      if (to.name == 'Lesson') {
        this.panelSelect();
        this.getTableQuery();
      }
    },
  },
}
</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;
}

.panel-body {
  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;
}

.dialogTitle {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  color: #000000;
  font-size: 18px;
  text-align: center;
}

.dialogTitle span {
  width: 169px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #3799FF;
  border-radius: 250px;
  font-size: 18px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
}

.dialogTitle em {
  float: none;
  font-style: normal;
  color: #3799FF;
  margin: 0;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 40px;
}

.dialogFooter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.dialogFooter button {
  margin-top: 50px;
}

.pull-left {
  width: 30%;
  float: left;
}

.pull-right {
  width: 70%;
  float: right;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 15px;
}

/deep/ .el-dialog .el-input__inner {
  min-width: 180px;
}

/*隐藏调色盘*/
.el-color-dropdown__main-wrapper {
  display: none !important;
}

/deep/ .el-color-dropdown__main-wrapper {
  display: none !important;
}
</style>
