content: import React from 'react'
  import PageHeader from 'components/PageHeader'
  import TaskHandleForm from 'components/TaskHandleForm'
  import ContractToolbar from 'components/ContractToolbar'
  import TaskHistory from 'components/TaskHistory'
  import PaymentReadOnlyForm from 'components/PaymentReadOnlyForm'
  import FilePreview from 'components/FilePreview'
  import FlowDiagram from 'components/FlowDiagram'
  import {Button, Modal} from 'react-bootstrap'
  import formatter from 'utils/formatter.js'
  
  /** 审批支付单页面*/
  class ExaminePayment extends React.Component {
    constructor (props, context) {
      super(props, context)
  
      this.state = {
        showTaskHandle: false,
        showHistory: false,
        invoice: {},
        examineOpinions: [],
        associateFile: [],
        showPreview: false,
        previewFileInfo: {},
        history: [],
        loadHistory: false,
        showFlowDiagram: false,
        examining: false,
        outGoing: []
      }
    }
  
    showTaskHandle = () => {
      this.setState({showTaskHandle: true})
    }
  
    hideTaskHandle = () => {
      this.setState({showTaskHandle: false})
    }
  
    showTaskHistory = () => {
      this.setState({showTaskHistory: true})
    }
  
    hideTaskHistory = () => {
      this.setState({showTaskHistory: false})
    }
  
    showFlowDiagram = () => {
      this.setState({showFlowDiagram: true})
    }
  
    hideFlowDiagram = () => {
      this.setState({showFlowDiagram: false})
    }
  
    fetchInvoiceInfo () {
      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/examineInfo',
        {systemCode: systemCode, poNo: poNo, invoiceNo: invoiceNo}, function (result) {
          this.setState({
            invoice: result
          })
        }.bind(this))
    }
  
    fetchTaskOpinion () {
      this.serverRequest = $.get('/qdp/payment/bpm/opinion/examine',
        {
          businessId: this.props.location.query.businessId,
          processDefinitionId: this.props.location.query.processDefinitionId
        },
        function (result) {
          this.setState({
            examineOpinions: result
          })
        }.bind(this))
    }
  
    fetchAssociateFile () {
      this.serverRequest = $.get('/qdp/payment/file/associate',
        {
          businessId: this.props.location.query.businessId
        },
        function (result) {
          this.setState({
            associateFile: 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))
    }
  
    fetchOutGoing () {
      this.serverRequest = $.get('/qdp/payment/bpm/task/outUsers', this.props.location.query, function (result) {
        this.setState({
          outGoing: result
        })
      }.bind(this))
    }
  
    examinePayment (user, comment) {
      var title = user.userName ? formatter.formatString('确定交给{0}处理？', user.userName) : '确定处理支付单？'
      var component = this
  
      swal({
        title: title,
        text: formatter.formatString('处理意见：{0}', comment),
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }, function () {
        component.setState({
          examining: true
        })
        component.refs.taskHandleForm.submitForm()
      })
    }
  
    redirect (result) {
      // console.log('redirect')
      this.setState({
        examining: false
      })
  
      if (result === true) {
        swal({
          title: '审批成功!',
          text: '点击回到待办事项!',
          type: 'success',
          showCancelButton: false,
          confirmButtonColor: '#428bca',
          confirmButtonText: '确认',
          closeOnConfirm: true},
          function (isConfirm) {
            if (isConfirm) {
              location.href = '/taskManage/todoTask'
            }
          })
      } else {
        swal({
          title: '审批失败!',
          text: '点击回到待办事项!',
          type: 'error',
          showCancelButton: false,
          confirmButtonColor: '#428bca',
          confirmButtonText: '确认',
          closeOnConfirm: true},
          function (isConfirm) {
            if (isConfirm) {
              location.href = '/taskManage/todoTask'
            }
          })
      }
    }
  
    componentDidMount () {
      this.fetchInvoiceInfo()
      this.fetchTaskOpinion()
      this.fetchAssociateFile()
      this.fetchTaskHistory()
      this.fetchOutGoing()
    }
  
    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='审批支付单' />
              <ContractToolbar >
                <div>
                  <Button bsSize='small' onClick={this.showTaskHandle}>处理申请单</Button>
                  <Button bsSize='small' onClick={this.showTaskHistory}>流转历史</Button>
                  <Button bsSize='small' onClick={this.showFlowDiagram}>查看流程图</Button>
                </div>
              </ContractToolbar>
            </div>
          </div>
          <form action='' method='post'>
            <div className='row'>
              <div className='col-md-12'>
                <PaymentReadOnlyForm invoice={this.state.invoice} system={{id: systemId, code: systemCode}}
                  opinions={this.state.examineOpinions} file={this.state.associateFile}
                  onClickTitle={(file)=> (this.setState({showPreview: true, previewFileInfo: file}))} />
              </div>
            </div>
          </form>
          <FilePreview {... this.state.previewFileInfo} show={this.state.showPreview}
            hideModal={() => this.setState({showPreview: false})} />
          <Modal bsSize='large' show={this.state.showTaskHistory} onHide={this.hideTaskHistory}>
            <Modal.Header closeButton>
              <Modal.Title>流转历史</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <TaskHistory history={this.state.history} loaded={this.state.loadHistory} />
            </Modal.Body>
          </Modal>
          <Modal bsSize='large' show={this.state.showTaskHandle} onHide={this.hideTaskHandle}>
            <Modal.Header closeButton>
              <Modal.Title >处理申请单</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <TaskHandleForm ref='taskHandleForm' {... this.props.location.query}
                showOutGoing outGoing={this.state.outGoing} onSubmit={this.examinePayment}
                AfterSubmit={this.redirect.bind(this)} />
            </Modal.Body>
          </Modal>
          <Modal bsSize='large' show={this.state.showFlowDiagram} onHide={this.hideFlowDiagram}>
            <Modal.Header closeButton>
              <Modal.Title>流程图</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <FlowDiagram {... this.props.location.query} />
            </Modal.Body>
          </Modal>
          <div className={this.state.examining ? 'payment-page-mask' : 'hidden'} />
        </div>
      )
    }
  }
  
  export default ExaminePayment
  