import React from 'react';
import { Modal } from 'antd';
import { WeaTools } from 'ecCom';
import './style/index';

class WeaBirthday extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            birthdayInfo: { bgimg: '', curdate: '', congratulation: '', textcolor: '', usercolor: '', userlist: [] },
        };
    }

    componentWillMount() {
        const date = new Date();
        const today = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        const __date = WeaTools.ls.getStr('birthday-date');
        if (today != __date) {
            WeaTools.callApi('/api/portal/plugin/birthdayinfo', 'POST', {}).then((result) => {
                if (result.userlist && result.userlist.length) {
                    this.setState({
                        visible: true,
                        birthdayInfo: result,
                    });

                    WeaTools.ls.set('birthday-date', today);
                    setTimeout(() => this.setState({ visible: false }), 14 * 1000);
                }
            });
        }
    }

    render() {
        const { visible, birthdayInfo } = this.state;
        const { bgimg, curdate, congratulation, textcolor, usercolor, userlist } = birthdayInfo;

        return (
            <Modal
              wrapClassName="birthday-modal"
              visible={visible}
              title="生日提醒"
              width="499px"
              footer=""
              onOk={() => this.setState({ visible: false })}
              onCancel={() => this.setState({ visible: false })}
            >
                <div className="birthday-content" style={{ background: `url(${bgimg}) center center` }}>
                    <div className="birthday-congratulation" style={{ color: `#${textcolor}` }}>
                        <div className="birthday-congratulation-content" dangerouslySetInnerHTML={{ __html: congratulation }} />
                        <div className="birthday-congratulation-date" style={{ color: `${usercolor}` }}>{curdate}</div>
                    </div>
                    <div className="birthday-users" style={{ color: `#${textcolor}` }}>
                        {
                            userlist.map((item, index) => (
                                    <div key={index} className="birthday-user">
                                        <div className="birthday-user-lastname">{item.lastname}</div>
                                        <div className="birthday-user-detial">{item.detialInfo}</div>
                                    </div>
                                ))
                        }
                    </div>
                </div>
            </Modal>
        );
    }
}

export default WeaBirthday;
