ABC-hlwyy-PcSystem/src/pages/MessagePlatform/MessBox.jsx

import React from 'react';
import Message from "./Message.jsx";
import "antd/dist/antd.css";
import "../../assets/css/App.css";
import MessageDialog from './MessageDialog.jsx';
import headMes from "../../assets/images/header-message.png";
import headMes2 from "../../assets/images/header-message2.png";
import {Tooltip} from "antd";
class MessBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            messageCount: 0,
            dataSource:[],
            visible:true,
        }
    }

    componentWillUnmount() {
        if (this.messageTimer) {
            clearInterval(this.messageTimer);
            this.messageTimer = null;
        }
        this.setState = (state, callback) => {
            return;
        };
    }

    // 消息列表
    showMessage = (event) => {
        event.stopPropagation();
        this.messageRef.show();
    };

    /**
     * 消息定时器任务
     * @author changeBy: DYK
     * @param ref
     * @param stutus
     */
    onMessageRef = (ref) => {
        this.messageRef = ref;
        if (this.messageTimer) {
            clearInterval(this.messageTimer);
        }
        this.messageTimer = setInterval(() => {
            ref.recordData();
        }, 60000);
    };

    onMessageDialogRef = (ref) =>{
        this.onMessageDialog = ref
    }

    render() {
        let showMessagePopUp = window.sessionStorage ? window.sessionStorage.getItem("showMessagePopUp") : "Y";
        let content = "";
        let showMessagePopUpFlag="N";
        this.state.dataSource.map((item, index) => {
			if (item.showDialog == 'Y')  {
                showMessagePopUpFlag="Y";
            }
        })
        //头菜单
        if (this.props.position == "top") {
            content = (
                <span style={{ marginRight: "4px", cursor: "pointer", position: "relative" }} className="side-badge" onClick={this.showMessage}>
                    {/*changeBy: DYK*/}
                    <Message onRef={this.onMessageRef} handlerThis={this}></Message>
                    <span style={{
                        backgroundColor: "#ff00ff",
                        color: "#fff",
                        position: "absolute",
                        right: "-4px",
                        top: "-12px",
                        height: "16px",
                        lineHeight: "16px",
                        borderRadius: "50%",
                        width: "20px",
                        alignItems: "center",
                        justifyContent: "center",
                        padding: "12px",
                        fontSize: "12px",
                        display: this.state.messageCount && this.state.messageCount > 0 ? "flex" : "none"
                    }}>
                        {
                            this.state.messageCount && this.state.messageCount > 99 ? "99+" : this.state.messageCount
                        }
                    </span>
                    <MessageDialog dataSource={this.state.dataSource} visible={(this.state.visible) && (showMessagePopUpFlag!=="N") && showMessagePopUp !== "N"} onRef={this.onMessageDialogRef} handlerThis={this} />
                    {/*<span style={{ color: "#fff", }}>{this.state.localeProvider && this.state.localeProvider.MoreEditMessageNotification ? this.setMessage('MoreEditMessageNotification', 'descripts') : "消息提醒"} </span>*/}
                    <Tooltip title="消息提醒">
                     <img style={{width: "26px", height: "26px", marginRight: "10px"}} src={headMes}/>
                    </Tooltip>
                </span>
            )
        }
        else {
            //侧菜单
            content = (
                <span style={{ marginRight: "4px", cursor: "pointer", position: "relative" }} className="side-badge" onClick={this.showMessage}>
                    <Message onRef={this.onMessageRef} handlerThis={this}></Message>
                    <span style={{
                        backgroundColor: "#ff00ff",
                        color: "#fff",
                        position: "absolute",
                        right: "-4px",
                        top: "-12px",
                        // display: "flex",
                        height: "16px",
                        lineHeight: "16px",
                        borderRadius: "50%",
                        width: "20px",
                        alignItems: "center",
                        justifyContent: "center",
                        padding: "12px",
                        fontSize: "12px",
                        display: this.state.messageCount && this.state.messageCount > 0 ? "flex" : "none"
                    }}>
                        {
                            this.state.messageCount && this.state.messageCount > 99 ? "99+" : this.state.messageCount
                        }
                    </span>
                    <MessageDialog dataSource={this.state.dataSource} visible={(this.state.visible) && (showMessagePopUpFlag!=="N") && showMessagePopUp !== "N"} onRef={this.onMessageDialogRef} handlerThis={this} />
                    {/*<span style={{ color: "rgb(102, 102, 102)", }}>{this.state.localeProvider && this.state.localeProvider.MoreEditMessageNotification ? this.setMessage('MoreEditMessageNotification', 'descripts') : "消息提醒"} </span>*/}
                    <Tooltip title="消息提醒">
                     <img style={{width: "26px", height: "26px", marginRight: "20px"}} src={headMes2}/>
                    </Tooltip>
                </span>
            )
        }
        return content
    }
}
export default MessBox