import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem, BottomBtn,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, CheckboxItem, TextAreaItem, Table
} 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, Tooltip, Modal, Spin } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import Business from '@/views/Public/Business'
import moment from 'moment';


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

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

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


    dateDisabled = (time) => {

        return time && time < moment().subtract(1, "days")// 大于当前日期不能选

    }

    //交易内实现
    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="fptset" />
                            </Col>
                            <Col span={10}>
                                <InputItem disabled={true} InputProps={bind("pntref")} disabled={true} maxLength={16} desp="关联单据编号" path="/fpdgrp/rec/pntref" />
                            </Col>

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

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


                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 描述 */}
                                <Label itext="描述" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("nam")} disabled={true} 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="fptset" />
                            </Col>
                            <Col span={10}>
                                <SelectItem disabled={true} InputProps={bind("ffttyp")} code={CodeTable.ffttyp} desp="福费廷类型" path="/fpdgrp/rec/ffttyp" />
                            </Col>


                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 出让方 */}
                                <Label itext="出让方" trn="fptset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("pts1_extkey")} maxLength={16} desp="客户编号" path="/fpdgrp/sel/pts/extkey" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>

                            <Col span={5} offset={2}>
                                {/* 福费廷金额 */}
                                <Label itext="福费廷金额" trn="fptset" />
                            </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={12}>
                        <Row className="row" type='flex'>

                            <Col span={5} offset={2}>
                                {/*  */}
                                <Label itext="" trn="fptset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("pts1_namcn")} maxLength={100} desp="客户中文名称" path="/fpdgrp/sel/pts/namcn" />
                            </Col>
                        </Row>
                    </Col>

                </Row >
                {/* 第五行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 福费廷余额 */}
                                <Label itext="福费廷余额" trn="fptset" />
                            </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 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="开证行" trn="fptset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("pts_extkey")} maxLength={16} desp="客户编号" path="/fpdgrp/inv/pts/extkey" />
                            </Col>
                        </Row>
                    </Col>

                </Row>

                {/* 第六行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 融资利率 */}
                                <Label itext="融资利率" trn="fptset" />
                            </Col>
                            <Col span={6}>
                                <InputItem disabled={true} InputProps={bind("basrat")} desp="基准利率" path="/fpdgrp/rec/basrat" />
                            </Col>


                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/*  */}
                                <Label itext="" trn="fptset" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("pts_namcn")} maxLength={100} desp="客户中文名称" path="/fpdgrp/inv/pts/namcn" />
                            </Col>
                        </Row>
                    </Col>

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


                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 起息日 */}
                                <Label itext="起息日" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <DatePickerItem disabled={true} dateDisabled={this.dateDisabled} InputProps={bind("opndat")} desp="福费廷开立日期" path="/fpdgrp/rec/opndat" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 到期日 */}
                                <Label itext="到期日" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <DatePickerItem disabled={true} InputProps={bind("expdat")} desp="福费廷到期日" path="/fpdgrp/rec/expdat" />
                            </Col>
                        </Row>
                    </Col>


                </Row >


                {/* 第八行 */}

                <Row>

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

                            <Col span={5} offset={2}>
                                {/* 归属机构 */}
                                <Label itext="归属机构" trn="fptset" />
                            </Col>
                            <Col span={6}>
                                <SelectItem disabled={true} InputProps={bind("ownbch")} desp="归属机构" path="/fpdgrp/rec/ownbch" />
                            </Col>

                        </Row>

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

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