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, autorun } from 'mobx'
import { Row, Col, Tooltip, Modal, Spin } 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 { YwbhPicker1 } from '@/components/Business-Library'
import Ditdck from '../model';


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)

    }


    //交易描述赋值
    componentDidMount() {
        super.componentDidMount()
        this.autoDispose = autorun(() => {
            this.model.nam = `${this.model.max_cur}   ${this.model.max_amt}   ${this.model.pts3_namcn || ""}`


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

    onTabFocus() {
        console.log('#我被选中#')
    }


    onTabBlur() {
        //this.goNext();
        console.log('#我已离开#')
    }
    //按钮事件 获取业务编号
    onGetref = async () => {
        this.model.ditmod_clsflg ? this.model.ditmod_clsflg = 'X' : this.model.ditmod_clsflg = null
        const rtnmsg = await Api.post(this.props.extra.inifrm + '/getref', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            // Notification.success({ message: 'cptopn/mtabut/getref数据提交成功!' })
            this.model.ownref = rtnmsg.data.ownref;
        }
        else {
            Notification.error({ message: '请求失败!' })
        }
        //余下逻辑处理
    }
    // 退出按钮
    onRtn = async () => {
        this.com.wrappedInstance.wrappedInstance.onRtn();
    }
    // 暂存按钮
    onPed = async () => {
        this.com.wrappedInstance.wrappedInstance.onPed();
    }
    // 校验 按钮
    onChk = () => {
        this.com.wrappedInstance.wrappedInstance.onChk();
    }

    onSav = () => {
        this.com.wrappedInstance.wrappedInstance.onSav();
    }



    //交易内实现
    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)} 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("ownref1")} 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("nam1")} 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={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>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 申请人名称 */}
                                <Label itext="申请人名称" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("pts7_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/apl/pts/namcn" />
                            </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("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} desp="Balance" path="/didgrp/cbs/opn1/amt" /> */}
                                <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="受益人名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts8_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/ben/pts/namcn" />
                        </Col>
                    </Col>

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

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


                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 通知行名称 */}
                                <Label itext="通知行名称" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("pts5_adrcn")} disabled={true} maxLength={100} desp="中文地址" path="/didgrp/adv/pts/adrcn" />
                            </Col>
                        </Row>
                    </Col>

                </Row >

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

                            <Col span={5} offset={2}>
                                {/* 开立日期 */}
                                <Label itext="开立日期" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("opndat1")} disabled={true} desp="开立日期" path="/didgrp/rec/opndat1" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>

                        <Col span={5} offset={2}>
                            {/* 有效地点 */}
                            <Label itext="有效地点" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("expplc")} disabled={true} maxLength={100} 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={10}>
                                <DatePickerItem InputProps={bind("expdat")} disabled={true} desp="有效日期" path="/didgrp/rec/expdat" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>

                        <Col span={5} offset={2}>
                            {/* 期限 */}
                            <Label itext="期限" trn="ditdck" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("tenmaxday1")} disabled={true} desp="期限" path="/didgrp/rec/tenmaxday" />
                        </Col>
                    </Col>
                </Row >


                <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="/bddgrp/rec/ownref" />
                            </Col>
                            <Col span={4} offset={1}>
                                <Button type="primary" onClick={this.onGetref} desp="Get Ref." path="/mtabut/getref">
                                    <Label itext="获取" />
                                </Button>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 单据描述 */}
                                <Label itext="单据描述" trn="ditdck" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("nam")} maxLength={100} desp="概要描述" path="/bddgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>

                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 单据金额 */}
                                <Label itext="单据金额" trn="ditdck" />
                            </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")} desp="Balance" path="/bddgrp/cbs/max/amt" /> */}
                                <InputItem InputProps={{ ...bind("max_amt"), type: "amount", cur: this.model.max_cur }} />
                            </Col>
                            <Col span={3}></Col>
                            <Col span={5} offset={2}>
                                {/* 交单行费用*/}
                                <Label itext="交单行费用" trn="ditdck" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("feecur"), onChange: val => {
                                        this.model.feecur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("feeamt")} desp="交单行费用金额" path="/bddgrp/rec/feeamt" /> */}
                                <InputItem InputProps={{ ...bind("feeamt"), type: "amount", cur: this.model.feecur }} />
                            </Col>
                            <Col span={3}></Col>
                            <Col span={5} offset={2}>
                                {/* 索偿金额 */}
                                <Label itext="索偿金额" trn="ditdck" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("doccur"), onChange: val => {
                                        this.model.doccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("docamt")} desp="索偿金额" path="/bddgrp/rec/docamt" /> */}
                                <InputItem InputProps={{ ...bind("docamt"), type: "amount", cur: this.model.doccur }} />
                            </Col>
                            <Col span={3}></Col>


                        </Row>

                    </Col>
                    <Col span={12}>

                        <Ptspta1 model={this.model} argArr={{ desc: "寄单行", prefix: 'pts2', url: 'ditdck/prep_ptysel', flg: 'B', datakey: '\\bdtp\\prep\\ptslst' }} />
                    </Col>

                </Row>



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


                            <Col span={5} offset={2}>
                                {/* 是否议付 */}
                                <Label itext="是否议付" trn="ditdck" />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("negsta")} code={CodeTable.yesno} desp="议付标识" path="/bddgrp/rec/negsta" />
                            </Col>

                            <Col span={3}></Col>


                            <Col span={5} offset={2}>
                                {/* 期限 */}
                                <Label itext="期限" trn="ditdck" />
                            </Col>
                            <Col span={12}>
                                <InputItem InputProps={bind("tenmaxday")} desp="期限" path="/bddgrp/rec/tenmaxday" />
                            </Col>

                            <Col span={4} offset={1}>天</Col>



                            <Col span={5} offset={2}>
                                {/* 到期日" */}
                                <Label itext="到期日" trn="ditdck" />
                            </Col>
                            <Col span={14}>
                                <DatePickerItem InputProps={bind("matdat")} desp="到期日" path="/bddgrp/rec/matdat" />
                            </Col>

                            <Col span={3}></Col>


                        </Row>

                    </Col>
                    <Col span={12}>

                        <Ptspta1 model={this.model} argArr={{ desc: "收单行", prefix: 'pts3', url: 'ditdck/rcvp_ptysel', flg: 'B', datakey: '\\bdtp\\rcvp\\ptslst' }} />
                    </Col>

                </Row>

                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 远期付款指示 */}
                                <Label itext="远期付款指示" trn="ditdck" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("payinf")} maxLength={60} desp="远期付款指示" path="/bddgrp/rec/payinf" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>

                        <Col span={5} offset={2}>
                            {/* 快递单号 */}
                            <Label itext="快递单号" trn="ditdck" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("tranum")} maxLength={60} desp="快递单号" path="/bddgrp/rec/tranum" />
                        </Col>
                    </Col>

                </Row >

                <Row style={{ marginTop: 30 }}>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 单据明细 */}
                            <Label itext="单据明细" trn="ditdck" />
                        </Col>

                        <Col span={14}  ><TextAreaItem rows={10} style={{ resize: "none" }} InputItem InputProps={bind("docinf")} desp="单据明细" path="/bddgrp/rec/docinf" /></Col>
                    </Col>

                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 发票信息*/}
                            <Label itext="发票信息" trn="ditdck" />
                        </Col>
                        <Col span={14}><TextAreaItem rows={10} style={{ resize: "none" }} InputItem InputProps={bind("invno")} maxLength={25} desp="发票信息" path="/bddgrp/rec/invno" /></Col>
                    </Col>

                </Row >




                <Row style={{ marginTop: 20 }}>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 寄单索款编号 */}
                                <Label itext="寄单索款编号" trn="ditdck" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("docref")} maxLength={20} desp="寄单索款编号" path="/bddgrp/rec/docref" />
                            </Col>

                        </Row>

                    </Col>

                </Row >

            



                <Row type="flex" justify="center">
                    <Col>
                        <div className='button0'>
                            <div className='button2'>
                                {/* 退出按钮 */}
                                <ConfirmButton
                                    onOK={this.onRtn}
                                    title=""
                                    message="确定退出？"
                                >
                                    <Label i18nId="MTABUT_BT000464" />
                                </ConfirmButton>
                            </div>
                            <div className='button2'>
                                {/* 暂存按钮 */}
                                <ConfirmButton
                                    onOK={this.onPed}
                                    title=""
                                    message="确定暂存？"
                                >
                                    <Label i18nId="MTABUT_BT000398" />
                                </ConfirmButton>
                            </div>
                            <div className='button2'>
                                {/* 检核按钮 */}
                                <Button onClick={this.onChk}>
                                    <Label i18nId="MTABUT_BT000180" />
                                </Button>
                            </div>
                            <div className='button2'>
                                <ConfirmButton icon="save"
                                    onOK={this.onSav}>
                                    <Label i18nId="MTABUT_BT000473" />
                                </ConfirmButton>
                            </div>


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

            </div >
        )
    }
}
