import React,{Component,Fragment} from 'react'
import PropTypes from 'prop-types'
import {Page,Validator,Notification,FormItem,DatePickerItem,TextAreaItem,CheckboxItem,Checkbox,
    InputItem,Input,Bind,SelectItem,Button,Label,Image,Table,Steps} from '@/components/Common-Library'
import Api from '@/service/api'
import mGitsel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import Guarantee from './Guarantee'
import { action, observable,runInAction } from 'mobx'
import { Card ,Row ,Col} from 'antd'


const CodeTable = CodeTableFactory.getInstance()
const StepItem = Steps.Item


@inject('UserContext')
@inject('i18n')
@observer
export default class GitselScreen extends Page
{
    @observable
	extra = { inifrm: 'gitsel', sptinr: '', bchlevelLst: []}
    
    
    @observable
    formBlur=false

    constructor(props)
    {
        super(props)
		this.state = {
			flag: true
		}
        this.model = new mGitsel()    
    }
	
	async componentWillMount() 
	{
		/*
		*添加初始化代码
		*/
		const rtnmsg = await Api.post('gitsel/init',{data:this.model})
		if(rtnmsg.retcod == SUCCESS)
		{
           const {data} = rtnmsg
           runInAction(()=>{
                Object.assign(this.model,data)
           }) 
        }
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    //交易内实现
    renderPage(){
        return (
        	<Card title="Import Guarantee" size="small" className="transTitle">
                <Steps>
                    <StepItem title="Amendment of Guarantee">
                        <Guarantee model={this.model} extra={this.extra} flg="0"/>
                    </StepItem>
                    <StepItem title="Registeration of Claim">
                        <Guarantee model={this.model} extra={this.extra} flg="1"/>
                    </StepItem>
                    <StepItem title="Payment of Claim">
                        <Guarantee model={this.model} extra={this.extra} flg="2"/>
                    </StepItem>
                    <StepItem title="Cancelation of Guarantee">
                        <Guarantee model={this.model} extra={this.extra} flg="3"/>
                    </StepItem>
                    <StepItem title="Other Guarantee">
                        <Guarantee model={this.model} extra={this.extra} flg="4"/>
                    </StepItem>
                </Steps>
				<Button style={{ position: 'absolute', right: '3em', top: '4em' }} type="primary" size="small" onClick={() => { this.props.history.push('infgid') }}>
                    <Label itext="Guarantee Search" />
                </Button>
                <Button style={{ position:'absolute',right:'13em',top:'4em' }}  type="primary" size="small"  onClick={()=>{this.props.history.push('gitopn')}} desp="进口保函开立">
                    <Label   itext="Creating a Guarantee"/>
                </Button>
		    </Card>
		)
	}
}
