<template>
  <div style="margin-bottom: 20px;">
    <Card :padding="30" style="height: 258px;width: 796px;">
      <p slot="title">
        <Icon type="ios-film-outline"></Icon>
        通知
      </p>
      <a href="#" slot="extra" @click.prevent="toNoticeList">
        <Icon type="ios-loop-strong"></Icon>
        更多
      </a>
      <ul>
        <li v-for="item in dataList" style="margin-bottom: 8px;">
          <p @click.prevent="showNotice(item)" href="#" style="cursor:pointer">
            <span style="float: left">{{ item.title }}</span>
            <span style="float: right">{{ item.noticeTime? item.noticeTime: item.createTime }}</span>
          </p>
        </li>
      </ul>
    </Card>
    <noticeUserEdit ref="noticeUserEdit"  :show.sync="showModal" :value="modalParams" @reload-data="reloadData"></noticeUserEdit>
  </div>
</template>

<script>
  import { getNoticeUserPage, getNoticeUserList } from './noticeUser-api'
  import noticeUserEdit from './noticeUser-modal.vue'
  let $this
  export default {
    name: 'noticeCard',
    components: {
      noticeUserEdit,
    },
    data () {
      return {
        showModal: false,
        modalParams: {},
        searchForm: {},
        pageNo: 1,
        pageSize: 5,
        dataList: [],
        loading: true,
        sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
        getList: getNoticeUserList,
      }
    },
    methods: {
      toNoticeList () {
        this.$router.push({
          name: 'my-notice-list'
        })
      },
      showNotice (notice){
        this.showModal = true;
        this.modalParams = {title:'查看',flag:'view',bean:notice};
      },
      reloadData () {
        //表格加载中效果
        this.loading = true
        //处理表单查询参数及分页
        let page_params = { 'pageSize': this.pageSize, 'pageNo': this.pageNo }
        let params = Object.assign({}, page_params, this.searchForm) // 这样不会改变原对象
        params.userId = this.$store.state.user.userId
        params.readState = 0
        getNoticeUserPage(params).then(res => {
          if (res.data.result.datas && res.data.result.datas.length > 0) {
            this.dataList = res.data.result.datas
          } else {
            this.dataList = []
          }
          this.loading = false
        }).catch(err => {
          this.dataList = []
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
    },
    mounted () {
      this.reloadData()
      $this = this
    },
    created () {
    }
  }
</script>

<style>

</style>
