content: import React from 'react';
  import TabItem from '../TabItem';
  import Modal from 'react-bootstrap/lib/Modal';
  import Button from 'react-bootstrap/lib/Button';
  import RemarkForm from './RemarkForm';
  import Form from 'react-bootstrap/lib/Form';
  import {connect} from 'react-redux';
  import {getDetailRemark, addRemark} from 'redux/modules/salesChance';
  import ReadOnlyTextField from 'components/Form/Horizontal/ReadOnlyTextField';
  import record from './record.png';
  import { SubmissionError } from 'redux-form';
  
  // 备注
  @connect(state => ({
    remarkInfo: state.salesChance.remarkInfo
  }), {
    getDetailRemark,
    addRemark
  })
  export default class Remark extends React.Component {
    static propTypes = {
      getDetailRemark: React.PropTypes.func,
      remarkInfo: React.PropTypes.object,
      chanceId: React.PropTypes.string,
      addRemark: React.PropTypes.func,
      customerName: React.PropTypes.string,
      chanceInfo: React.PropTypes.object,
      updateLogInfo: React.PropTypes.func,
    };
  
    constructor(props) {
      super(props);
      this.state = {
        showModal: false,
        showDetail: false,
        spread: false,
        detail: {} // 详情
      };
    }
  
    componentWillMount() {
      this.props.getDetailRemark(this.props.chanceId);
    }
  
    getItems = () => {
      const {spread} = this.state;
      const remarkInfo = this.props.remarkInfo || {};
      const info = remarkInfo.list || [];
      if (!spread) { // 如果还没有展开，就截取前面几个
        return info.slice(0, 3);
      }
      return info;
    }
  
    close = () => {
      this.setState({ showModal: false });
    }
  
    open = () => {
      this.setState({showModal: true});
    }
  
    closeDetail = () => {
      this.setState({ showDetail: false });
    }
  
    openDetail = (props) => {
      this.setState({
        detail: props,
        showDetail: true
      });
    }
  
    submit = (data) => {
      const {chanceId} = this.props;
      return this.props.addRemark({
        'queryMap.remark': data.remark,
        'queryMap.sales_id': chanceId
      }).then((result) => {
        console.log(result);
        if (result.code === '0') {
          throw new SubmissionError(result.message);
        } else {
          this.close();
          this.props.getDetailRemark(chanceId);
          this.props.updateLogInfo();
        }
      });
    }
  
    toggle = () => this.setState({spread: !this.state.spread})
  
    render() {
      const info = this.getItems();
      const styles = require('./ContactRecord.scss');
      const remarkStyles = require('./Remark.scss');
  
      const Log = (props) => {
        return (
          <div className={styles.item} onClick={() => this.openDetail(props)}>
            <span className={styles.person}>
              <span className={styles.label}>操作人：</span>
              {props.username}</span>
            <span className={styles.depart}>
              <span className={styles.label}>渠道部门：</span>
              {props.channelname}</span>
            <br/>
            <span className={styles.content}>
              <span className={styles.label}>备注内容：</span>
              {props.remark}</span>
            <br/>
            <span className={styles.time}>
              <span className={styles.label}>操作时间：</span>
              {props.remarktime}</span>
          </div>
        );
      };
      const detail = this.state.detail || {};
      const chanceInfo = this.props.chanceInfo;
      const {customer_name: customerName, name} = chanceInfo.basicInfo || {};
      const detailForm = (
        <Form horizontal>
          <ReadOnlyTextField label="客户名称" value={customerName}/>
          <ReadOnlyTextField label="机会名称" value={name}/>
          <ReadOnlyTextField textarea label="备注内容" value={detail.remark}/>
        </Form>
      );
  
      const remarkInfo = this.props.remarkInfo || {};
      const infos = remarkInfo.list || [];
      return (
        <div>
          <TabItem img={record} close iconClick={this.open} title={`备注(${remarkInfo.total || 0})`} icon>
            {infos.length > 3 && <span className={styles.more} onClick={this.toggle}>{this.state.spread ? '收起更多↑' : '展开更多↓'}</span>}
            <div className={remarkStyles.items}>
              {info.map((item, index)=> {
                return <Log key={index} {...item}/>;
              })}
            </div>
          </TabItem>
          {/* 新建备注 */}
          <Modal show={this.state.showModal} onHide={this.close}>
            <RemarkForm close={this.close} chanceInfo={chanceInfo} onSubmit={this.submit}/>
          </Modal>
  
  
          <Modal show={this.state.showDetail} onHide={this.closeDetail}>
            <Modal.Header closeButton>
              <Modal.Title>备注详情</Modal.Title>
            </Modal.Header>
  
            <Modal.Body>
              {detailForm}
            </Modal.Body>
  
            <Modal.Footer>
              <Button onClick={this.closeDetail}>关闭</Button>
            </Modal.Footer>
  
          </Modal>
        </div>
      );
    }
  }
  