import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, Table, TextArea, ConfirmButton, Steps, Checkbox, TextAreaItem,
} 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 { UnicodePicker, ContryCodePicker } from '@/components/Business-Library'
import Business from '@/views/Public/Business'

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

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

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

    componentWillUnmount() {
       // this.model.closeValidate()//关闭校验
    }


    // 退出按钮
	onRtn = async () => {
		this.com.wrappedInstance.wrappedInstance.onRtn();
	}
	// 暂存按钮
	onPed = async () => {
		 this.com.wrappedInstance.wrappedInstance.onPed();
	}
	// 校验 按钮
	onChk = () => {
		this.com.wrappedInstance.wrappedInstance.onChk();
	}
	
    //按钮事件
    onGetref0 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/getref0', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    onCustype = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/custype', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    //按钮事件
    onCodsel1_selbut = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/codsel1_selbut', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    onCodsel1_selbut1 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/codsel1_selbut1', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
  
    onSel0 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/sel0', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    
    onGetref1 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/getref1', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
   
 
    onSel2 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/sel2', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
   
 
    onGetref = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/getref', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    onSel = async () => {
        this.formBlur = true  //已触发表单提交处理
        const rtnmsg = await Api.post('cptadv/sel', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            Notification.success({ message: '数据提交成功!' })

        }
        else {
            Notification.error({ message: '服务端请求失败!' })
        }
        //余下逻辑处理

    }

    onExtkey0 = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('cptadv/extkey0', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    loading = false;

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        // dba
        // DBAP_LT000001
        // if(this.loading==false){
        //     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 value="收付汇日期（生成申报号码时填写）" />
                            </Col>
                            <Col span={14}>
                                {/*  // \mtabut\paydat    收付汇日期  收付汇日期（生成申报号码时填写） 日期 选择输入框 */}
                                <DatePickerItem InputProps={bind("mtabut_paydat")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 基础信息 复选框 */}
                                <Checkbox desp="基础信息" path="/mtabut/basflg" />
                                <Label value="基础信息" />
                            </Col>
                            <Col span={5} offset={2}>
                                {/* 申报信息 复选框 */}
                                <Checkbox desp="申报信息" path="/mtabut/dclflg" />
                                <Label value="申报信息" />
                            </Col>
                            <Col span={5} offset={2}>
                                {/* 管理信息 */}
                                <Checkbox desp="管理信息" path="/mtabut/vrfflg" />
                                <Label value="管理信息" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="基础信息" />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第二，三，四行 */}
                <Row>
                    <Col style={{ height: "auto" }} span={12}>
                        {/* 第二行左边 */}
                        {/* <Row type="flex" align="center"> */}
                        {/* <Row className="row"> */}
                        <Row type="flex" style={{ height: "65px", "line-height": "40px", }}>
                            <Col span={5} offset={2}>
                                {/* 申报号码 */}
                                <Label value="申报号码" />
                            </Col>
                            <Col span={10}>
                                {/* // \bopmod\dbagrp\bas\rptno    申报号码 申报号码 输入框 */}
                                <InputItem InputProps={bind("bas2_rptno")} />
                            </Col>
                            <Col span={4} offset={1}>
                                {/* 好像是 Ref. 申报号码右边的按钮 */}
                                <Button type="primary" onClick={this.onGetref0}>
                                    <Label i18nId="CPTP_BT000084" />
                                    {/* <Label i18nId="2" /> */}
                                </Button>
                            </Col>
                        </Row>
                        {/* 第三行左边 */}
                        <Row className="row">
                            {/* <Row> */}
                            <Col span={5} offset={2}>
                                {/* 操作类型 */}
                                <Label value="操作类型" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\actiontype    操作类型  操作类型 选择输入框 */}
                                <SelectItem InputProps={bind("bas2_actiontype")} code={CodeTable.actiontype} />
                            </Col>
                        </Row>
                        {/* 第四行左边 */}
                        <Row className="row">
                            {/* <Row> */}
                            <Col span={5} offset={2}>
                                {/* 地区机构 */}
                                <Label value="地区机构" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\ownextkey    initial entity code 地区机构 选择输入框 */}
                                <SelectItem InputProps={bind("bas2_ownextkey")} code={CodeTable.diqvjigou} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 修改/删除原因 */}
                                <Label value="修改/删除原因" />
                            </Col>
                            {/* <Col span={14} className="section"> */}
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\actiondesc    修改/删除原因 修改/删除原因 Section 详细信息？ */}
                                {/* <Section className="DbaSection" {...bind('bas_actiondesc')} /> */}
                                <TextAreaItem rows={4} style={{resize:"none"}} InputProps={bind('bas2_actiondesc')} />
                            </Col>
                            <Col span={5} offset={2}>
                                {/* 银行业务编号 */}
                                <Label value="银行业务编号" />
                            </Col>
                            <Col span={14}>
                                {/* // \jspmod\jhpmod\dbjgrp\bas\buscode    银行业务编号  银行业务编号 输入框 */}
                                <InputItem InputProps={bind("bas2_buscode")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第五行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* cusnam */}
                                <Label value="结/汇申请人主体类型" />
                            </Col>
                            <Col span={14}>
                                {/*  // \jspmod\jhpmod\dbjgrp\bas\custype    结/汇申请人主体类型 custype 选择输入框 */}
                                <SelectItem InputProps={bind("bas2_custype")} code={CodeTable.custype} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 组织机构代码 */}
                                <Label value="组织机构代码" />
                            </Col>
                            <Col span={14}>
                                {/* // \jspmod\jhpmod\dbjgrp\bas\custcod    组织机构 组织机构代码 输入框 */}
                                <InputItem InputProps={bind("bas2_custcod")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第六行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 身份证件号码 */}
                                <Label value="身份证件号码" />
                            </Col>
                            <Col span={14}>
                                {/*  // \bopmod\dbagrp\bas\idcode    个人身份证件号码 身份证件号码 选择输入框 */}
                                <InputItem InputProps={bind("bas2_idcode")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 结/汇申请人名称 */}
                                <Label value="结/汇申请人名称" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\custnm    结/汇申请人名称 输入框 */}
                                <InputItem InputProps={bind("bas2_custnm")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第七行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* cornam */}
                                <Label value="外汇账户账号" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\fcyacc    外汇账户账号 输入框 */}
                                <InputItem InputProps={bind("bas2_fcyacc")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* corpnam */}
                                <Label value="人民币账户账号" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\lcyacc    人民币账户账号 lcyacc 输入框 */}
                                <InputItem InputProps={bind("bas2_lcyacc")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第八行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 人民币/外汇收款人名称 */}
                                <Label value="人民币/外汇收款人名称" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\corpnam    人民币/外汇收款人名称  银行业务编号 输入框 */}
                                <InputItem InputProps={bind("bas2_corpnam")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* exratelab */}
                                <Label value="人民币/外汇户 开户行" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\corbnam    人民币/外汇户 开户行 exratelab 输入框 */}
                                <InputItem InputProps={bind("bas2_corbnam")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第九行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* lcyamtlab */}
                                <Label value="结汇币种金额" />
                            </Col>
                            <Col span={6}>
								<SelectItem InputProps={bind("bas2_fcyccy")} code={CodeTable.curtxt} />
							</Col>
                            <Col span={7} offset={1}>
                                {/*  // \bopmod\dbagrp\bas\lcyamt    结汇金额  lcyamtlab 输入框 */}
                                <InputItem InputProps={bind("bas2_fcyamt")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 汇率 */}
                                <Label value="汇率" />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\bas\lcyacc    人民币帐号/银行卡号 人民币账号  */}
                                <InputItem InputProps={bind("bas2_exrate")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="管理信息" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第一行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label i18nId={"DBAP_LT000021"} />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\dcl\rptno    申报号码 */}
                                <InputItem InputProps={bind("vrf2_rptno")} maxLength={22} desp="申报号码" />
                            </Col>
                        </Row>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label i18nId={"DBAP_LT000023"} />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("vrf2_actiontype")} code={CodeTable.actiontype} desp="操作类型" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label i18nId={"DBAP_LT000022"} />
                            </Col>
                            <Col span={14}>
                                {/* // \bopmod\dbagrp\dcl\actiondesc    修改/删除原因  */}
                                {/* <Section className="DbaSection" InputProps={bind("dcl_actiondesc")} desp="修改/删除原因" path="/bopmod/dbagrp/dcl/actiondesc" /> */}
                                <TextAreaItem rows={4} style={{resize:"none"}} InputProps={bind("vrf2_actiondesc")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>

                                <Label value="交易编码" />
                            </Col>
                            <Col span={10}>
                                <InputItem InputProps={bind("vrf2_txcode")} maxLength={6} desp="交易编码" />
                            </Col>
                            <Col span={4} offset={1}>
                                <UnicodePicker prefix="dcl_txcode" url="cptadv/codsel1_selbut" index="\bopmod\dbap\dclpp\codsel1\codlst" model={this.model} />
                                {/* <Button type="primary" icon="search" onClick={this.onCodsel1_selbut} desp="?" path="/bopmod/dbap/dclpp/codsel1/selbut">
                                    // {/* <Label i18nId="CODSEL_GT000001" desp="?" /> 
                                </Button> */}
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="外汇局批件号/备案表号/业务编号" />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("vrf2_regno")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="结汇用途" />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("vrf2_usetype")} code={CodeTable.usetype} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="结汇详细用途" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("vrf2_usedetail")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第五行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="填报人" />
                            </Col>
                            <Col span={10}>
                                <InputItem InputProps={bind("vrf2_crtuser")} />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="申报日期" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("vrf2_rptdate")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                {/* 第六行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                <Label value="填报人电话" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("vrf2_inptelc")} />
                            </Col>
                        </Row>
                    </Col>
                </Row>

                <Row type="flex" justify="center">
                    <Col>
                            <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>
                    </Col>
                </Row>
            </div>
        )
    }
}
