import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem
} from '@/components/Common-Library'
import { Row, Col } from 'antd'
import Api from '@/service/api'
import mCptsel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import moment from 'moment'



const CodeTable = CodeTableFactory.getInstance()

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

	constructor(props) {
		super(props)
		this.model = new mCptsel()
		this.model.openValidate() //开启校验
		this.bind = Bind.bind(this)
	}

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



	//按钮事件 
	onButton1 = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('cptsel/button1', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.props.history.push("/business/cptopn");
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}
	onButton2 = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('cptsel/button2', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.props.history.push("/business/cptadv");
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}
	onButton3 = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('cptsel/button3', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.props.history.push("/business/fetopn");
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}
	onButton4 = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('cptsel/button4', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.props.history.push("/business/fetopn");
			}
			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('cptsel/rtn', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.props.history.goBack();
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}


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

		return (
			<div style={{ position: 'relative' }}>
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 返回按钮 */}
								<Button type="primary" onClick={this.onRtn}>
									<Label i18nId="MTABUT_BT000020" />
								</Button>
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第一行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 业务编号 */}
								<Label i18nId={"CPTP_LT000001"} />
							</Col>
							<Col span={14}>
								{/* 业务编号 输入框 */}
								<InputItem InputProps={bind("ownref")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 业务概要信息 */}
								<Label i18nId={"CPTP_LT000002"} />
							</Col>
							<Col span={14}>
								{/* 业务概要信息 输入框 */}
								<InputItem InputProps={bind("nam")} />
							</Col>
						</Row>
					</Col>

				</Row>
				{/*第二行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 汇款金额 */}
								<Label i18nId={"CPTP_LT000003"} />
							</Col>
							<Col span={5}>
								{/* 汇款金额 选择输入框 */}
								<SelectItem InputProps={bind("cur")} />
							</Col>
							<Col span={8} offset={1}>
								{/* 汇款金额 输入框 */}
								<InputItem InputProps={bind("amt")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 起息日 */}
								<Label i18nId={"CPTP_LT000005"} />
							</Col>
							<Col span={14}>
								{/* 起息日 选择输入框 */}
								<DatePickerItem InputProps={bind("valdat")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第三行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 汇款类型 */}
								<Label i18nId={"CPTP_LT000006"} />
							</Col>
							<Col span={14}>
								{/* 汇款类型 选择输入框 */}
								<SelectItem InputProps={bind("cpdflg")} code={CodeTable.custyp} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 汇款方式 */}
								<Label i18nId={"CPTP_LT000007"} />
							</Col>
							<Col span={14}>
								{/* 汇款方式 选择输入框 */}
								<SelectItem InputProps={bind("paytyp")} code={CodeTable.paytyp} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第四行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 解付方式 */}
								<Label i18nId={"CPTP_LT000008"} />
							</Col>
							<Col span={14}>
								{/* 解付方式 选择输入框 */}
								<SelectItem InputProps={bind("diptyp")} code={CodeTable.diptyp} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 汇款行  */}
								<Label i18nId={"CPTP_LT000009"} />
							</Col>
							<Col span={14}>
								{/* 汇款行输入框 */}
								<InputItem InputProps={bind("orinam")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第五行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 汇款人 */}
								<Label i18nId={"CPTP_LT000010"} />
							</Col>
							<Col span={14}>
								{/* 汇款人 输入框 */}
								<InputItem InputProps={bind("orcnam")} />
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 收款行 */}
								<Label i18nId={"CPTP_LT000011"} />
							</Col>
							<Col span={14}>
								{/* 收款行 输入框 */}
								<InputItem InputProps={bind("pybnam")} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/*第六行*/}
				<Row>
					<Col span={12}>
						<Row className='row'>
							<Col span={5} offset={2}>
								{/* 收款人 */}
								<Label i18nId={"CPTP_LT000012"} />
							</Col>
							<Col span={14}>
								{/* 收款人 输入框 */}
								<InputItem InputProps={bind("pyenam")} />
							</Col>
						</Row>
					</Col>
				</Row>

				<div className='button0'>
					<div className='button2'>
						{/* 汇出汇款 按钮 */}
						<Button type="primary" onClick={this.onButton1}>
							<Label i18nId="CPTP_BT000014" />
						</Button>
					</div>
					<div className='button2'>
						{/* 汇入汇款 按钮 */}
						<Button type="primary" onClick={this.onButton2}>
							<Label i18nId="CPTP_BT000015" />
						</Button>
					</div>
					<div className='button2'>
						{/* 即期结汇 按钮 */}
						<Button type="primary" onClick={this.onButton3}>
							<Label i18nId="CPTP_BT000016" />
						</Button>
					</div>
					<div className='button2'>
						{/* 即期售汇 按钮 */}
						<Button type="primary" onClick={this.onButton4}>
							<Label i18nId="CPTP_BT000017" />
						</Button>
					</div>
				</div>





			</div>
		)
	}
}
