<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <div slot="header" class="clearfix">
        <div class="inform-title">消息通知</div>
        <div class="inform-header">
          <el-input placeholder="请输入时间" v-model="inquireValue">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" @click="inquire">查询</el-button>
        </div>
      </div>
      <div class="inform-body">
        <div class="state">
          <div class="left">
            <el-button
              size="small"
              @click="read($event, index)"
              v-for="(item, index) in reads"
              :key="item"
              :class="className[index]"
              >{{ item }}</el-button
            >
          </div>
          <div class="right">
            <el-button type="primary" size="small" @click="allRead"
              >一键已读</el-button
            >
          </div>
        </div>
        <div class="inform-table">
          <el-table
            :data="data"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            :cell-style="rowbg"
            :row-click="clickData"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column
              prop="title"
              label="标题"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  class="yuan"
                  v-show="scope.row.readFlag == 0 ? true : false"
                ></span>
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="content" align="center" label="消息">
            </el-table-column>

            <el-table-column
              prop="createTime"
              align="center"
              label="时间"
              width="400"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作"
              width="150"
            >
              <template slot-scope="scope">
                <span
                  @click="handleInfo(scope.$index, scope.row)"
                  class="operate"
                  style="color: #296de3; cursor: pointer"
                >
                  查看
                </span>
                <el-dialog
                  title="通知详情"
                  :visible.sync="infoShow"
                  :close-on-click-modal="false"
                  custom-class="info"
                >
                  <h3>标题:</h3>
                  <span>
                    {{ info.title }}
                  </span>
                  <h3>消息:</h3>
                  <span style="padding: 10px 20px 20px">{{
                    info.content
                  }}</span>
                  <h3>时间:</h3>
                  <span>{{ info.createTime }}</span>
                </el-dialog>
                <span
                  @click="handleDelete(scope.$index, scope.row)"
                  class="operate"
                  style="color: #296de3; cursor: pointer"
                  v-show="scope.row.readFlag == 0 ? false : true"
                >
                  删除
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            current-page.sync="1"
            :page-size="8"
            layout="prev, pager, next, jumper"
            :total="Data.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Inform",
  data() {
    return {
      reads: ["全部", "未读", "已读"],
      className: ["active", "", ""],
      inquireValue: "",
      data: [], // 当前页面显示的数据
      Data: [], // 分页器显示的总数据
      tableData: [], // 请求的总数据
      currentPage: 1,
      infoShow: false,
      info: {
        title: "",
        content: "",
        createTime: "",
      },
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转到";
    this.dataList();
  },
  methods: {
    dataList() {
      this.API.systemnotice.systemnoticeList().then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        let number = 0;
        this.tableData.forEach((item) => {
          if (item.readFlag == 0) {
            number += 1;
            this.$store.dispatch("inform/setreadFlag", number);
          } else {
            this.$store.dispatch("inform/setreadFlag", "");
          }
          item.createTime = item.createTime.replace("T", " ");
        });
        this.Data = this.tableData;
        this.handleCurrentChange(1);
      });
    },
    // 查询
    inquire() {
      console.log(111);
      this.Data = this.Data.filter((item, index) => {
        return item.createTime.includes(this.inquireValue);
      });
      this.handleCurrentChange(1);
    },
    // 已读未读
    read($event, index) {
      this.className = this.className.map((item) => (item = ""));
      this.className[index] = "active";

      if ($event.target.innerText == "全部") {
        this.Data = this.tableData;
      } else if ($event.target.innerText == "已读") {
        this.Data = this.tableData.filter((item) => {
          return item.readFlag == 1;
        });
      } else if ($event.target.innerText == "未读") {
        this.Data = this.tableData.filter((item) => {
          return item.readFlag == 0;
        });
      }
      this.handleCurrentChange(1);
    },
    // 查看详情
    handleInfo(index, row) {
      console.log(row);
      this.info = {
        title: row.title,
        content: row.content,
        createTime: row.createTime,
      };
      if (row.readFlag == 0) {
        this.API.systemnotice.systemnoticeRead([row.id]).then((res) => {
          console.log(res);
          this.dataList();
        });
      }
      this.infoShow = true;
    },
    // 一键已读
    allRead() {
      let ids = [];
      this.tableData.forEach((item) => {
        if (item.readFlag == 0) {
          ids.push(item.id);
        }
      });
      console.log(ids);
      if (ids) {
        this.API.systemnotice.systemnoticeRead(ids).then((res) => {
          console.log(res);
          this.dataList();
        });
      }
    },
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    },

    handleCurrentChange(val) {
      this.currentPage = this.val;
      this.data = this.Data.slice((val - 1) * 8, val * 8);
      // console.log(`当前页: ${val}`);
    },

    clickData(row, column, event) {
      console.log(1111);
      console.log(row, column, event);
    },
    //删除通知
    handleDelete(index, row) {
      let ids = [row.id];
      console.log(ids);
      this.$confirm("确认删除通知？")
        .then((_) => {
          this.API.systemnotice.systemnoticeDelete(ids).then((res) => {
            console.log(res);
          });
          this.dataList();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inform-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
    .inform-header {
      display: flex;
      margin-right: 29px;
      .el-button {
        margin-left: 9px;
        background-color: rgba(41, 109, 227, 1);
      }
    }
  }
  .inform-body {
    .state {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 33px 29px 34px 33px;
      .active {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
      }
      .right {
        .el-button {
          background-color: rgba(41, 109, 227, 1);
        }
      }
    }
    .inform-table {
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
        }
        tr {
          height: 64px;
          .yuan {
            background-color: rgba(212, 48, 48, 1);
            border-radius: 50%;
            display: inline-block;
            width: 8px;
            height: 8px;
          }
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
/deep/ .info.el-dialog {
  box-shadow: none;
  margin: 200px 0 0 700px !important;
  width: 700px !important;
  .el-dialog__header {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    .el-dialog__title {
      display: flex;
    }
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    h3 {
      text-align: left;
    }
    span {
      text-align: left;
      padding: 10px 20px 20px;
    }
  }
}
</style>>
