import React from 'react';
import { Button } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaTop, WeaDialog } from 'ecCom';
import { addContentPath } from '../../util/pathUtil';
const getLabel = WeaLocaleProvider.getLabel;

class WeaVersion extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: false, data: {} };
  }

  componentWillMount() {
    const { display, visible } = this.props;
    if (display == 'page' || visible) {
      this.onLoad();
    }
  }

  componentWillReceiveProps(nextProps) {
    const { visible } = nextProps;
    if (visible) {
      this.onLoad();
    }
  }

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

    const Content = (
      <div className="wea-version-body">
        <div className="wea-version-logo">
          <img src={addContentPath(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">
              {website}
            </a>
          </span>
        </div>
        <div className="wea-version-msg">
          <p>{msg1}</p>
          <p>{msg2}</p>
          <p>{msg3}</p>
          <p className="wea-version-msg4">{msg4}</p>
        </div>
        <div className="wea-version-label4">
          <span>{label4}</span>
          <span>&nbsp;&nbsp;&copy;&nbsp;&nbsp;</span>
          <span>{copyright}</span>
        </div>
      </div>
    );

    if (display == 'page') {
      return (
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vhp9qi`}
          loading={loading}
          title={getLabel(567, '版本')}
          icon={<i className="icon-coms02-Version" />}
          iconBgcolor="#a7adb5"
          buttons={this.getButtons(display)}
        >
          {Content}
        </WeaTop>
      );
    }

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@prw27v`}
        visible={visible}
        loading={loading}
        title={getLabel(567, '版本')}
        icon="icon-coms02-Version"
        iconBgcolor="#a7adb5"
        style={{ width: style.width || 720, height: style.height || 400 }}
        zIndex={100}
        hasScroll={true}
        maskClosable={true}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
      >
        {Content}
      </WeaDialog>
    );
  }

  getButtons = (display) => {
    const buttons = [];
    buttons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ypp8ao`} type="primary" onClick={this.onDownload}>
        {getLabel(501149, '下载版本信息')}
      </Button>,
    );
    if (display != 'page') {
      buttons.push(
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wl6kxc`} type="primary" onClick={this.onCancel}>
          {getLabel(83446, '确定')}
        </Button>,
      );
    }
    return buttons;
  };

  onLoad = () => {
    this.setState({ loading: true });
    WeaTools.callApi('/api/portal/systemInfo/getVersion', 'GET').then((result) => {
      this.setState({ loading: false, data: result.data || {} });
    });
  };

  onDownload = () => {
    window.open(addContentPath('/api/system/license/downloadVersion'));
  };

  onCancel = () => {
    this.props.onShow(false);
  };
}

export default WeaVersion;