import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, CheckboxItem, TextAreaItem, BottomBtn
} from '@/components/Common-Library'
import Api from '@/service/api'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable, autorun } from 'mobx'
import { Row, Col, Popconfirm, Modal, Spin, Checkbox } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import Business from '@/views/Public/Business'

const { Pre, Next, StepWrapper } = Steps
const CodeTable = CodeTableFactory.getInstance()
const confirm = Modal.confirm

@withRouter
@inject('UserContext')
@inject('i18n')
@observer
export default class SetpScreen extends Page {
    @observable
    formBlur = false

    constructor(props) {
        super(props)
        this.model = props.model
        this.bind = Bind.bind(this)
        this.state = {
          checked:false
        }
    }

    //交易描述赋值
	componentDidMount() {
		super.componentDidMount()
		this.autoDispose = autorun(() => {
      if(this.model.trtcre_crefin == 'true'){
        this.setState({
          checked: true
        })
      }else{
        this.setState({
          checked: false
        })
      }
		})
	}

	componentWillUnmount() {
		this.autoDispose && this.autoDispose()
	}

    checkboxChange = (e)=>{
      if(this.model.trtcre_crefin === 'true'){
        this.model.trtcre_crefin = 'false'
      }else{
        this.model.trtcre_crefin = 'true'
      }
      //融资标识每次改变之后就调用此方法，对融资数据进行处理
      //true 时获取   false时清空
      this.onTrtcre_crefin()
    }

    async onTrtcre_crefin(){
      this.model.pnttyp1 = "bdd"
      const rtnmsg = await Api.post('bdtset/trtcre_crefin',{data:this.model})
      if(rtnmsg.retcod == SUCCESS)
      {
        Object.assign(this.model, rtnmsg.data)
      }
      else
      {
        Notification.error({message:'融资信息初始化失败!'})
      }
    }

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        if (this.props.flag == true) {
            return <Spin style={{ width: "100%", justifyContent: "center" }} spinning={this.props.flag} />
        }
        return (
            <div style={{ position: 'relative' }}>
                <Business  wrappedComponentRef={ref => (this.com = ref)} page={this} steps={this.props.steps} extra={this.props.extra}  model={this.model} />
                {/* 第一行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 单据编号 */}
                                <Label itext="单据编号" />
                            </Col>
                            <Col span={6}>
                                <InputItem InputProps={bind("ownref")} maxLength={16} disabled={true} desp="Own Reference BR Number" path="/bddgrp/rec/ownref" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 概要描述 */}
                                <Label itext="概要描述" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("nam")} maxLength={40} disabled={true} desp="Name of Bill Contract" path="/bddgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第二行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 到单金额 */}
                                <Label itext="到单金额" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("max_cur"), onChange: val => {
                                        this.model.max_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("max_amt")} disabled={true} /> */}
                                <InputItem disabled={true} InputProps={{ ...bind("max_amt"), type: "amount", cur: this.model.max_cur }} />
                            </Col>


                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 申请人名称 */}
                            <Label itext="申请人名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts8_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/apl/pts/namcn" />
                        </Col>
                      </Row>


                    </Col>

                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 未付款金额 */}
                                <Label itext="未付款金额" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("opn1_cur"), onChange: val => {
                                        this.model.opn1_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("opn1_amt")}disabled={true}  desp="Balance" path="/didgrp/cbs/opn1/amt" /> */}
                                <InputItem disabled={true} InputProps={{ ...bind("opn1_amt"), type: "amount", cur: this.model.opn1_cur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 受益人名称 */}
                            <Label itext="受益人名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts9_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/ben/pts/namcn" />
                        </Col>
                      </Row>
                    </Col>

                </Row >
                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 到单日期 */}
                                <Label itext="到单日期" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("opndat")} disabled={true} desp="Date of Opening" path="/bddgrp/rec/opndat" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 通知行名称 */}
                            <Label itext="通知行名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts6_namcn")} maxLength={100} disabled={true} desp="客户中文名称" path="/didgrp/adv/pts/namcn" />
                        </Col>
                      </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 单据期限 */}
                                <Label itext="单据期限" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("matdat")} disabled={true} desp="Maturity Date" path="/bddgrp/rec/matdat" />
                            </Col>
                            <Col span={7}>

                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 单据类型 */}
                            <Label itext="单据类型" />
                        </Col>
                        <Col span={14}>
                            <SelectItem InputProps={bind("docflg")} disabled={true} code={CodeTable.doc} desp="单据类型" path="/bddgrp/rec/docflg" />
                        </Col>
                      </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                          <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 付款金额 */}
                                <Label itext="付款金额" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("setmod_doccur"), onChange: val => {
                                        this.model.setmod_doccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("setmod_docamt")} desp="document amount" path="/setmod/docamt" /> */}
                                <InputItem InputProps={{ ...bind("setmod_docamt"), type: "amount", cur: this.model.setmod_doccur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 承兑日期 */}
                            <Label itext="承兑日期" trn="bdtset" />
                        </Col>
                        <Col span={14}>
                            <DatePickerItem InputProps={bind("accdat")} disabled={true} desp="Acceptance Date" path="/bddgrp/rec/accdat" />
                        </Col>
                      </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                          <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 扣减费用 */}
                                <Label itext="扣减费用" trn="bdtset" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("setmod_doccur"), onChange: val => {
                                        this.model.setmod_doccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("setmod_redamt")} desp="Reduction Amount" path="/setmod/redamt" /> */}
                                <InputItem InputProps={{ ...bind("setmod_redamt"), type: "amount", cur: this.model.setmod_doccur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 付款类型 */}
                            <Label itext="付款类型" trn="bdtset" />
                        </Col>
                        <Col span={14}>
                            <SelectItem InputProps={bind("paytyp")} code={CodeTable.paytyp} desp="付款类型" path="/bddgrp/rec/paytyp" />
                        </Col>
                      </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                          <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 实际付款金额 */}
                                <Label itext="实际付款金额" trn="bdtset" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("setmod_doccur"), onChange: val => {
                                        this.model.setmod_doccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("setmod_setamt")} desp="Reduced Amount to settle" path="/setmod/setamt" /> */}
                                <InputItem InputProps={{ ...bind("setmod_setamt"), type: "amount", cur: this.model.setmod_doccur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            {/* 清算方式 */}
                            <Label itext="清算方式" trn="bdtset" />
                        </Col>
                        <Col span={14}>
                            <SelectItem InputProps={bind("clrtyp")} code={CodeTable.clrtyp} desp="清算方式" path="/bddgrp/rec/clrtyp" />
                        </Col>
                      </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 付款备注 */}
                                <Label itext="付款备注" trn="bdtset" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={1} offset={2}>
                          <CheckboxItem InputProps={bind("ditmod_clsflg")} />
                        </Col>
                        <Col span={4}>
                          <Label itext="闭卷业务" />
                        </Col>
                        <Col span={1} offset={2}>
                          {/* <CheckboxItem InputProps={bind("trtcre_crefin")} /> */}
                          <Checkbox 
                            onChange={this.checkboxChange} 
                            checked={this.state.checked} />
                        </Col>
                        <Col span={4}>
                          <Label itext="买方融资" />
                        </Col>
                      </Row>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <Row className="row">

                            <Col span={22} offset={2}>
                                <TextAreaItem rows={6} style={{ resize: "none" }} InputProps={bind("payrmk")} desp="付款备注" path="/bddgrp/rec/payrmk" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                
                {/* 底部按钮 */}
                <BottomBtn _this={this} />
            </div >
        )
    }
}
