<template>
  <div class="d-flex" style="flex-direction: column;height: 100%;overflow-y: auto">
    <common-header/>
    <div class="wrapper flex-1">
      <div class="main">
        <div class="d-flex flex-between flex-v-mid m-nav ph25">
          <h3 class="font-size-18 color-19">系统消息</h3>
<!--          <button type="button">一键阅读</button>-->
        </div>
        <h3 class="mt45 m-title">系统消息</h3>
        <div v-if="messageList.length > 0">
          <ul class="m-list">
            <li v-for="item in messageList">
              <div class="d-flex">
                <h3 class="font-size-14 color-19">{{item.mc_title}}</h3>
                <h4 class="ml10 font-size-12 color-803">{{item.create_time}}</h4>
              </div>
              <div class="mt7 content font-size-14 color-19" v-html="item.mc_content">
              </div>
            </li>
          </ul>
          <div class="footer">
            <div
                style="height: 50px; position: relative; margin: 0 auto"
            >
              <el-pagination
                  background
                  layout="total,prev, pager, next"
                  :total="total"
                  style="position: absolute; top: 0; right: 0"
                  @current-change="handleCurrentChange"
                  :page-size="limit"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div v-else class="pv20">
          <div class="no-data m-0"></div>
          <h4 class="mt10 font-size-16 color-1 text-center">暂无消息！</h4>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import {message} from "@/pages/message/api.js";
import CommonHeader from "@/components/CommonHeader/index.vue";
export default {
  name: "message",
  components: {
    CommonHeader
  },
  data() {
    return {
      messageList:[],
      limit:'10',
      total: 0,
      cur_page: 1,
    }
  },
  methods:{
    getMes() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
      };

      message(data).then((res) => {
        this.messageList = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getMes();
    },

  },
  mounted() {
    this.getMes();
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
</style>
<style lang="scss" scoped>
.wrapper{
  width: 100%;
  min-height: 800px;
  background:linear-gradient(72deg,rgba(0,163,255,0.00) 18%, rgba(221,254,238,0.57) 64%, rgba(255,247,228,0.89) 100%);
  padding-top: 10px;
}
.main {
  width: 1650px;
  margin: 0 auto;
}
.m-nav{
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 1px 10px rgba(17,46,74,0.10);
  button{
    width: 104px;
    height: 32px;
    background: #00a3ff;
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
    text-align: center;
  }
}
.m-title{
  width: 100%;
  height: 42px;
  background:rgba(0,163,255,0.05);
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  color: #171721;
  text-align: center;
  line-height: 42px;
}
.m-list{
  li{
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(161,153,168,0.18);
    padding: 10px 0 20px 35px;
    &+li{
      margin-top: 12px;
    }
    &:first-child{
      border-radius: 0 0 12px 12px;
      padding-top: 35px;
    }
    .content{
      display: inline-block;
      min-width: 430px;
      max-width: 856px;
      padding: 6px 0 6px 15px;
      background: #f5f5fa;
      border-radius: 19px 19px 19px 0;
    }
  }
}
.footer{
  width: 100%;
  margin-top: 50px;
}
</style>