<template>
  <a-card title="消息列表">
    <div class="extra" slot="extra" href="#" @click="readAll">全部已读</div>
    <a-list class="demo-loadmore-list" :loading="loading" item-layout="horizontal" :data-source="data">
      <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
        <a-spin v-if="loadingMore" />
        <a-button v-else @click="onLoadMore"> 获取更多 </a-button>
      </div>
      <a-list-item slot="renderItem" slot-scope="item,index">
        <a slot="actions" :class="['title', item.read_at !== '' ? 'active' : '']" @click="readed(item,index)">设置已读</a>
        <a-list-item-meta :description="item.content">
          <a slot="title" :class="['title', item.read_at !== '' ? 'active' : '']" >{{ item.title }}  <span style="font-size:90%;padding-left: 10px;">{{ item.created_at }}</span></a>
          <a-avatar v-if="item.read_at === ''" icon="sound" slot="avatar" style="color: #FFF; backgroundColor: #1890FF"></a-avatar>
          <a-avatar v-else slot="avatar" icon="sound"></a-avatar>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
import {
  getNoticeList,
  readNotice,
  readAllNotice
} from '@/api/notice'
export default {
  name: 'NoticeList',
  data () {
    return {
      loading: false, //
      loadingMore: false,
      showLoadingMore: true,
      data: [],
      page: 1
    }
  },
  created () {
    this.getList()
  },
  watch: {
    $route (to, from) {
      if (to.name === 'NoticeList') {
        this.data = []
        this.page = 1
        this.showLoadingMore = true
        this.loadingMore = false
        this.getList()
      }
    }
  },
  methods: {
    // 获取消息列表
    getList () {
      getNoticeList({ page: this.page }).then(res => {
        this.data = this.data.concat(res.data)
        this.loadingMore = false
        this.showLoadingMore = res.page.has_more
        this.$nextTick(() => {
          window.dispatchEvent(new Event('resize'))
        })
      }).catch(err => {
        this.$$notification.error(err)
      })
    },
    // 获取更多
    onLoadMore () {
      if (this.showLoadingMore) {
        this.page = this.page + 1
        this.loadingMore = true
        this.getList()
      }
    },
    // 消息已读
    readed (item, index) {
      readNotice(item.notification_id).then(res => {
        this.$notification.success({ message: '已读消息' })
        this.data[index].read_at = '----'
      }).catch(err => {
        this.$notification.error(err)
      })
    },
    // 消息全部已读
    readAll () {
      readAllNotice().then(res => {
        this.$notification.success({ message: '已读全部消息' })
        this.page = 1
        this.data = []
        this.showLoadingMore = true
        this.getList()
      }).catch(err => {
        this.$notification.error(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~ant-design-vue/lib/style/index';
.demo-loadmore-list {
  min-height: 500px;
}
.active {
  color: rgba(6, 6, 6, 0.45) !important;
}
.extra{
  cursor: pointer;
}
</style>
