<template>
  <div class="info-wrap">
    <el-dialog :close-on-click-modal="false" class="el-dialog-box" title="消息信息" :visible.sync="dialogVisible"
      width="80%" :before-close="handleClose">
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="标题" align="center">
          </el-table-column>
          <el-table-column prop="content" label="内容" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="用户名称" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPage"
            :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30,40]" :page-size="listQuery.pageSize"
            :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { searchMessagePageList } from '@/api/cs/csNavbar.js'
  export default {
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    methods: {
      openDialogVisible() {
        this.dialogVisible = true
        this.init()
      },
      async init() {
        try {
          let params = {
            ...this.listQuery
          }
          let res = await searchMessagePageList(params)
          console.log(res, '==------')
          let msg=res.msg
          if(res.code==200){
            this.total=res.total
            this.tableData=res.rows
          }else{
             this.$message.error(msg)
          }
        } catch (err) {
          this.$message.error(err.msg)
        }
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.init()
      },
      // 点击那一页
      handleCurrentPage(val) {
        this.listQuery.pageNum = val
        this.init()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .info-wrap {
    .pagination-box {
      padding: 20px 0;
    }
  }
</style>
