<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" size="small" @click="dialogVisible1 = true">添加项目模板</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="check(scope.row)">查看</el-button> -->
                <!-- @click="goTo('/course?index=1&id=' + scope.row.courseId)" -->
                <el-button size="mini" type="primary" @click="deleteTemplate(scope.row.id)">删除</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>
    <el-dialog
      title="添加课程"
      :visible.sync="dialogVisible1"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      style="text-align: center"
      center
    >
      <div>
        <el-card class="box-card">
          <div slot="header" class="cardHead">
            <el-input
              v-model="searchClassName"
              placeholder="请输入需要添加的课程"
              @keypress.native.enter="Search"
            ></el-input>
            <el-button type="text" style="margin: 0 0 0 20px" @click="Search">搜索</el-button>
          </div>
          <div class="cardList">
            <el-radio-group v-model="checkList" v-if="courseList.length > 0">
              <div v-for="item in courseList" :key="item.courseId">
                <el-popover placement="top-start" trigger="hover">
                  <p style="max-width: 380px">课程名称: {{ item.title }}</p>
                  <p style="max-width: 380px">简介: {{ snippet(item.brief) }}</p>
                  <el-radio :label="item.courseId" slot="reference">
                    <span>课程名称：</span>
                    <span>{{ item.title }}</span>
                  </el-radio>
                </el-popover>
              </div>
            </el-radio-group>
            <div v-else>暂无数据</div>
          </div>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addTemplate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "../../components/tools/wangEnduit";

export default {
  components: { EditorBar },
  data() {
    return {
      tableHeight: 500,
      courseName: "",
      dialogVisible1: false,
      dialogVisible2: false,
      isClear: false,
      tableData: [],
      page: 1,
      total: 0,
      isLoading: false,
      isListAjax: false,
      tTitle: "",
      detail: "",
      templateD: {},
      courseList: [],
      searchClassName: "",
      checkList: "",
    };
  },
  methods: {
    //搜索获取课程
    Search() {
      this.checkList = "";
      let params = { t: this.searchClassName };
      this.ajax
        .get(this.$store.state.api + "getSearchCourse", params)
        .then((res) => {
          this.courseList = res.data[0];
          console.log(this.courseList);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleClose(done) {
      done();
    },
    change(val) {
      console.log(val);
    },
    //在method里面写方法
    snippet(value) {
      return value.replace(/<[^>]*>/g, "");
    },

    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;
    },
    init() {
      this.detail = "";
      this.tTitle = "";
      this.checkList = "";
    },
    addTemplate() {
      if (this.checkList === "") {
        this.$message.error("请选择作为模板得课程");
        return;
      }
      if (this.time()) {
        let params = [
          {
            cid: this.checkList,
            uid: this.$store.state.userInfo.uid,
          },
        ];
        this.ajax
          .post(this.$store.state.api + "addCourseTemplateAdmin", params)
          .then((res) => {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.init();
            this.getTemplate();
            this.dialogVisible1 = false;
          })
          .catch((err) => {
            this.$message.error("添加失败");
            console.error(err);
          });
      }
    },
    getTemplate() {
      this.isLoading = true;
      let params = { page: this.page };
      this.ajax
        .get(this.$store.state.api + "getCourseTemplateAdmin", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
          console.log(this.tableData);
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    //删除通知
    deleteTemplate(id) {
      let params = [{ nid: id }];
      this.$confirm("确定删除此模板吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajax
            .post(this.$store.state.api + "deleteCourseTemplateAdmin", params)
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              if (this.page != 1 && this.tableData.length == 1) {
                this.page--;
              }
              this.getTemplate();
            })
            .catch((err) => {
              this.$message.error("删除失败");
              console.error(err);
            });
        })
        .catch(() => {});
    },
    check(res) {
      this.dialogVisible2 = true;
      this.templateD = res;
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      this.Search();
      this.changeHeight();
      this.getTemplate();
    });
  },
};
</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;
}
.tian1 {
  margin-top: 15px;
}
.tian1 span {
  display: block;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.cont >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.cont >>> pre code {
  display: block;
}

/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}
.head {
  margin: 0 0 15px;
  font-size: 20px;
  border-bottom: 1px solid;
  /* height: 35px; */
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  justify-content: space-between;
  align-items: flex-end;
}
.name {
  /* margin-top: -30px; */
  font-size: 14px;
}
.cardList {
  font-size: 14px;
  height: 360px;
  overflow: auto;
}
.cardList div {
  margin-bottom: 18px;
}
.cardList div:last-child {
  margin-bottom: 0;
}
.cardHead {
  display: flex;
}
.box-card {
  /* width: 480px; */
}
</style>
