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 mGitame from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable,runInAction } from 'mobx'
import Basic from './Basic'
import Ovwp from './Ovwp'
import Confp from './Confp'
import Detp from './Detp'
import Oth from './Oth'
import Fee from '@/views/Public/Fee'
import Gle from '@/views/Public/Gle'
import Papper from '@/views/Public/Papper'
import { Card } from 'antd'
import Engp from '@/views/Public/Engp'


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

@inject('UserContext')
@inject('i18n')
@observer
export default class GitameScreen extends Page
{
    static childContextTypes = {
        trn: PropTypes.string,
    }
    getChildContext () {
        return {trn:'gitame'}
    }
    
    
    @observable
    formBlur=false

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


    constructor(props)
    {
        super(props)
        this.model = new mGitame()    
        this.bind = Bind.bind(this)
        this.state = {
            flag: true
        }
    }
	
	async componentWillMount() 
	{
		/*
		*添加初始化代码
        */
        let gidinr='';
        if (this.props.location.query) {
			if(this.props.location.query.from=="sptsel"){
				this.extra.sptinr=this.props.location.query.sptinr;
			}else{
				gidinr=this.props.location.query.gidinr;
			}
		}
		const rtnmsg = await Api.post('gitame/init',{params: { sptinr:this.extra.sptinr,gidinr } })
		if(rtnmsg.retcod == SUCCESS)
		{
           const {data} = rtnmsg
           runInAction(()=>{
                Object.assign(this.model,data)
           }) 
            this.extra.oldinr=gidinr;
		    this.setState({ flag: false })
        }
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    //交易内实现
    renderPage(){
    	const bind = this.bind
        const {i18n} = this.props
             
        return (
        	<Card title="Amendment of Guarantee" size="small" className="transTitle">
                <Steps>
                    <StepItem title="Amendment ">
                        <Basic model={this.model} extra={this.extra} flag={this.state.flag} />
                    </StepItem>
                    <StepItem title="overview">
                        <Ovwp model={this.model} extra={this.extra} flag={this.state.flag} />
                    </StepItem>
                    <StepItem title="Confirmation Details">
                        <Confp model={this.model} extra={this.extra} flag={this.state.flag} />
                    </StepItem>
                    <StepItem title="Details">
                        <Detp model={this.model} extra={this.extra} flag={this.state.flag} />
                    </StepItem>
                    <StepItem title="Declaration of Indemnity">
                        <Oth model={this.model} extra={this.extra} flag={this.state.flag} />
                    </StepItem>
                    {/* <StepItem title="表外&保证金">
                        <Engp model={this.model} extra={this.extra} />
                    </StepItem>

                    <StepItem title="费用&账务">
                        <Fee model={this.model} extra={this.extra} />
                    </StepItem>
                    <StepItem title="会计分录">
                        <Gle model={this.model} extra={this.extra}   flag={this.state.flag}/>
                    </StepItem>

                    <StepItem title="面函">
                        <Papper model={this.model} extra={this.extra}  flag={this.state.flag}/>
                    </StepItem>
                 */}

                </Steps>
            </Card>
		)
	}
}
