<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">通知公告</div>
      <div>
        <el-button
          size="small"
          type="primary"
          style="position: absolute; right: 20px; top: 90px"
          @click="dialogVisible1 = true"
          >新建全站通知</el-button
        >
        <!-- <div>Banner管理</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%; margin-top: 70px"
          :height="tableHeight"
          v-loading="isLoading"
        >
          <el-table-column prop="title" label="通知标题" min-width="15">
          </el-table-column>
          <el-table-column
            prop="newscontent"
            label="通知内容"
            min-width="60"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                v-html="snippet(scope.row.newscontent)"
                class="DivOverflow"
              ></div>
              <div></div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="创建时间" min-width="20">
          </el-table-column>
          <el-table-column prop="do" label="操作" min-width="20">
            <template slot-scope="scope">
              <div class="pb_buttonBox">
                <el-button
                  size="mini"
                  type="primary"
                  @click="getNoticeDetail(scope.row)"
                  >查看详情</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteNotice(scope.row.newsid)"
                  >删除</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"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-main>

    <el-dialog
      title="添加全站通知"
      :visible.sync="dialogVisible1"
      width="550px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div>
        <div class="tian1">
          <span>通知标题</span>
          <el-input
            v-model="noticeTitle"
            style="width: 250px; margin: 15px 0px"
            placeholder="请输入通知标题"
          ></el-input>
        </div>
        <div class="tian1">
          <span>通知内容</span>
          <editor-bar
            v-model="detail"
            :isClear="isClear"
            @change="change"
          ></editor-bar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNotice">确认通知</el-button>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="查看通知"
      :visible.sync="dialogVisible2"
      width="60%"
      :before-close="handleClose"
      class="dialog_diy dialog_diyA"
      center
    >
      <div class="head">
        <span>{{ NoticeDeatail.title }}</span>
        <span class="name">{{ NoticeDeatail.time }}</span>
      </div>
      <div class="cont" v-html="NoticeDeatail.newscontent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  components: { EditorBar },
  data() {
    return {
      noticeTitle: "",
      isClear: false,
      detail: "",
      dialogVisible1: false,
      dialogVisible2: false,
      tableData: [
        {
          created_at: "2021-04-09T18:25:40.000Z",
          isRead: 2,
          newscontent:
            ' <span style="margin-left:1rem">\r\n            打造”规范+特色“模式。在保证学校劳动教育常\r\n            规课程开设的同时，鼓励各校结合自身优势与历史人\r\n            文资源，发展特色项目，形成全面普及、一校一特色\r\n            的良好局面。军埠口中心小学的”关爱母亲河“探究\r\n            体验、东夏庄小学的”萝卜种植“、望留中学的”剪\r\n            纸艺术“等主题特色鲜明，育人效果明显。</span\r\n          >\r\n          <span style="margin-left:1rem">\r\n            开发劳动教育课程。外国语学校和北门大街小学的\r\n            以“家乡的二十四节气”为主题的课程资源和活动指\r\n            导手册，向阳路小学的“强国+飞天”系列科技主题\r\n            劳动课程，潍城区实验小学的“板桥探究”体验探究\r\n            课程，利昌学校的“神奇的飞行器”科技制作课程，\r\n            潍坊三中的“印出中国心——3D打印设计”课程等一\r\n            系列富有时代感和地域特色的劳动教育课程，极大地\r\n            丰富了劳动教育课程资源。</span\r\n          >',
          newsid: "1f2b5064-94e6-4025-931f-8c1b0a8d70dd",
          newsidtype: null,
          num: 1,
          recipientid: "0",
          senderid: "0",
          time: "2021-04-09 14:25:40",
          title: "实践出真知，劳动最光荣",
        },
      ],
      isLoading: false,
      total: 0,
      page: 1,
      tableHeight: 500,
      NoticeDeatail: {},
    };
  },
  methods: {
    //在method里面写方法
    snippet(value) {
      return value.replace(/<[^>]*>/g, "");
    },
    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;
        }
      }
    },
    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表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    handleClose(done) {
      done();
    },
    change(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getNotice();
    },
    //获取通知
    getNotice() {
      this.isLoading = true;
      let params = { page: this.page };
      this.ajax
        .get(this.$store.state.api + "getNotice", 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);
        });
    },
    init() {
      this.detail = "";
      this.noticeTitle = "";
    },
    //添加通知
    addNotice() {
      // if (this.noticeTitle === "") {
      //   this.$message.error("请输入文章标题");
      //   return;
      // } else if (this.detail === "") {
      //   this.$message.error("请输入文章内容");
      //   return;
      // }
      // console.log(this.detail);
      // if (this.time()) {
      //   let params = [
      //     {
      //       t: this.noticeTitle,
      //       nc: this.detail.replace(/%/g, "%25"),
      //       s: 0,
      //       r: 0,
      //     },
      //   ];
      //   this.ajax
      //     .post(this.$store.state.api + "addNotice", params)
      //     .then((res) => {
      //       this.$message({
      //         message: "添加成功",
      //         type: "success",
      //       });
      //       this.init();
      //       this.getNotice();
      //       this.dialogVisible1 = false;
      //     })
      //     .catch((err) => {
      //       this.$message.error("添加失败");
      //       console.error(err);
      //     });
      // }
    },
    //删除通知
    deleteNotice(id) {
      // let params = [{ nid: id }];

      // this.$confirm("确定删除此通知吗?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.ajax
      //       .post(this.$store.state.api + "deleteNotice", params)
      //       .then((res) => {
      //         this.$message({
      //           message: "删除成功",
      //           type: "success",
      //         });
      //         if (this.page != 1 && this.tableData.length == 1) {
      //           this.page--;
      //         }
      //         this.getNotice();
      //       })
      //       .catch((err) => {
      //         this.$message.error("删除失败");
      //         console.error(err);
      //       });
      //   })
      //   .catch(() => {});
    },
    getNoticeDetail(id) {
      this.dialogVisible2 = true;
      this.NoticeDeatail = id;
      // let params = { nid: id };
      // this.ajax
      //   .get(this.$store.state.api + "getNoticeById", params)
      //   .then((res) => {
      //     this.dialogVisible2 = true;
      //     this.NoticeDeatail = res.data[0][0];
      //   })
      //   .catch((err) => {
      //     console.error(err);
      //   });
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      // this.getNotice();
      this.changeHeight();
    });
  },
};
</script>
  
<style scoped>
.DivOverflow {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tou {
  border-bottom: 1px solid #c9c9c9;
  height: 50px;
  font-size: 30px;
}
.tian1 {
  margin-top: 15px;
}
.tian1 span {
  display: block;
}
.head {
  font-size: 20px;
  border-bottom: 1px solid;
  /* height: 35px; */
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  justify-content: space-between;
}
.name {
  float: right;
  /* margin-top: -30px; */
  font-size: 14px;
  width: 200px;
}
.cont {
  font-size: 16px;
  line-height: 34px;
  text-indent: 2em;
}
.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;
}
.dialog_diyA >>> .el-dialog {
  min-width: 600px;
}
.dialog_diyA >>> .el-dialog__body {
  max-height: 750px;
  overflow: auto;
}
/* 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;
}
</style>