import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem,BottomBtn,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps
} 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 { PtyPicker } from '@/components/Business-Library'
import { Link, withRouter } from 'react-router-dom'
import Ptspta from '@/views/Public/Ptspta'
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 CptopnBasicScreen extends Page {
	@observable
	formBlur = false

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

	onTabFocus(){
		console.log('#我被选中#')
	}
	
	onTabBlur(){
		//this.goNext();
		console.log('#我已离开#')
	}
	//按钮事件 获取业务编号
	async onGetref() {
		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: 'cptopn/mtabut/getref服务端请求失败!' })
		}
		//余下逻辑处理
	}
	/*退出按钮
	onRtn = async () => {
		this.com.wrappedInstance.wrappedInstance.onRtn();
	}
	// 暂存按钮
	onPed = async () => {
		 this.com.wrappedInstance.wrappedInstance.onPed();
	}
	// 校验 按钮
	onChk = () => {
		this.formBlur=true
		this.com.wrappedInstance.wrappedInstance.onChk();
	}
	async onRecal() {
		this.formBlur = true  //已触发表单提交处理
		const rtnmsg = await Api.post(this.props.extra.inifrm + '/setmod_ast', { data: this.model })
		if (rtnmsg.retcod == SUCCESS) {
			this.model.fegmod_feslst = rtnmsg.data.fegmod_feslst;
			this.model.glgmod_glslst = rtnmsg.data.glgmod_glslst;
		}
		else {
			Notification.error({ message: '服务端请求失败!' })
		}
		//余下逻辑处理
	}
	async onRecal1() {
		this.formBlur = true  //已触发表单提交处理
		const rtnmsg = await Api.post(this.props.extra.inifrm + '/setmod_recal', { data: this.model })
		if (rtnmsg.retcod == SUCCESS) {
			this.model.fegmod_feslst = rtnmsg.data.fegmod_feslst;
			this.model.glgmod_glslst = rtnmsg.data.glgmod_glslst;
		}
		else {
			Notification.error({ message: '服务端请求失败!' })
		}
		//余下逻辑处理
	}	
	
	goNext = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, (errors, values) => {
			if (!errors) {
				this.props.steps.go(1)
				this.onRecal()
				return
			}
			for (let item of errors) {
				if (this.bindSet.has(item.field))
					return;
			}
			this.props.steps.go(1)
		})
	}
	*/
	
	//清算路径
	onLiqtyp = () => {
		const liqtyp1 = [
			{ label: '01-SWIFT支付', value: 'SWT' },
			{ label: '02-境内外币支付', value: 'FMT' },
			{ label: '03-行内划转', value: 'ZZT' },
		]
		const liqtyp2 = [
			{ label: '03-行内划转', value: 'ZZT' },
			{ label: '04-跨境人民币支付', value: 'CIP' },
			{ label: '05-人民币大额支付', value: 'CMT' },
		]
		const cur = this.model.max_cur
		return (<SelectItem InputProps={{
			...this.bind("liqtyp"), disabled: !cur,
			onChange: val => {
				this.model.liqtyp = val
				this.model.swftyp = ""
			}
		}}
			code={!cur ? CodeTable.liqtyp : cur == 'CNY' ? liqtyp2 : liqtyp1}
		/>)

	}
	//报文类型 
	onSwftyp = () => {
		const swfcod = {
			SWT: [
				{ label: 'MT103', value: '103' },
				{ label: 'MT103+MT202', value: '103202' },
			],
			FMT: [
				{ label: 'FMT100', value: 'F00' },
				{ label: 'FMT101', value: 'F01' },
			],
			CIP: [
				{ label: 'CIPS001', value: 'C00' },
				{ label: 'CIPS101', value: 'C01' },
			],
			CMT: [
				{ label: 'CMT100', value: 'CM0' },
			],
		}
		swfcod.ZZT = swfcod.SWT
		const liqtyp = this.model.liqtyp
		return (
			<SelectItem InputProps={{ ...this.bind("swftyp"), disabled: (!liqtyp || liqtyp == 'ZZT') }} code={swfcod[liqtyp]} />
			//<SelectItem InputProps={{...this.bind("swftyp"),disabled: ( !liqtyp||liqtyp=='ZZT')}}  code={swfcod[liqtyp]}   />
		)
	}
	onCNYFMT = () => {		
		switch (this.model.liqtyp) {
			case 'FMT':
			case 'CIP':
			case 'CMT':
				return (<Ptspta1  model={this.model} argArr={{ desc: "汇款人", prefix: 'pts', url: 'cptopn/orcp_ptysel', flg: 'C', datakey: '\\cptp\\orcp\\ptslst' }} formBlur={this.formBlur}/>
)
				break;
			case 'SWT':
			case 'ZZT':
				return (<Ptspta  model={this.model} argArr={{ desc: "汇款人", prefix: 'pts', url: 'cptopn/orcp_ptysel', flg: 'C', datakey: '\\cptp\\orcp\\ptslst' }} formBlur={this.formBlur}/>
)
				break;
			default:
				return (<Ptspta  model={this.model} argArr={{ desc: "汇款人", prefix: 'pts', url: 'cptopn/orcp_ptysel', flg: 'C', datakey: '\\cptp\\orcp\\ptslst' }} formBlur={this.formBlur}/>
)
				break;
		}
	}

	//交易内实现
	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)} page={this} extra={this.props.extra}  model={this.model} />
				{/* 第一行 */}
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 业务编号 */}
								<Label i18nId={"CPTP_LT000022"} />
							</Col>
							<Col span={10}>
								<InputItem InputProps={bind("ownref")} disabled={true} />
							</Col>
							<Col span={4} offset={1}>
								<Button type="primary" onClick={() => this.onGetref()}>
									<Label i18nId="CPTP_BT000084" />
								</Button>
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 业务归属机构 */}
								<Label i18nId={"CPTP_LT000020"} />
							</Col> 
							<Col span={14}>
								<SelectItem InputProps={bind("ownbch")} code={bchlevelLst} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/* 第二行 */}
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 汇款方式 */}
								<Label i18nId={"CPTP_LT000032"} />
							</Col>
							<Col span={14}>
								<SelectItem InputProps={bind("paytyp")} code={CodeTable.paytyp} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 客户经理 */}
								<Label i18nId={"CPTP_LT000028"} />
							</Col>
							<Col span={14}>
								<InputItem InputProps={bind("pty_ownusr")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/* 第三行 */}
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 汇款币种金额 */}
								<Label i18nId={"CPTP_LT000033"} />
							</Col>
							<Col span={6}>
								<SelectItem InputProps={{
									...bind("max_cur"), onChange: val => {
										this.model.max_cur = val
										this.model.liqtyp = ""
										this.model.swftyp = ""
									}
								}}
									code={CodeTable.curtxt} />
							</Col>
							<Col span={7} offset={1}>
								<InputItem   InputProps={{...bind("max_amt"),type:"amount",cur:this.model.max_cur}} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 汇款人性质 */}
								<Label i18nId={"CPTP_LT000079"} />
							</Col>
							<Col span={14}>
								<SelectItem InputProps={bind("custyp")} code={CodeTable.ptytyp} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/* 第四行 */}
				{/* 第五行 */}
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 清算路径 */}
								<Label i18nId={"CPTP_LT000036"} />
							</Col>
							<Col span={14}>
								{this.onLiqtyp()}
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 报文类型 */}
								<Label i18nId={"CPTP_LT000037"} />
							</Col>
							<Col span={14}>
								{this.onSwftyp()}
							</Col>
						</Row>
					</Col>
				</Row>

				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 汇款人账号 */}
								<Label i18nId={"CPTP_LT000085"} />
							</Col>
							<Col span={14}>
								<InputItem InputProps={bind("orcacc")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 汇款类型 */}
								<Label i18nId={"CPTP_LT000078"} />
							</Col>
							<Col span={14}>
								<SelectItem InputProps={bind("cpdflg")} code={CodeTable.custyp} />
							</Col>
						</Row>
					</Col>
				</Row>

				{/* 第六行 */}
				{/*
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								<Label i18nId={"CPTP_LT000080"} />
							</Col>
							<Col span={6}>
								<SelectItem InputProps={bind("curf33b")} code={CodeTable.curtxt} />
							</Col>
							<Col span={7} offset={1}> 
								<InputItem InputProps={bind("amtf33b")} />
							</Col>
						</Row>

					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								<Label i18nId={"CPTP_LT000082"} />
							</Col>
							<Col span={14}>
								<InputItem InputProps={bind("f36")}  />
							</Col>
						</Row>
					</Col>
				</Row>
				*/}

				{/* 第八行 */}
				<Row>
					<Col span={12}>
					    {this.onCNYFMT()}
						{/*<Ptspta  model={this.model} argArr={{ desc: "汇款人", prefix: 'pts', url: 'cptopn/orcp_ptysel', flg: 'C', datakey: '\\cptp\\orcp\\ptslst' }} formBlur={this.formBlur}/>
						this.loadPtspta({desc:"收款人",prefix:'pts5',url:'cptopn/pyep_ptysel',flg:'C',datakey:'\\setmod\\msgmod\\pyep\\ptslst'})*/}
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 收款人国别 */}
								<Label value="收款人国别" />
							</Col>
							<Col span={14}>
								<SelectItem InputProps={bind("stacty")} code={CodeTable.bopcty} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*<Row>
				     {this.loadPtspta({desc:"我行账户行",prefix:'pts3',url:'cptopn/orip_ptysel',flg:'B',datakey:'\\setmod\\msgmod\\orip\\ptslst'})}
					 {this.loadPtspta({desc:"收款人",    prefix:'pts4',url:'cptopn/pybp_ptysel',flg:'B',datakey:'\\setmod\\msgmod\\pybp\\ptslst'})}
				</Row>
				<Row type="flex" justify="center">
					<Col>
							<div type="primary" className='button2'>
								<ConfirmButton
									onOK={this.onRtn}
									title=""
									message="确定退出？"
								>
									<Label i18nId="MTABUT_BT000464" />
								</ConfirmButton>
							</div>
							<div type="primary" className='button2'>
								<ConfirmButton
									onOK={this.onPed}
									title=""
									message="确定暂存？"
								>
									<Label i18nId="MTABUT_BT000398" />
								</ConfirmButton>
							</div>
							<div className='button2'>
								<Button type="primary" onClick={this.onChk}>
									<Label i18nId="MTABUT_BT000180" />
								</Button>
							</div>
					</Col>
				</Row>*/}
				{/* */}<BottomBtn _this={this} />
			</div >
		)
	}
}
