/**
 * Created by geweimin on 17/3/23.
 */
import React from 'react';
import { autobind } from 'core-decorators';
import { Icon } from '../../../components/mxa';

export default class ReviseModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: this._dealDataSource(this.props.dataSource, this.props.fieldsData),
      isOpen: true
    };
  }

  @autobind
  _dealDataSource(dataSource, fieldsData) {
    const currentData = dataSource[0];
    const frontData = dataSource[1];
    const resultData = [];
    Object.keys(currentData).forEach((item, index) => {
      if (currentData[item] !== frontData[item]) {
        const field = fieldsData.filter((item1, index1) => {
          return item1.name === item;
        })[0];
        resultData.push([field.description + '的值从', frontData[item], '修改为：', currentData[item]]);
      }
    });
    return resultData;
  }

  @autobind
  _close() {
    this.setState({
      isOpen: false
    });
  }

  @autobind
  _open() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  @autobind
  _renderItem(item) {
    return (
      <div>
        <span>{item[0]}</span>
        <span style={{ color: '#40A5ED' }}>{item[1]}</span>
        <span>{item[2]}</span>
        <span style={{ color: '#40A5ED' }}>{item[3]}</span>
      </div>
    );
  }

  render() {
    const displayStyle = this.state.isOpen ? { width: 320 } : { width: 0 };
    const dataSource = this.state.dataSource;
    return (
      <div>
        <div className="reviseModal" style={displayStyle}>
          <div style={{ height: '100%' }}>
            <div style={{ height: '100%', background: '#FFF', border: '1px #ccc solid' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', height: 40, alignItems: 'center', background: '#FFF', borderBottom: '1px #ccc solid' }}>
                <span style={{ marginLeft: 10 }}>信息修改动态</span>
                <Icon className="closeBtn" type="right-circle" onClick={this._close} />
              </div>
              <div style={{ paddingTop: 20 }}>
                {dataSource && dataSource.length > 0 && dataSource.map((item, index) => {
                  return <div style={{ padding: 10 }}>{this._renderItem(item)}</div>;
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="openBtn" onClick={this._open}>
          <Icon type="file-text" style={{ fontSize: 20, color: '#d8d9dc' }} />
        </div>
      </div>

    );
  }
}
