<template>
  <div class="context">
    <div class="panel">
      <h5>课程表管理</h5>
    </div>
    <div class="change">
      <el-button type="primary" @click="addLessonTable" size="mini">新增课程表</el-button>
      <el-button @click="copyLessonTable" size="mini">复制</el-button>
      <el-button @click="deleteLessonTable" size="mini">删除</el-button>
      <el-button @click="refreshQuery" :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)" class="" @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="data" label="日期">
          <template slot-scope="scope">
            <div class="rowHeight">
              <!--已过期-->
              <span class="readyTime" v-if="scope.row.diffweek < 0">
                {{ scope.row.begin_date }} 至 {{ scope.row.end_date }}
              </span>
              <!--已上线-->
              <span class="CurTime" v-if="scope.row.diffweek >= 0">
                {{ scope.row.begin_date }} 至 {{ scope.row.end_date }}
              </span>
              <!--当前进行-->
              <span v-if="scope.row.diffweek == 0">
              <i class="curIcon"/>
              <span class="runTime">{{ scope.row.begin_date }} 至 {{ scope.row.end_date }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程表名称" sortable>
        </el-table-column>
        <el-table-column prop="updated_at" label="最后编辑时间" :formatter="filterFmtDate" sortable>
        </el-table-column>
        <el-table-column prop="online" label="是否上线" width=120px sortable>
          <!--上线状态	0：不上线 1:下线-->
          <template slot-scope="scope">
            <el-switch :value="scope.row.online" :active-value="1" :inactive-value="0" active-color="#409EFF"
                       inactive-color="#D9D9D9" @input=changeLessonOnline($event,scope.row)>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.diffweek >= 0" @click="editLessonName(scope.row)">编辑名称</el-button>
            <el-button type="text" v-if="scope.row.diffweek >= 0" @click="editLessonDetail(scope.row)">修改课程</el-button>
            <el-button type="text" @click="previewThisWeek(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="复制课程表" :visible.sync="dialogCopyVisible" width="650px">
      <div>
        <span class="demonstration">选择发布日期(按周选取)</span>
        <br>
        <br>
        <el-input v-model="copyForm.name" style="width: 220px"/>
        <br>
        <br>
        <el-date-picker v-model="copyForm.begin_date" type="week" :onchange="changeCopyName()"
                        :picker-options="{'firstDayOfWeek': 1}"
                        format="yyyy 第 WW 周" placeholder="选择周" style="width: 220px"/>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmCopy">确定</el-button>
        <el-button @click="dialogCopyVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑名称" :visible.sync="dialogNameVisible" width="650px">
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="课程表名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmName">确定</el-button>
        <el-button @click="dialogNameVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="previewShow" width="1200px">
      <preview :preview-date="previewDate" :big-title="BigTitle" :small-title="smallTitle"></preview>
      <div class="dialogFooter">
        <el-button @click="previewShow = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Global from '../../Global.js'
import preview from '../../components/preview'

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

let qs = require('qs');
export default {
  data() {
    return {
      serachBtnStatus: false,
      previewShow: false,
      previewDate: {},
      BigTitle: '',
      smallTitle: '',
      dialogVisible: false,
      dialogCopyVisible: false,
      dialogNameVisible: false,
      dialogdata: [],
      dialogValue: [],
      start: 0,
      draw: 1,
      // panel 配置项目
      multipleSelection: [],
      pageination: {
        pageItem: 100,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      form: {
        Id: '',
        name: '',
        week: '',
        wechat: 1,
        appoint: 1,
      },
      copyForm: {
        stb_id: '',
        name: '',
        begin_date: ''
      },
      tableData: [],
      tableRadio: [],
    }
  },
  mounted() {
    this.getTableQuery();
  },
  methods: {
    clickChange(item) {
      this.tableRadio = item
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //新增课程表
    addLessonTable() {
      this.$router.push({
        path: '/lessonTableManageEdit', query: {
          id: 0
        }
      });
    },
    //复制课程表
    copyLessonTable() {
      let that = this;
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      that.dialogCopyVisible = true;
      that.copyForm.name = that.tableRadio.name;
      that.copyForm.stb_id = that.tableRadio.stb_id;
      that.copyForm.begin_date = getDate(that.tableRadio.begin_date, 0, 0, 1);
    },
    changeCopyName() {
      let that = this;
      that.copyForm.name ="\'"+ that.tableRadio.name + "\'  "+ getDate(that.copyForm.begin_date, 0, 0, - 1).substring(5,10) + " 副本";
      // that.copyForm.name = that.tableRadio.name + "  "+ nonTfmtDate(that.copyForm.begin_date,10).substring(5,10) + " 副本";
      console.log(that.copyForm.begin_date);
    },
    //确认复制课程表
    confirmCopy() {
      let that = this;

      if (!that.copyForm.begin_date) {
        that.$message.error('没有选择发布周期');
        return false
      }

      const jsonStr = {
        shopId: localStorage.shopId,
        stbId: that.copyForm.stb_id,
        name: that.copyForm.name,
        incomingDate: nonTfmtDatetoLength(that.copyForm.begin_date, 10)//对应日期 字符串 年-月-日 格式,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicCopy(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'
            });
            this.dialogCopyVisible = false;
            this.getTableQuery();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 删除
    deleteLessonTable() {
      let that = this;
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      let row = that.tableRadio;

      if (row.diffweek < 0) {
        that.$message({
          showClose: true,
          message: '已过期的课程表不可删除',
          type: 'error'
        });
        return false
      }

      this.$confirm('此操作将永久删除该课程表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const jsonStr = {
          stbId: row.stb_id,
          status: 9,//9:删除
        };

        let paraRequest = new StandardRequest();
        paraRequest.setShopid(localStorage.shopId);
        paraRequest.setJsonstr(JSON.stringify(jsonStr));
        paraRequest.setSign(getSignStr(jsonStr));
        console.log(paraRequest);
        that.client.sTTBasicStatusEdit(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: '已取消删除'
        });
      });
    },
    //刷新按钮
    refreshQuery() {
      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('查询完毕');
    },
    //课程表上下线状态修改
    changeLessonOnline(e, row) {
      let that = this;
      const jsonStr = {
        stbId: row.stb_id,//
        online: e,//0：不上线 1:下线
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicOfflineEdit(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            let text = parseInt(e) == 1 ? '上线' : '下线';
            that.$message({
              showClose: true,
              message: '当前课程表已' + text,
              type: 'success'
            });
            // 重载列表
            that.getTableQuery();
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          row.online = 0;
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 编辑名称
    editLessonName(row) {
      this.form.name = row.name;
      this.form.stbId = row.stb_id;
      this.dialogNameVisible = true;
    },
    // 提交名称修改
    confirmName() {
      let that = this;
      if (!this.form.name) {
        this.$message.error('名称不能为空');
        return false
      }
      if (this.form.name.length < 3) {
        this.$message.error('名称不能小于3个字符');
        return false
      }
      if (this.form.name.length > 20) {
        this.$message.error('名称不能大于20个字符');
        return false
      }
      const jsonStr = {
        stbId: this.form.stbId,
        name: this.form.name,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicEdit(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'
            });
            this.getTableQuery();
            this.dialogNameVisible = false;
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    //修改课程表
    editLessonDetail(row) {
      console.log(row);
      this.$router.push({
        path: '/lessonTableManageEdit', query: {
          id: row.stb_id,
          name: row.name,
          week: getDate(row.begin_date, 0, 0, 1)
        }
      });
    },
    // 预览本周
    previewThisWeek(row) {
      let that = this;
      const jsonStr = {
        stbId: row.stb_id
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicPreview(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.BigTitle = row.name;
            that.smallTitle = row.begin_date + '至' + row.end_date;
            if (res.rs) {
              that.previewDate = res.rs;
              if (res.rs.sttpreviewclasslist) {
                // 前台排序
                that.previewDate.sttpreviewclasslist.sort((a, b) => a.class_index - b.class_index);//升序
                that.previewShow = true;
              }
            } else {
              that.$message.error('当前课程表为空');
            }
          } 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,
        online: -99,// 0：不上线 1：上线 -99：全部
        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.sTTBasicQuery(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.allTableData = res.rs;
              that.recordsTotal = res.rs.length;
            } else {
              that.allTableData = [];
              that.recordsTotal = 0;
            }
            // 设置分页数据
            that.setPagination();
          } 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.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();
    },
    // 自动排序
    sortChange(params) {
      console.log(params)
    },
    // 过滤时间
    filterFmtDate(value, row, column) {
      let that = this;
      return nonTfmtDate(column, 11);
    },
    // 过滤金额
    filterMoney(value, row, column) {
      let that = this;
      return parseFloat(column).toFixed(2);
    },
  },
  watch: {
    $route(to) {
      if (to.name == 'lessonManage') {
        this.getTableQuery();
      }
    },
  },
  components: {
    preview
  }
}
</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;
  padding-bottom: 60px;
}

.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 {
  float: right;
  margin-left: 10px;
}

.link {
  color: #03B1FF;
  text-decoration: underline;
}

.readyTime {
  width: 90%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border: 1px solid #FFC769;
  border-radius: 4px;
  background: #FFF0D6;
  text-indent: 14px;
}

.CurTime {
  width: 90%;
  height: 27px;
  line-height: 30px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border: 1px solid #3799FF;
  border-radius: 4px;
  background: #D9ECFF;
  padding: 3px 6px;
  text-indent: 14px;
}

.runTime {
  width: 90%;
  /*height: 30px;*/
  /*line-height: 30px;*/
  /*overflow: hidden;*/
  display: block;
  margin: 0 auto;
  border: 1px solid #3799FF;
  border-radius: 4px;
  background: #D9ECFF;
  padding: 3px 6px;
  text-indent: 14px;
}

.curIcon {
  position: relative;
  left: 4px;
  /*top: -34px;*/
  width: 24px;
  height: 24px;
  float: left;
  background: url("../../assets/img/lessonTable/star.png") top center no-repeat;
  background-size: 100% 100%;
}

.rowHeight {
  width: 220px;
  overflow: hidden;
  display: block;
  height: 35px;
  float: left;
  margin: 0;
}

/*ipad only*/
@media only screen and (max-width: 1366px) {
  .CurTime {
    width: 98%;
    font-size: 12px;
    text-align: left;
    text-indent: 3px;
    padding-left: 0;
    padding-right: 0;
  }

  .rowHeight {
    width: 100%;
  }

  .readyTime {
    width: 98%;
    font-size: 12px;
    text-align: left;
    text-indent: 3px;
  }

  .curIcon {
    left: 0
  }
}
</style>