<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="请输入时间">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary">查询</el-button>
        </div>
      </div>
      <div class="inform-body">
        <div class="state">
          <div class="left">
            <el-button
              size="small"
              @click="allRead($event, index)"
              v-for="(item, index) in read"
              :key="item"
              :class="className[index]"
              >{{ item }}</el-button
            >
          </div>
          <div class="right">
            <el-button type="primary" size="small">一键已读</el-button>
          </div>
        </div>
        <div class="inform-table">
          <el-table
            :data="data"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column
              prop="date"
              label="标题"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <span class="yuan"></span>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>

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

            <el-table-column
              prop="address"
              align="center"
              label="时间"
              width="400"
            >
            </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="tableData.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Inform",
  data() {
    return {
      read: ["全部", "未读", "已读"],
      className: ["active", "", ""],
      data: [],
      tableData: [
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.07.03 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.07.02 08:55:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.07.01 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 09:50:50",
        },

        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 10:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:55:50",
        },

        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 18:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.29 08:50:50",
        },

        {
          date: "续住通知",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.28 18:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
        {
          date: "续住通知",
          name: "王小虎",
          address: "2022.06.30 08:50:50",
        },
      ],
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转到";
    this.$store.state.itemPath = this.$route.path;
    this.handleCurrentChange(1);
  },
  methods: {
    allRead($event, index) {
      this.className = this.className.map((item) => (item = ""));
      this.className[index] = "active";
    },
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    },

    handleCurrentChange(val) {
      this.data = this.tableData.slice((val - 1) * 8, val * 8);
      // console.log(`当前页: ${val}`);
    },
  },
};
</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;
  }
}
</style>>
