import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, Table, TextArea, ConfirmButton, Steps
} from '@/components/Common-Library'
import Api from '@/service/api'
import mCptspe from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import Basic from './Basic'
import Fee from '@/views/Public/Fee'
import Gle from '@/views/Public/Gle'
import Papper from '@/views/Public/Papper'
import Mt103 from '@/views/Public/Mt103'
import Cmt100 from '@/views/Public/Cmt100'
import Fmt100 from '@/views/Public/Fmt100'
import Bspt from '@/views/Public/Bspt'
import Dbb from '@/views/Public/Dbb'
import Dbe from '@/views/Public/Dbe'
import N99 from '@/views/Public/N99'


import { Card } from 'antd'

const StepItem = Steps.Item

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

	@observable
	extra = { inifrm: 'cptspe', sptinr: '', bchlevelLst: [] }

	@observable
	code = {}

	constructor(props) {
		super(props)
		this.state = {
			flag: true
		}
		this.model = new mCptspe()
	}
	async componentWillMount() {
		let sptinr = '';
		let rtnmsg = [];
		if (this.props.location.query) {
			sptinr = this.props.location.query.inr
			this.extra.sptinr = sptinr
			rtnmsg = await Api.post(this.extra.inifrm + '/init', { params: { sptinr } })
			Object.assign(this.code, { diptyp: rtnmsg.codetable.diptyp });
		} else {
			rtnmsg = await Api.post(this.extra.inifrm + '/init', {})
			Object.assign(this.code, { diptyp: rtnmsg.codetable.diptyp });
		}
		if (rtnmsg.retcod == SUCCESS) {
			Object.assign(this.model, rtnmsg.data)
			this.extra.bchlevelLst = rtnmsg.codetable.branchinr;
			this.setState({ flag: false })
		}
		else {
			Notification.error({ message: '服务端请求失败!' })
		}

		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor() //开启校验	
	}

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

	//清算路径
	// export const diptyp = [
	// 	{label:`挂账`,value:`GZ` },
	// 	{label:`转汇`,value:`ZH` },
	// 	{label:`解付`,value:`JF` },
	// 	{label:`退汇`,value:`TH` },
	onJiefu = () => {
		console.log("解付方式" + "this.model.diptyp");
		console.log(this.model.diptyp);
		switch (this.model.diptyp) {
			case 'TH':
				return (<StepItem title="报文信息">
					<N99 model={this.model} extra={this.extra} />
				</StepItem>)
				break;
			case 'ZH':
				return (<StepItem title="报文信息">
					<Mt103 model={this.model} extra={this.extra} />
				</StepItem>)
				break;
			default:
				return null
				break
		}
	}

	//清算路径
	onBspt = () => {
		console.log("清算路径" + "this.model.bopmod_szflg");
		console.log(this.model.bopmod_szflg);
		switch (this.model.bopmod_szflg) {
			case '1':
				return (<StepItem title="境外汇款申请书">
					<Dbb model={this.model} extra={this.extra} />
				</StepItem>)
				break;
			case '2':
				return (<StepItem title="境内汇款申请书">
					<Dbe model={this.model} extra={this.extra} />
				</StepItem>)
				break;
			case '3':
				return null
				break;
			default:
				return null
				break
		}
	}


	//交易内实现
	renderPage() {
		return (
			<Card title="汇入汇款挂账后续处理" size="small" className="transTitle">
				<Steps>
					<StepItem title="概况">
						<Basic model={this.model} extra={this.extra} code={this.code} flag={this.state.flag} />
					</StepItem>
					{this.onJiefu()}
					<StepItem title="费用">
						<Fee model={this.model} extra={this.extra} />
					</StepItem>
					<StepItem title="会计分录">
						<Gle model={this.model} extra={this.extra} />
					</StepItem>
					<StepItem title="外管申报">
						<Bspt model={this.model} extra={this.extra} />
					</StepItem>
					{this.onBspt()}
					<StepItem title="面函">
						<Papper model={this.model} extra={this.extra} />
					</StepItem>
				</Steps>
			</Card>
		)
	}
}
