<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">模板管理管理</div>
      <div>
        <div style="margin: 15px 0; display: flex; justify-content: flex-end">
          <el-button type="primary">新建文档模板</el-button>
        </div>
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          :header-cell-style="{ background: '#f1f1f1', 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          :height="tableHeight"
          v-loading="isLoading"
        >
          <el-table-column prop="title" label="模板标题" min-width="25">
          </el-table-column>
          <el-table-column prop="time" label="创建时间" min-width="10">
          </el-table-column>
          <el-table-column label="操作" min-width="10">
            <template slot-scope="scope">
              <div class="pb_buttonBox">
                <el-button
                  size="mini"
                  type="primary"
                  @click="goTo('/course?index=1&id=' + scope.row.courseId)"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteCourse(scope.row.courseId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-if="!isListAjax && page"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 500,
      courseName: "",
      dialogVisible: false,
      tableData: [
        {
          title: "人工智能风车-项目概论",
          time: "2022-12-28",
        },
        {
          title: "智慧物流课程",
          time: "2022-12-28",
        },
        {
          title: "AI劳动实践通用课程",
          time: "2022-12-28",
        },
        {
          title: "AI造物(乐高版)",
          time: "2022-12-28",
        },
      ],
      page: 1,
      total: 0,
      isLoading: false,
      itemCount: 1,
      courseTitle: "",
      courseText: "",
      fileList: [],
      fileList1: [],
      homeworkList: [{ name: "" }],
      group: "",
      Juri: "",
      className: "",
      groupList: [],
      // JuriList: [],
      uploadLoading1: false,
      uploadLoading: false,
      updateId: "",
      groupA: "",
      isClear: true,
      dialogVisible1: false,
      dialogImageUrl: "",
      classX: "",
      classListX: [],
      isListAjax: false,
    };
  },
  methods: {
    changeHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      this.changeHeight();
    });
  },
};
</script>

<style scoped>
.tou {
  border-bottom: 1px solid #c9c9c9;
  height: 50px;
  font-size: 30px;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.student_page {
  margin-top: 15px;
}
</style>
