import React from 'react';
import { Button } from 'antd';
import { WeaTools, WeaDialog } from 'ecCom';

import './style/';

class WeaVersion extends React.Component {
    state = { visible: false, data: {} };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onShow = this.onShow.bind(this);
    }

    render() {
        const { data } = this.state;
        const { logo, label1, cversion, label2, companyname, label3, website, msg1, msg2, msg3, msg4, label4, copyright } = data;

        return (
            <WeaDialog
              visible={this.state.visible}
              title="版本"
              icon="wevicon-wea-version"
              iconBgcolor="#a7adb5"
              style={{ width: 720, height: 420 }}
              zIndex={100}
              hasScroll={true}
              maskClosable={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                <div className="wea-version-body">
                    <div className="wea-version-logo">
                        <img src={logo} alt="" />
                    </div>
                    <div className="wea-version-split" />
                    <div className="wea-version-label1">
                        <span>{label1}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span>{cversion}</span>
                    </div>
                    <div className="wea-version-label2">
                        <span>{label2}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span>{companyname}</span>
                    </div>
                    <div className="wea-version-label3">
                        <span>{label3}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span>
                            <a href={`http://${website}`} target="_blank" style={{ color: '#21b4ff' }}>{website}</a>
                        </span>
                    </div>
                    <div className="wea-version-msg">
                        <p>{msg1}</p>
                        <p>{msg2}</p>
                        <p>{msg3}</p>
                        <p className="wea-version-warning">{msg4}</p>
                    </div>
                    <div className="wea-version-label4">
                        <span>{label4}</span><span>&nbsp;&nbsp;&copy;&nbsp;&nbsp;</span><span>{copyright}</span>
                    </div>
                </div>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onCancel}>确定</Button>);
        return buttons;
    }

    getVersion() {
        WeaTools.callApi('/api/portal/systemInfo/getVersion', 'GET', {}).then((result) => {
            const { data } = result;
            this.setState({ data });
        });
    }

    onCancel() {
        this.setState({ visible: false });
    }

    onShow() {
        this.setState({ visible: true });
        this.getVersion();
    }
}

export default WeaVersion;