import React from 'react';
import styles from './styles.less';
import badgeImg from '@/assets/leftmenu/badgeImg.png';
import router from 'umi/router';
import { connect } from 'dva';
import { Popover, Badge, Button, Modal } from 'antd';

function mapStateToProps({ InformationModel }) {
? ? return {
? ? ? ? InformationModel: InformationModel,
? ? };
}
@connect(mapStateToProps)
class Information extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? visible: false,
? ? ? ? ? ? unreadList: [],
? ? ? ? ? ? infoTitle: '',
? ? ? ? ? ? infoContent:'',

? ? ? ? };
? ? }
? ? //渲染前調用
? ? componentWillMount() { }

? ? //渲染后調用
? ? componentDidMount() {
? ? ? ? this.getunreadDatas();
? ? }
? ? //調用接口獲取未讀數據
? ? getunreadDatas() {
? ? ? ? let { dispatch } = this.props;
? ? ? ? let userid = localStorage.getItem('userid');
? ? ? ? let params = {
? ? ? ? ? ? id: userid,
? ? ? ? ? ? pageNum: 0,
? ? ? ? ? ? pageSize: 0
? ? ? ? }
? ? ? ? dispatch({ type: 'InformationModel/getunreadData', payload: { params: params, callback: this.unreadCallback.bind(this) } });
? ? }
? ? //接口回調方法
? ? unreadCallback(e) {
? ? ? ? this.setState({
? ? ? ? ? ? unreadList:e
? ? ? ? })
? ? }
? ? //查看詳情
? ? showInfo(e) {
? ? ? ? let { dispatch } = this.props;
? ? ? ? let userid = localStorage.getItem('userid');
? ? ? ? let params = {
? ? ? ? ? ? id:e.id,
? ? ? ? ? ? userId:userid,
? ? ? ? }
? ? ? ? //調用接口標記已讀
? ? ? ? dispatch({ type: 'InformationModel/getreadData', payload: { params: params, callback: this.readCallback.bind(this) } });
? ? ? ? this.setState({
? ? ? ? ? ? infoTitle:e.name,
? ? ? ? ? ? infoContent:e.text
? ? ? ? })
? ? }
? ? //標記接口回調函數
? ? readCallback(e){
? ? ? ? this.setState({
? ? ? ? ? ? visible: true,
? ? ? ? });
? ? ? ? //刷新列表
? ? ? ? this.getunreadDatas();
? ? }
? ? //顯示全部
? ? showAllInfo(){
? ? ? ? router.push({
? ? ? ? ? ? pathname: `/cs/InformationMoreList`,
? ? ? ? ? ? query: {
? ? ? ? ? ? },
? ? ? ? });
? ? }
? ? //彈框確認按鈕
? ? handleOk = e => {
? ? ? ? console.log(e);
? ? ? ? this.setState({
? ? ? ? ? ? visible: false,
? ? ? ? });
? ? };
? ? //彈框取消按鈕
? ? handleCancel = e => {
? ? ? ? console.log(e);
? ? ? ? this.setState({
? ? ? ? ? ? visible: false,
? ? ? ? });
? ? };

? ? render() {

? ? ? ? const content = (
? ? ? ? ? ? <div className={styles.infoTabs}>
? ? ? ? ? ? ? ? <div className={styles.infoList}>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? this.state.unreadList.map((item,index)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? return <div className={styles.infoRow} onClick={this.showInfo.bind(this,item)}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div className={styles.infoTitle}>{item.name}</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div className={styles.infoContent}>{item.text}</div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div className={styles.showAll}>
? ? ? ? ? ? ? ? ? ? <Button onClick={this.showAllInfo.bind(this)} className={styles.showAllBtn}>查看全部</Button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? );

? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? <div className={styles.allBox}>
? ? ? ? ? ? ? ? ? ? <Popover onMouseEnter={this.getunreadDatas.bind(this)} content={content} title="消息">
? ? ? ? ? ? ? ? ? ? ? ? <Badge count={this.state.unreadList.length} showZero>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src={badgeImg}></img>
? ? ? ? ? ? ? ? ? ? ? ? </Badge>
? ? ? ? ? ? ? ? ? ? </Popover>
? ? ? ? ? ? ? ? ? ? <Modal
? ? ? ? ? ? ? ? ? ? ? ? title={this.state.infoTitle}
? ? ? ? ? ? ? ? ? ? ? ? visible={this.state.visible}
? ? ? ? ? ? ? ? ? ? ? ? onOk={this.handleOk}
? ? ? ? ? ? ? ? ? ? ? ? onCancel={this.handleCancel}
? ? ? ? ? ? ? ? ? ? ? ? footer={null}
? ? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? ? ? <p>{this.state.infoContent}</p>
? ? ? ? ? ? ? ? ? ? </Modal>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </React.Fragment>
? ? ? ? );
? ? }
}
export default Information;