import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    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,Tooltip } from 'antd';
import { PtyPicker } from '@/components/Business-Library'
import { Link, withRouter } from 'react-router-dom'
import Ptspta1 from '@/views/Public/Ptspta1'
import Business from '@/views/Public/Business'
import DanJu from './DanJu'

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

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

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


		link = (path) => {
			this.props.history.push({pathname:path,query:{inr:this.model.inr}});
		}
		 
    cfgfil_cfgbHeader = [
      {
				title: <Label itext="交易名称" />,
				dataIndex: "frmnam",
				key: "frmnam", 
				width: 100,
				render: (val, row) => {
						if (row.alwflg == 0) {
								return (<a href='javascript:;' onClick={() => { this.link(row.frm) }} >{val}</a>)
						} else if (row.alwflg == 1) {
								return (<Tooltip title={row.res}>
										<span style={{ cursor: 'pointer', color: '#999' }}>{val}</span>
								</Tooltip>)
						}
				}
			}, 
    ]
   
    onRefClear=()=>{
      if(!this.model.ownref){
        this.model.clear()
        this.model.cfgfil_cfga=this.props.cfgfil_cfga
        this.model.cfgfil_cfgb=this.props.cfgfil_cfgb
      }
    }

    childEvevnt = childDate => {
      this.child = childDate;
    };

    handleClick=()=>{
      console.log('事件绑定成功')
      this.child.handleClick();
    }

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { bchlevelLst } = 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)} 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"),onBlur:this.onRefClear,onPressEnter:this.handleClick}}  maxLength={16}  desp="Own Reference BE Number" path="/bmdgrp/rec/ownref"  />
                            </Col>
                            <Col span={1} offset={1}>
                              <DanJu type="primary" model={this.model} childEvevnt={this.childEvevnt}  />
                            </Col> 
                            <Col span={1} offset={2}>
                              <CheckboxItem InputProps={bind("bmtmod_clsflg")}  desp="闭卷业务" path="/bmtmod/clsflg" />
                            </Col> 
                            <Col span={3}>
                              <Label itext="闭卷业务" />
                            </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}  desp="Externally Displayed Name to Identify the Contract" path="/bmdgrp/rec/nam" disabled={true} />
                            </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")} code={CodeTable.curtxt}  desp="Currency" path="/bmdgrp/cbs/max/cur" disabled={true}/>
                            </Col>
                            <Col span={7} offset={1}>
                              <InputItem   InputProps={ {...bind("max_amt"), type:"amount", cur:this.model.max_cur} } disabled={true} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label itext="申请人" />
                            </Col>
                            <Col span={14}>
                              <InputItem InputProps={bind("pts1_namcn")}  maxLength={100}  desp="客户中文名称" path="/dedgrp/apl/pts/namcn" disabled={true} />
                            </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")} code={CodeTable.curtxt}  desp="Currency" path="/bmdgrp/cbs/opn1/cur" disabled={true}/>
                            </Col>
                            <Col span={7} offset={1}>
                              <InputItem   InputProps={ {...bind("opn1_amt"), type:"amount", cur:this.model.opn1_cur} } disabled={true} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            <Label itext="受益人" />
                        </Col>
                        <Col span={14}>
                          <InputItem InputProps={bind("pts2_namcn")}  maxLength={100}  desp="客户中文名称" path="/dedgrp/ben/pts/namcn" disabled={true} />
                        </Col>
                      </Row>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label itext="到单日期" />
                            </Col>
                            <Col span={14}>
                              <DatePickerItem InputProps={bind("opndat")}  desp="Date Opened/Issued" path="/bmdgrp/rec/opndat" disabled={true} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                            <Label itext="开证行" />
                        </Col>
                        <Col span={14}>
                          <InputItem InputProps={bind("pts3_namcn")}  maxLength={100}  desp="客户中文名称" path="/dedgrp/iss/pts/namcn" disabled={true} />
                        </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")}  desp="Maturity Date" path="/bmdgrp/rec/matdat" disabled={true} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                          <Label itext="提运单号" />
                        </Col>
                        <Col span={14}>
                          <InputItem InputProps={bind("expmno")}  maxLength={60}  desp="快递单号" path="/bmdgrp/rec/expmno" disabled={true} />
                        </Col>
                      </Row>
                    </Col>
                </Row >

                <Row>
                    <Col span={12}>
                      <Row className="row">
                        <Col span={5} offset={2}>
                          <Label itext="承兑到期日" />
                        </Col>
                        <Col span={14}>
                          <DatePickerItem InputProps={bind("accdat")}  desp="Acceptance Date" path="/bmdgrp/rec/accdat" disabled={true} />
                        </Col>
                      </Row>
                    </Col>
                    <Col span={12}>
                      
                    </Col>
                </Row >
                <Row>
									<Col span={12}>
										<Row className="row">
											<Col span={23} offset={1}>
												<Table rowKey="inr" columns={this.cfgfil_cfgbHeader}  dataSource={this.model.cfgfil_cfgb}   path="/cfgfil/cfgb"/>
											</Col>
										</Row>
									</Col>
									<Col span={12}></Col>
                </Row>
            </div >
        )
    }
}
