content: import React from 'react'
  import PageHeader from 'components/PageHeader'
  import PaymentBasicInfo from 'components/PaymentBasicInfo'
  import PaymentDetailsInfo from 'components/PaymentDetails'
  import FileListTable from 'components/FileListTable'
  import TaskHistory from 'components/TaskHistory'
  import WithdrawButton from 'components/WithdrawButton'
  import {Modal} from 'react-bootstrap'
  import FlowDiagram from 'components/FlowDiagram'
  import ReportForm from 'components/ReportForm'
  
  /** 支付单明细页面*/
  
  class PaymentDetails extends React.Component {
    constructor (props, context) {
      super(props, context)
  
      this.state = {
        paymentInfo: null,
        poItemCost: [],
        history: [],
        loadHistory: false,
        loadAssociateFile: false,
        associateFile: [],
        showFlowDiagram: false,
        showReportForm: false,
        canWithDraw: false
      }
    }
  
    componentDidMount () {
      this.fetchPaymentInfo()
      this.fetchPaymentDetails()
      this.fetchAssociateFile()
      this.fetchTaskHistory()
      this.fetchWithDrawStatus()
    }
  
    hideFlowDiagram = () => {
      this.setState({showFlowDiagram: false})
    }
  
    hideReportForm = () => {
      this.setState({showReportForm: false})
    }
  
    showFlowDiagram = () => {
      this.setState({showFlowDiagram: true})
    }
  
    showReportForm = () => {
      this.setState({showReportForm: true})
    }
  
    fetchPaymentInfo () {
      var businessId = this.props.location.query.businessId
  
      var param = businessId.split('||')
      var systemCode = param[0]
      var poNo = param[1]
      var invoiceNo = param[2]
  
      this.serverRequest = $.get('/qdp/payment/invoice/info',
        {
          systemCode: systemCode, poNo: poNo, invoiceNo: invoiceNo
        },
        function (result) {
          this.setState({
            paymentInfo: result
          })
        }.bind(this))
    }
  
    fetchPaymentDetails () {
      var businessId = this.props.location.query.businessId
      var param = businessId.split('||')
      var systemCode = param[0]
      var poNo = param[1]
      var invoiceNo = param[2]
  
      this.serverRequest = $.get('/qdp/payment/invoice/poItem',
        {
          systemCode: systemCode, poNo: poNo, invoiceNo: invoiceNo, type: 'read'
        }, function (result) {
          this.setState({
            poItemCost: result
          })
        }.bind(this))
    }
  
    fetchTaskHistory () {
      this.setState({
        loadHistory: false
      })
      this.serverRequest = $.get('/qdp/payment/bpm/task/history', this.props.location.query, function (result) {
        this.setState({
          history: result,
          loadHistory: true
        })
      }.bind(this))
    }
  
    fetchAssociateFile () {
      this.setState({
        loadAssociateFile: false
      })
  
      this.serverRequest = $.get('/qdp/payment/file/associate', this.props.location.query, function (result) {
        this.setState({
          associateFile: result,
          loadAssociateFile: true
        })
      }.bind(this))
    }
  
    fetchWithDrawStatus () {
      var param = {
        taskId: this.props.location.query.taskId,
        processDefinitionId: this.props.location.query.processDefinitionId,
        activityId: this.props.location.query.activityId
      }
      if (param.taskId && param.processDefinitionId && param.activityId) {
        this.serverRequest = $.get('/qdp/payment/bpm/task/canWithdraw', param, function (result) {
          this.setState({
            canWithDraw: result
          })
        }.bind(this))
      }
    }
  
    renderButtons () {
      if (this.props.location.isComplete) {
        return (
          <div>
            <div className='col-md-3 col-md-offset-3'>
              <button type='button' className='btn btn-default payment-button'
                onClick={this.showFlowDiagram} >查看流程图</button>
            </div>
            <div className='col-md-3'>
              <button type='button' className='btn btn-default payment-button'
                onClick={this.showReportForm} >打印支付单</button>
            </div>
          </div>
        )
      } else if (this.state.canWithDraw && !this.props.location.isComplete) {
        return (
          <div>
            <div className='col-md-3 col-md-offset-3'>
              <button type='button' className='btn btn-default payment-button'
                onClick={this.showFlowDiagram} >查看流程图</button>
            </div>
            <div className='col-md-3'>
              <WithdrawButton taskId={this.props.location.query.taskId} />
            </div>
          </div>
        )
      } else if (!this.state.canWithDraw && !this.props.location.isComplete) {
        return (
          <div className='col-md-4 col-md-offset-4'>
            <button type='button' className='btn btn-default payment-button'
              onClick={this.showFlowDiagram} >查看流程图</button>
          </div>
        )
      }
    }
  
    render () {
      var businessId = this.props.location.query.businessId
      var param = businessId.split('||')
  
      var systemCode = param[0]
      var systemId = param[3]
  
      return (
        <div className='container'>
          <div className='row'>
            <div className='col-md-12'>
              <PageHeader title='合同支付审签流程' subTitle='支付单明细' />
            </div>
          </div>
          <div className='row'>
            <div className='col-md-12'>
              <h3 className='form-section-header'>1.支付单基本信息</h3>
              <PaymentBasicInfo payment={this.state.paymentInfo} system={{id: systemId, code: systemCode}} />
            </div>
          </div>
          <div className='row'>
            <div className='col-md-12'>
              <h3 className='form-section-header'>2.支付单明细</h3>
              <PaymentDetailsInfo items={this.state.poItemCost} />
            </div>
          </div>
          <div className='row'>
            <div className='col-md-12'>
              <h3 className='form-section-header'>3.相关附件</h3>
              <FileListTable files={this.state.associateFile} loaded={this.state.loadAssociateFile} deletable={false} />
            </div>
          </div>
          <div className='row'>
            <div className='col-md-12'>
              <h3 className='form-section-header'>4.流转历史</h3>
              <TaskHistory history={this.state.history} loaded={this.state.loadHistory} />
            </div>
          </div>
          <div className='row'>
            {
              this.renderButtons()
            }
          </div>
          <Modal bsSize='large' show={this.state.showFlowDiagram} onHide={this.hideFlowDiagram}>
            <Modal.Header closeButton>
              <Modal.Title>流程图</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <FlowDiagram processInstanceId={this.props.location.query.processInstanceId}
                processDefinitionId={this.props.location.query.processDefinitionId} appName='informationCenterPayment' />
            </Modal.Body>
          </Modal>
          <Modal bsSize='large' show={this.state.showReportForm} onHide={this.hideReportForm}>
            <Modal.Header closeButton>
              <Modal.Title>选择打印参数</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <ReportForm processInstanceId={this.props.location.query.processInstanceId + ''}
                businessId={this.props.location.query.businessId} onClickCancel={this.hideReportForm} />
            </Modal.Body>
          </Modal>
        </div>
      )
    }
  }
  
  export default PaymentDetails
  