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


const CodeTable = CodeTableFactory.getInstance()


@inject('UserContext')
@inject('i18n')
@observer
export default class DblfrmScreen extends Page
{
    @observable
		formBlur=false
		
		//复核层级码表，通用
		reltyp = [
			{label:"一级复核", value:"OA"},
			{label:"二级复核", value:"OAB"},
			{label:"三级复核", value:"OABC"},
			{label:"无需复核", value:"O"}
		]

    constructor(props)
    {
        super(props)
        this.model = new mDblfrm()    
        this.bind = Bind.bind(this)
    }
	
	async componentWillMount() 
	{
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    frmgrp_frmurlHeader=[
    	{
    		title:<Label itext="交易码" />, 
    		dataIndex:"frm",
    		key:"frm",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.frm,r2.frm),
    	},
    	{
    		title:<Label itext="交易名" />, 
    		dataIndex:"frmnam",
    		key:"frmnam",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.frmnam,r2.frmnam),
    	},
    	{
    		title:<Label itext="总行复核层级" />, 
    		dataIndex:"reltyp1",
    		key:"reltyp1",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = this.reltyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="一级分行复核层级" />, 
    		dataIndex:"reltyp2",
    		key:"reltyp2",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = this.reltyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="二级分行复核层级" />, 
    		dataIndex:"reltyp3",
    		key:"reltyp3",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = this.reltyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="支行复核层级" />, 
    		dataIndex:"reltyp4",
    		key:"reltyp4",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = this.reltyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="操作" />, 
    		dataIndex:"op",
    		key:"op",
				width:100,
				render: (val, row, index) => {
					return (
						<Link to={{ pathname: 'dbefrm', query: { selinr: row.inr,frm:row.frm } }}>编辑</Link>
					)
				}
    	},
    ]


    //按钮事件
    onSel= async()=>{
			const rtnmsg = await Api.post('dblfrm/sel',{data:this.model})
			if(rtnmsg.retcod == SUCCESS)
      {
        this.model.frmgrp_frmurl = rtnmsg.data.frmgrp_frmurl;            
      }
      else
      {
        Notification.error({message:'服务端请求失败!'})
      }
    }
    

    //交易内实现
    renderPage(){
    	const bind = this.bind
        const {i18n} = this.props
             
        return (
			<Card title="交易配置" size="small" className="transTitle">
        	<div style={{position:'relative'}}>

            <div className='button0'>
              <div className='button2'>
                <Button  type="primary" icon="search" onClick={this.onSel}>
		        			<Label itext="查询"/>
	            	</Button>
              </div>
            </div>

						<Table rowKey="frm" 
							columns={this.frmgrp_frmurlHeader}
							dataSource={this.model.frmgrp_frmurl}
							pagination={{ pageSize: 10, hideOnSinglePage: true }}
						/>
				</div>
			</Card>
		)
	}
}
