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 } 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 BasicScreen extends Page {
    @observable
    formBlur = false

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

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props

        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")} disabled={true} maxLength={16} 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" type='flex'>
                            <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  disabled={true} InputProps={ {...bind("max_amt"), type:"amount", cur:this.model.max_cur} } />
                            </Col>

                        </Row>

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

                    </Col>

                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 未到单金额*/}
                                <Label itext="未到单金额" trn="ditrej" />
                            </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} /> */}
                                <InputItem  disabled={true} InputProps={ {...bind("opn1_amt"), type:"amount", cur:this.model.opn1_cur} } />
                            </Col>

                        </Row>
                    </Col>

                    <Col span={12}>

                        <Col span={5} offset={2}>
                            {/* 受益人名称 */}
                            <Label itext="受益人名称" trn="ditrej" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts4_namcn")} maxLength={100} disabled={true}  desp="客户中文名称" path="/didgrp/ben/pts/namcn" />
                        </Col>
                    </Col>
                </Row >
                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 开立日期 */}
                                <Label itext="开立日期" trn="ditrej" />
                            </Col>
                            <Col span={14}>
                                <DatePickerItem InputProps={bind("opndat")} disabled={true} desp="开立日期" path="/didgrp/rec/opndat" />
                            </Col>

                        </Row>
                    </Col>

                    <Col span={12}>

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

                            <Col span={5} offset={2}>
                                {/* 信用证对付方式 */}
                                <Label itext="信用证对付方式" />
                            </Col>
                            <Col span={7}>
                                <SelectItem InputProps={bind("avbby")} code={CodeTable.avbby} disabled={true} desp="信用证对付方式" path="/didgrp/rec/avbby" />
                            </Col>



                        </Row>
                    </Col>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 有效地点 */}
                            <Label itext="有效地点" trn="ditrej" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("expplc")} maxLength={100} disabled={true}  desp="有效地点" path="/didgrp/rec/expplc" />
                        </Col>

                    </Col>
                </Row>

                {/* 第六行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                <Label itext="期限" />
                            </Col>
                            <Col span={5}>
                                <InputItem InputProps={bind("tenmaxday")} desp="期限" disabled={true} path="/didgrp/rec/tenmaxday" />

                            </Col>
                            <Col span={4} offset={1}>
                                <Label itext="天" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 有效日期 */}
                            <Label itext="有效日期" />
                        </Col>
                        <Col span={14}>
                            <DatePickerItem InputProps={bind("expdat")} desp="有效日期" disabled={true} path="/didgrp/rec/expdat" />
                        </Col>
                    </Col>
                </Row>



                <Row style={{ marginTop: 30 }}>
                    <Col span={12}>

                        <Col span={5} offset={2}>
                            {/* 报文内容 */}
                            <Label itext="报文内容" trn="bdtfre" />
                        </Col>
                        <Col span={14} offset={0} ><TextAreaItem rows={8} style={{ resize: "none" }} InputProps={bind("fremsg_fretxt")} desp="Narrative" path="/fremsg/fretxt" /></Col>
                    </Col>

                    <Col span={12}>
                        <Ptspta1 model={this.model} argArr={{ desc: "收报行", prefix: 'pts8', url: 'ditfre/fmcp_ptysel', flg: 'B', datakey: '\\fremsg\\fmcp\\ptslst' }} />
                    </Col>

                </Row >

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