import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, Table, ConfirmButton, Steps
} from '@/components/Common-Library'
import { Row, Col } from 'antd'
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 Ptspta from '@/views/Public/Ptspta'

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

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

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

	componentDidMount() {
		// this.init();
	}

	componentWillUnmount() {
		this.model.closeValidate()//关闭校验
	}
	init = () => {
		this.formBlur = false  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post(this.props.extra.inifrm+'fetopn/init', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				Notification.success({ message: '数据提交成功!' })
				console.log(rtnmsg);
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}

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

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

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

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

		})
	}

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

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

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

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

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

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

		})
	}
	
	  goNext=()=>{
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, (errors, values) => {
			if(!errors)
			{   
				this.props.steps.go(1)
				return
			}
			for(let item of errors)
			{
				if(this.bindSet.has(item.field))
					return ;
			}
			this.props.steps.go(1)
		})
	}

	// onSav = () => {
	// 	this.formBlur = true  //已触发表单提交处理
	// 	Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
	// 		if (errors)
	// 			return

	// 		this.model.doccod = "absgle"
	// 		const rtnmsg = await Api.post('fetopn/butshw', { data: this.model })
	// 		if (rtnmsg.retcod == SUCCESS) {
	// 			Notification.success({ message: '数据提交成功!' })
	// 			var url = "/rectremit" + rtnmsg.data.docpth;
	// 			var viewurl = "http://172.17.2.110:8091/rectremit/pdfjs/web/viewer.html";
	// 			viewurl += "?file=" + url;
	// 			window.open(viewurl, 'newwindow', 'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no');
	// 			//console.log(rtnmsg.data.lst);
	// 		}
	// 		else {
	// 			Notification.error({ message: '服务端请求失败!' })
	// 		}
	// 		/*
	// 		const rtnmsg = await Api.post('fetopn/sav', { data: this.model })
	// 		if (rtnmsg.retcod == SUCCESS) {
	// 			Notification.success({ message: '数据提交成功!' })
	// 			console.log(rtnmsg.data.lst);
	// 		}
	// 		else {
	// 			Notification.error({ message: '服务端请求失败!' })
	// 		}
	// 		*/
	// 		//余下逻辑处理

	// 	})
	// }
	//按钮事件


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

		return (
			<div style={{ position: 'relative' }}>
				{/*第一行*/}
				<Row >
				   <Col span={12}>
						<Ptspta  model={this.model} argArr={{ desc: "结售汇申请人", prefix: 'pts', url: 'fetopn/aplp_ptysel', flg: 'C', datakey: '\\fetp\\aplp\\ptslst' }} />
				</Col>
				</Row>
				{/*第二行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 出账账户钞汇属性 */}
								<Label i18nId={"FETP_LT000013"} />
							</Col>
							<Col span={14}>
								{/* 出账账户钞汇属性 选择输入框 */}
								<SelectItem InputProps={bind("actcshflg")} code={CodeTable.cshflg} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 机构编码 */}
								<Label i18nId={"FETP_LT000011"} />
							</Col>
							<Col span={14}>
								{/* 机构编码 输入框 */}
								<InputItem InputProps={bind("bch_branch")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第三行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 出账币种/金额  */}
								<Label i18nId={"FETP_LT000014"} />
							</Col>
							<Col span={5}>
								{/* 出账币种/金额 选择输入框 */}
								<SelectItem InputProps={bind("nom1_cur")} code={CodeTable.curtxt} />
							</Col>
							<Col span={8} offset={1}>
								{/* 出账币种/金额 输入框 */}
								<InputItem InputProps={bind("nom1_amt")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 入账币种/金额 */}
								<Label i18nId={"FETP_LT000016"} />
							</Col>
							<Col span={5}>
								{/* 入账币种/金额 选择输入框 */}
								<SelectItem InputProps={bind("nom2_cur")} code={CodeTable.curtxt} />
							</Col>
							<Col span={8} offset={1}>
								{/* 入账币种/金额 输入框 */}
								<InputItem InputProps={bind("nom2_amt")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第四行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 出账科目/账号 */}
								<Label i18nId={"FETP_LT000018"} />
							</Col>
							<Col span={5}>
								{/* 出账科目/账号 选择输入框 */}
								<SelectItem InputProps={bind("dsp")} />
							</Col>
							<Col span={8} offset={1}>
								{/* 出账科目/账号 输入框 */}
								<InputItem InputProps={bind("acc")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 入账科目/账号  */}
								<Label i18nId={"FETP_LT000019"} />
							</Col>
							<Col span={5}>
								{/* 入账科目/账号 选择输入框 */}
								<SelectItem InputProps={bind("dsp2")} />
							</Col>
							<Col span={8} offset={1}>
								{/* 入账科目/账号 输入框 */}
								<InputItem InputProps={bind("acc2")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第五行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 牌价优惠方式 */}
								<Label i18nId={"FETP_LT000024"} />
							</Col>
							<Col span={14}>
								{/* 牌价优惠方式 选择输入框 */}
								<SelectItem InputProps={bind("pfttyp")} code={CodeTable.pfttyp} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 牌价优惠点数 */}
								<Label i18nId={"FETP_LT000025"} />
							</Col>
							<Col span={14}>
								{/* 牌价优惠点数 输入框 */}
								<InputItem InputProps={bind("pftpct")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第六行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 优惠后牌价 */}
								<Label i18nId={"FETP_LT000026"} />
							</Col>
							<Col span={14}>
								{/* 优惠后牌价 输入框 */}
								<InputItem InputProps={bind("rat")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 实时牌价 */}
								<Label i18nId={"FETP_LT000027"} />
							</Col>
							<Col span={14}>
								{/* 实时牌价 输入框 */}
								<InputItem InputProps={bind("currat")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第七行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 交易主体 */}
								<Label i18nId={"FETP_LT000028"} />
							</Col>
							<Col span={14}>
								{/* 交易主体 输入框 */}
								<InputItem InputProps={bind("trnman")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 结汇资金属性 */}
								<Label i18nId={"FETP_LT000029"} />
							</Col>
							<Col span={14}>
								{/* 结汇资金属性 输入框 */}
								<InputItem InputProps={bind("trdint")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第八行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 购汇资金用途 */}
								<Label i18nId={"FETP_LT000030"} />
							</Col>
							<Col span={14}>
								{/* 购汇资金用途 输入框 */}
								<InputItem InputProps={bind("trdout")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 业务参考号 */}
								<Label i18nId={"FETP_LT000002"} />
							</Col>
							<Col span={14}>
								{/* 业务参考号 输入框 */}
								<InputItem InputProps={bind("ownref")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第九行*/}
				<Row >
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 交易类型 */}
								<Label i18nId={"FETP_LT000009"} />
							</Col>
							<Col span={14}>
								{/* 交易类型 选择输入框 */}
								<SelectItem InputProps={bind("fxtyp")} code={CodeTable.fxtyp} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 开立日期 */}
								<Label i18nId={"FETP_LT000010"} />
							</Col>
							<Col span={14}>
								{/* 开立日期 选择输入框 */}
								<DatePickerItem InputProps={bind("opndat")} />
							</Col>
						</Row>
					</Col>
				</Row>


				<Row type="flex" justify="center">
	             <Col>
				{/*按钮*/}
					<div className='button0'>
					<div className='button2'>
						<Next onClick={this.goNext}>
							下一步
						</Next>
					</div>
					<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 type="primary" onClick={this.onChk}>
							<Label i18nId="MTABUT_BT000180" />
						</Button>
					</div>
				</div>
				</Col>
              </Row>
			</div>
		)
	}
}
