import React, { Component, Fragment } from 'react'
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 mGetsel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'

import ChuKouBaoHan from './ChuKouBaoHan'
import { Card } from 'antd'
import DateFormat from '@/utils/DateUtil'

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


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

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



    constructor(props) {
        super(props)
        this.state = {
            flag: true
        }
        this.model = new mGetsel()
    }

    async componentWillMount() {
		/*
		*添加初始化代码
		*/
        const rtnmsg = await Api.post('getsel/init', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            const { data } = rtnmsg

            Object.assign(this.model, data)

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

    //交易内实现
    renderPage() {
        return (
            <Card title="Export Guarantee" size="small" className="transTitle">
                <Steps>
                    <StepItem title="Amendment of Guarantee">
                        <ChuKouBaoHan model={this.model} extra={this.extra} flg="0" />
                    </StepItem>
                    <StepItem title="Registeration of Claim">
                        <ChuKouBaoHan model={this.model} extra={this.extra} flg="1" />
                    </StepItem>
                    <StepItem title="Payment of Claim">
                       < ChuKouBaoHan model={this.model} extra={this.extra} flg="2" />
                    </StepItem>
                    <StepItem title="Cancelation of Guarantee">
                        <ChuKouBaoHan model={this.model} extra={this.extra} flg="3" />
                    </StepItem>
                    <StepItem title="Other Guarantee">
                       < ChuKouBaoHan 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('infged') }}>
                    <Label itext="Guarantee Search" />
                </Button>
                <Button style={{ position: 'absolute', right: '13em', top: '4em' }} type="primary" size="small" onClick={() => { this.props.history.push('getopn') }}>
                    <Label itext="Advising a Guarantee" />
                </Button>
            </Card>
        )

    }
}
