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 Ptspta1 from '@/views/Public/Ptspta1'
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 OvwpScreen 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.nam1 = `${this.model.max1_cur}   ${this.model.max1_amt}   ${this.model.pts2_namcn}`
        })
    }

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

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { ownbch, ffttyp } = this.props.extra
        //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="福费廷买入编号" trn="fstset" />
                            </Col>
                            <Col span={10}>
                                <InputItem disabled={true} InputProps={bind("ownref")} maxLength={16} desp="福费廷编号" path="/fpdgrp/rec/ownref" />
                            </Col>

                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 描述 */}
                                <Label itext="描述" trn="fstset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("nam")} maxLength={100} desp="描述" path="/fpdgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第二行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 福费廷卖出编号 */}
                                <Label itext="福费廷卖出编号" trn="fstset" />
                            </Col>
                            <Col span={10}>
                                <InputItem disabled={true} InputProps={bind("ownref1")} maxLength={16} desp="卖出业务编号" path="/fsdgrp/rec/ownref" />
                            </Col>


                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 描述 */}
                                <Label itext="描述" trn="fstset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("nam1")} maxLength={100} desp="描述" path="/fsdgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第三行 */}

                <Row>
                    <Col span={12}>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 卖出金额 */}
                                    <Label itext="卖出金额" trn="fstset" />
                                </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 disabled={true} InputProps={{ ...bind("max_amt"), type: "amount", cur: this.model.max_cur }} />
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 卖出日期 */}
                                    <Label itext="卖出日期" trn="fstset" />
                                </Col>
                                <Col span={6}>
                                    <DatePickerItem disabled={true} InputProps={bind("opndat1")} desp="卖出日期" path="/fsdgrp/rec/opndat" />
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    <Label itext="宽限期" trn="fstset" />
                                </Col>
                                <Col span={6}>
                                    <InputItem disabled={true} InputProps={bind("grcdys")} desp="宽限期" path="/fpdgrp/rec/grcdys" />
                                </Col>
                            </Row>
                        </Col>
                    </Col>
                    <Col span={12}>
                        <Ptspta1 model={this.model} argArr={{ desc: "包买商", prefix: 'pts1', url: 'fstset/onBuyp_ptysel', flg: 'B', datakey: '\\fstp\\buyp\\ptslst' }} isDisabled={true} />
                    </Col>
                </Row>



                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    <Label itext="到期日" trn="fstset" />
                                </Col>
                                <Col span={6}>
                                    <DatePickerItem disabled={true} InputProps={bind("expdat")} desp="福费廷到期日" path="/fpdgrp/rec/expdat" />
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 信用证编号 */}
                                    <Label itext="信用证编号" trn="fstset" />
                                </Col>
                                <Col span={6}>
                                    <InputItem disabled={true} InputProps={bind("lcref")} maxLength={32} desp="信用证编号" path="/fpdgrp/rec/lcref" />
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    <Label itext="信用证效期" trn="fstset" />
                                </Col>
                                <Col span={6}>
                                    <DatePickerItem disabled={true} InputProps={bind("expdatlc")} desp="信用证失效日期" path="/fpdgrp/rec/expdatlc" />
                                </Col>
                            </Row>
                        </Col>
                    </Col>
                    <Col span={12}>
                        <Ptspta1 model={this.model} argArr={{ desc: "开证行", prefix: 'pts', url: 'fstset/onInvp_ptysel', flg: 'B', datakey: '\\fstp\\invp\\ptslst' }} isDisabled={true} />
                    </Col>
                </Row>
                {/* 第五行 */}
              


                <Row>

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

                        <Col span={5} offset={2}>
                                {/* 收款金额 */}
                                <Label itext="收款金额" trn="fstset" />	
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("fstmod_reccur"), onChange: val => {
                                        this.model.fstmod_reccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                <InputItem InputProps={{ ...bind("fstmod_recamt"), type: "amount", cur: this.model.fstmod_reccur }} />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 转汇金额 */}
                                <Label itext="转汇金额" trn="fstset" />	
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("fstmod_paycur"), onChange: val => {
                                        this.model.fstmod_paycur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                <InputItem InputProps={{ ...bind("fstmod_payamt"), type: "amount", cur: this.model.fstmod_paycur }} />
                            </Col>
                        </Row>
                    </Col>
                </Row >

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

            </div >
        )
    }
}