import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem, BottomBtn,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps
} 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 } 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 AmepScreen extends Page {
    @observable
    formBlur = false

    constructor(props) {
        super(props)
        this.model = props.model
        this.bind = Bind.bind(this)
    }

    //交易描述赋值
    componentDidMount() {
        super.componentDidMount()
        this.autoDispose = autorun(() => {
            this.model.nam = `${this.model.max_cur}   ${this.model.max_amt}   ${this.model.pts3_namcn || ""}`
            this.model.max_amt = (this.model.nom1_amt * (1 + this.model.nomtop / 100)).toFixed(2) //最大金额计算
            this.model.ditamep_maxamt =( Number(this.model.max_amt) - Number(this.model.max1_amt) ).toString()

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

    onAmeAmtChange = () => {
        this.model.nom1_amt = (Number(this.model.ditamep_engamt) + Number(this.model.nom11_amt)).toString()

    }

    onAmtChange = () => {
        this.model.ditamep_engamt = (Number(this.model.nom1_amt) - Number(this.model.nom11_amt)).toString()

    }

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { bchlevelLst } = this.props.extra
        const rejameflgCode = [
          { label: `拒绝修改`, value: `RJCT` },
          { label: `同意修改`, value: `ACPT` },
          { label: `等待确认`, value: `W` },
        ]

        //const {next,pre} = this.props.steps
        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={10}>
                                <InputItem InputProps={bind("ownref")} maxLength={16} disabled={true} desp="业务编号" path="/didgrp/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")} disabled={true} maxLength={40} desp="概要描述" path="/didgrp/rec/nam" />
                            </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("amedat")} desp="最后修改日期" disabled={true} path="/didgrp/rec/amedat" />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 修改次数 */}
                                <Label itext="修改次数" />
                            </Col>
                            <Col span={10}>
                                <InputItem InputProps={bind("amenbr")} desp="修改次数" disabled={true} path="/didgrp/rec/amenbr" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 原溢短装 */}
                                <Label itext="原溢短装" trn="ditram" />
                            </Col>
                            <Col span={4} >
                                <InputItem InputProps={bind("nomtop1")} disabled={true} desp="上浮" path="/olddidgrp/rec/nomtop" />
                            </Col>
                            <Col span={1} offset={1}><Label itext="/" trn="ditram" /></Col>

                            <Col span={4}>
                                <InputItem InputProps={bind("nomton1")} disabled={true} desp="下浮" path="/olddidgrp/rec/nomton" />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 新溢短装 */}
                                <Label itext="新溢短装" trn="ditram" />
                            </Col>
                            <Col span={4} >
                                <InputItem InputProps={bind("nomtop")} desp="上浮" path="/didgrp/rec/nomtop" />
                            </Col>
                            <Col span={1} offset={1}><Label itext="/" trn="ditram" /></Col>

                            <Col span={4}>
                                <InputItem InputProps={bind("nomton")} desp="下浮" path="/didgrp/rec/nomton" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 原信用证金额 */}
                                <Label itext="原信用证金额" trn="ditram" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("nom11_cur"), onChange: val => {
                                        this.model.nom11_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("nom11_amt")} disabled={true} /> */}
                                <InputItem  disabled={true} InputProps={ {...bind("nom11_amt"), type:"amount", cur:this.model.nom11_cur} } />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 原最大金额 */}
                                <Label itext="原最大金额" trn="ditram" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("max1_cur"), onChange: val => {
                                        this.model.max1_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("max1_amt")} disabled={true} /> */}
                                <InputItem  disabled={true} InputProps={ {...bind("max1_amt"), type:"amount", cur:this.model.max1_cur} } />
                            </Col>
                        </Row>
                    </Col>
                </Row>


                {/* 第五行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 信用证金额变动 */}
                                <Label itext="信用证金额变动" trn="ditram" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("ditamep_engcur"), onChange: val => {
                                        this.model.ditamep_engcur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={{ ...bind("ditamep_engamt") }} /> */}
                                <InputItem  InputProps={ {...bind("ditamep_engamt"), type:"amount", cur:this.model.datamep_engcur , onBlur: this.onAmeAmtChange} } />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 最大金额变动 */}
                                <Label itext="最大金额变动" trn="ditram" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("ditamep_maxcur"), onChange: val => {
                                        this.model.ditamep_maxcur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("ditamep_maxamt")} disabled={true} /> */}
                                <InputItem  disabled={true} InputProps={ {...bind("ditamep_maxamt"), type:"amount", cur:this.model.ditamep_maxcurr} } />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第六行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 信用证金额 */}
                                <Label itext="信用证金额" trn="ditram" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("nom1_cur"), onChange: val => {
                                        this.model.nom1_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={{ ...bind("nom1_amt") }} /> */}
                                <InputItem   InputProps={ {...bind("nom1_amt"), type:"amount", cur:this.model.nom1_cur, onBlur: this.onAmtChange} } />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 最大金额 */}
                                <Label itext="最大金额" trn="ditram" />
                            </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>
                </Row>


                {/* 第七行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >

                            <Col span={5} offset={2}>
                                {/* 原有效日期 */}
                                <Label itext="原有效日期" trn="ditram" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("expdat1")} disabled={true} desp="有效日期" path="/olddidgrp/rec/expdat" />
                            </Col>

                        </Row>
                    </Col>

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

                            <Col span={5} offset={2}>
                                {/* 原最迟货物装运/服务提供日期 */}
                                <Label itext="原最迟货物装运日期 " trn="ditram" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("shpdat1")} disabled={true} desp="最迟货物装运/服务提供日期 " path="/olddidgrp/rec/shpdat" />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第八行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 新有效日期 */}
                                <Label itext="新有效日期" trn="ditram" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("expdat")} desp="有效日期" path="/didgrp/rec/expdat" />
                            </Col>
                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 新最迟货物装运/服务提供日期  */}
                                <Label itext="新最迟货物装运日期 " trn="ditram" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("shpdat")} desp="最迟货物装运/服务提供日期 " path="/didgrp/rec/shpdat" />
                            </Col>
                        </Row>
                    </Col>
                </Row>


                {/* 第九行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 原有效地点*/}
                                <Label itext="原有效地点" trn="ditram" />
                            </Col>
                            <Col span={14} >
                                <InputItem InputProps={bind("expplc1")} disabled={true} maxLength={100} desp="有效地点" path="/olddidgrp/rec/expplc" />
                            </Col>
                        </Row>
                    </Col>

                </Row>


                {/* 第十行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 新有效地点*/}
                                <Label itext="新有效地点" trn="ditram" />
                            </Col>
                            <Col span={14} >
                                <InputItem InputProps={bind("expplc")} maxLength={100} desp="有效地点" path="/didgrp/rec/expplc" />
                            </Col>
                        </Row>
                    </Col>

                </Row>


                {/* 第十一行 */}

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

                            <Col span={5} offset={2}>
                                {/* 修改状态 */}
                                <Label itext="修改状态" trn="ditame" />
                            </Col>
                            <Col span={14}>
                                {/* <SelectItem InputProps={bind("ditamep_amesta")} code={CodeTable.modsta} desp="修改状态" path="/ditamep/amesta" /> */}
                                <SelectItem InputProps={bind("rejameflg")} code={rejameflgCode} />
                            </Col>
                            <Col span={3}>

                            </Col>
                        </Row>
                    </Col>
                </Row>


                {/* 第十二行 */}

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

                            <Col span={5} offset={2}>
                                {/* 理由 */}
                                <Label itext="拒绝修改理由" trn="ditame" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("rejamersn")} maxLength={60} desp="理由" path="/ditamep/reason" />
                            </Col>
                            <Col span={3}>

                            </Col>
                        </Row>
                    </Col>
                </Row>

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