import { Component } from '@angular/core' ; import * as distanceInWordsToNow from 'date-fns/distance_in_words_to_now' ; import { NzMessageService } from 'ng-zorro-antd' ; import { NoticeItem , NoticeIconList } from '@delon/abc' ; /**
 * 菜单通知
 */ @ Component ( { selector : 'header-notify' , template : `
  <notice-icon
    [data]="data"
    [count]="count"
    [loading]="loading"
    (select)="select($event)"
    (clear)="clear($event)"
    (popoverVisibleChange)="loadData()"></notice-icon>
  ` , } ) export class HeaderNotifyComponent { data : NoticeItem [ ] = [ { title : '通知' , list : [ ] , emptyText : '你已查看所有通知' , emptyImage : 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg' , clearText : '清空通知' , } , { title : '消息' , list : [ ] , emptyText : '您已读完所有消息' , emptyImage : 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg' , clearText : '清空消息' , } , { title : '待办' , list : [ ] , emptyText : '你已完成所有待办' , emptyImage : 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg' , clearText : '清空待办' , } , ] ; count = 5 ; loading = false ; constructor ( private msg ) { } updateNoticeData ( notices ) { const data = this . data . slice ( ) ; data . forEach ( i => ( i . list = [ ] ) ) ; notices . forEach ( item => { const newItem = { ... item } ; if ( newItem . datetime ) newItem . datetime = distanceInWordsToNow ( item . datetime , { locale : ( window as any ) . __locale__ , } ) ; if ( newItem . extra && newItem . status ) { newItem . color = { todo : undefined , processing : 'blue' , urgent : 'red' , doing : 'gold' , } [ newItem . status ] ; } data . find ( w => w . title === newItem . type ) . list . push ( newItem ) ; } ) ; return data ; } loadData ( ) { if ( this . loading ) return ; this . loading = true ; setTimeout ( ( ) => { this . data = this . updateNoticeData ( [ { id : '000000001' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png' , title : '你收到了 14 份新周报' , datetime : '2017-08-09' , type : '通知' , } , { id : '000000002' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png' , title : '你推荐的 曲妮妮 已通过第三轮面试' , datetime : '2017-08-08' , type : '通知' , } , { id : '000000003' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png' , title : '这种模板可以区分多种通知类型' , datetime : '2017-08-07' , read : true , type : '通知' , } , { id : '000000004' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png' , title : '左侧图标用于区分不同的类型' , datetime : '2017-08-07' , type : '通知' , } , { id : '000000005' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png' , title : '内容不要超过两行字，超出时自动截断' , datetime : '2017-08-07' , type : '通知' , } , { id : '000000006' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg' , title : '曲丽丽 评论了你' , description : '描述信息描述信息描述信息' , datetime : '2017-08-07' , type : '消息' , } , { id : '000000007' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg' , title : '朱偏右 回复了你' , description : '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像' , datetime : '2017-08-07' , type : '消息' , } , { id : '000000008' , avatar : 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg' , title : '标题' , description : '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像' , datetime : '2017-08-07' , type : '消息' , } , { id : '000000009' , title : '任务名称' , description : '任务需要在 2017-01-12 20:00 前启动' , extra : '未开始' , status : 'todo' , type : '待办' , } , { id : '000000010' , title : '第三方紧急代码变更' , description : '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务' , extra : '马上到期' , status : 'urgent' , type : '待办' , } , { id : '000000011' , title : '信息安全考试' , description : '指派竹尔于 2017-01-09 前完成更新并发布' , extra : '已耗时 8 天' , status : 'doing' , type : '待办' , } , { id : '000000012' , title : 'ABCD 版本发布' , description : '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务' , extra : '进行中' , status : 'processing' , type : '待办' , } , ] ) ; this . loading = false ; } , 1000 ) ; } clear ( type ) { this . msg . success ( `清空了 ${ type }` ) ; } select ( res ) { this . msg . success ( `点击了 ${ res . title } 的 ${ res . item . title }` ) ; } }