<template>
  <!-- 未读公告 -->
  <div id="read-wrap">
    <a-table
      ref="table"
      :pagination="{
        total:total,
        'show-less-items':true,
        'show-quick-jumper':true,
        'onChange':onPageChange,
        'hideOnSinglePage':true
      }"
      :rowKey="(record,index)=>{return record.id}"
      :showHeader="false"
      :columns="columns"
      :dataSource="dataSource"
      :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">

      <template slot="content" slot-scope="text, record">
        <div class="table-bar">
          <h2>
            <span class="tit">{{ record.noticeTitle }}</span>
            <div class="tit-left">
              <!-- <a-avatar size="small" :src="record.avatar" class="antd-pro-global-header-index-avatar" /> -->
              <span>{{ record.createBy }}</span>
              <span class="time">{{ record.createTime }}</span>

            </div>
          </h2>
          <p>
            {{ record.noticeContent }}
          </p>
        </div>
      </template>

    </a-table>
  </div>
</template>
<script type="text/ecmascript-6">

import { getUnreadList } from '@/api/index/index'

import './table.less'
export default {
  props: {

  },
  data() {
    return {
      selectedRowKeys: [],
      selectedRows: [],
      columns: [
        {
          title: '未读公告',
          dataIndex: 'content',
          key: 'content',
          scopedSlots: { customRender: 'content' }
        }
      ],
      dataSource: [],
      searchInput: null,
      total: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.getUnReadListArr()
  },
  methods: {
    getUnReadListArr() {
      getUnreadList(this.params).then((res) => {
        if (res.code === 200) {
          const resRows = res.rows
          resRows.forEach((item, index) => {
            item.key = index + 1
            item.id = index + 1
          })
          this.total = res.total
          this.dataSource = resRows
          // console.log('未读公告列表:', res)
        }
      })
    },
    // 选择行
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      // console.log('选择行this.selectedRowKeys: ', this.selectedRowKeys)
      // console.log('选择行this.selectedRows: ', this.selectedRows)
    },
    onPageChange(e) {
      // console.log(`e`, e)
    }

  }
}
</script>

<style lang='less'>

#read-wrap {
   .ant-table-placeholder{
    border: none;
  }
  .btn-list {
    margin: 30px 0 0 0;
    text-align: center;
  }

}
</style>
