content: import React from 'react';
  import TabItem from '../TabItem';
  import Modal from 'react-bootstrap/lib/Modal';
  import Button from 'react-bootstrap/lib/Button';
  import {connect} from 'react-redux';
  import {getCustomOrder} from 'redux/modules/custom';
  import order from './order.png';
  
  // 订单
  @connect(state => ({
    customOrder: state.custom.customOrder
  }), {
    getCustomOrder
  })
  export default class Chance extends React.Component {
    static propTypes = {
      getCustomOrder: React.PropTypes.func,
      customOrder: React.PropTypes.object,
      tenantId: React.PropTypes.string,
      contractFlag: React.PropTypes.string
    };
  
    constructor(props) {
      super(props);
      this.state = {
        id: '',
        showModal: false
      };
    }
  
    componentDidMount() {
      this.props.getCustomOrder(this.props.tenantId);
    }
  
    close = () => {
      this.setState({ showModal: false });
    }
  
    open = (id) => {
      this.setState({
        id,
        showModal: true
      });
    }
  
    render() {
      const customOrder = this.props.customOrder || {};
      const info = customOrder.list || [];
  
      const styles = require('../ContactRecord/ContactRecord.scss');
  
      const orderStyles = require('./Order.scss');
      const Log = (props) => {
        return (
          <div className={styles.item} onClick={() => this.open(props.id)}>
            <span className={orderStyles.detail}>
              <span className={styles.label}>版本名称：</span>
              {props.version}
            </span>
            <br/>
            <span className={orderStyles.detail}>
              <span className={styles.label}>订单金额：</span>
              {props.amount}
            </span>
            <span className={orderStyles.detail}>
              <span className={styles.label}>订单总人数：</span>
              {props.totaluser}
            </span>
            <span className={orderStyles.detail}>
              <span className={styles.label}>已开票：</span>
              {props.invoicedamount}
            </span>
            <span className={orderStyles.detail}>
              <span className={styles.label}>已回款：</span>
              {props.paymentamount}
            </span>
            <br/>
            <span className={orderStyles.detail}>
              <span className={styles.label}>租用日期：</span>
              {props.rentduration}
            </span>
          </div>
        );
      };
  
      return (
        <div>
          <TabItem img={order} close title={`订单(${customOrder.total || 0})`} icon={this.props.contractFlag === '1'} iconClick={() => window.top._hack_tab('queryTenantContractChartListInit.action?auditFlag=0', 2003, '订单录入')}>
            <div className={orderStyles.items}>
              {info.map((item, index)=> {
                return <Log key={index} {...item}/>;
              })}
            </div>
          </TabItem>
          <Modal dialogClassName={orderStyles.model} bsSize="large" show={this.state.showModal} onHide={this.close}>
            <Modal.Header closeButton>
              <Modal.Title>订单详情</Modal.Title>
            </Modal.Header>
  
            <Modal.Body>
              <iframe className={orderStyles.iframe} src={`/tenantContractChartCheck.action?contractId=${this.state.id}&status=view`} frameBorder="0"></iframe>
            </Modal.Body>
  
            <Modal.Footer>
              <Button onClick={this.close}>关闭</Button>
            </Modal.Footer>
  
          </Modal>
        </div>
      );
    }
  }
  