import React,{Component,Fragment} from 'react'
import {Page,Validator,Notification,FormItem,DatePickerItem,
    InputItem,Input,Bind,SelectItem,Button,Label,Image,Table} from '@/components/Common-Library'
import Api,{BASE_URI} from '@/service/api'
import mCptbat 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,Upload,Icon} from 'antd'


const CodeTable = CodeTableFactory.getInstance()


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

    constructor(props)
    {
        super(props)
        this.model = new mCptbat()
        this.bind = Bind.bind(this)
    }

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

    cbtlstHeader=[
    	{
    		title:<Label value="汇款人编号" />, 
    		dsp:`汇款人编号`,
    		dataIndex:"apltrf",
    		key:"apltrf",
    		width:110,
    	},
    	{
    		title:<Label value="汇款人账号" />, 
    		dsp:`汇款人账号`,
    		dataIndex:"aplact",
    		key:"aplact",
    		width:110,
    	},
    	{
    		title:<Label value="收款人名称" />, 
    		dsp:`收款人名称`,
    		dataIndex:"bennam",
    		key:"bennam",
    		width:110,
    	},
    	{
    		title:<Label value="收款人地址" />, 
    		dsp:`收款人地址`,
    		dataIndex:"benadr",
    		key:"benadr",
    		width:110,
    	},
    	{
    		title:<Label value="收款人账号" />, 
    		dsp:`收款人账号`,
    		dataIndex:"benact",
    		key:"benact",
    		width:110,
    	},
    	{
    		title:<Label value="收款人国家代码" />, 
    		dsp:`收款人国家代码`,
    		dataIndex:"bencty",
    		key:"bencty",
    		width:130,
    	},
    	{
    		title:<Label value="汇款币种" />, 
    		dsp:`汇款币种`,
    		dataIndex:"cur",
    		key:"cur",
    		width:100,
    	},
    	{
    		title:<Label value="汇款金额" />, 
    		dsp:`汇款金额`,
    		dataIndex:"amt",
    		key:"amt",
    		width:100,
    	},
    	{
    		title:<Label value="报文类型" />, 
    		dsp:`报文类型`,
    		dataIndex:"msgtyp",
    		key:"msgtyp",
    		width:100,
    	},
    	{
    		title:<Label value="[57A]收款人开户行" />, 
    		dsp:`[57A]收款人开户行`,
    		dataIndex:"benbnk",
    		key:"benbnk",
    		width:150,
    	},
    	{
    		title:<Label value="[56A]收款行帐户行" />, 
    		dsp:`[56A]收款行帐户行`,
    		dataIndex:"benbnkcor",
    		key:"benbnkcor",
    		width:150,
    	},
    	{
    		title:<Label value="汇款附言" />, 
    		dsp:`汇款附言`,
    		dataIndex:"commet",
    		key:"commet",
    		width:100,
    	},
    	{
    		title:<Label value="费用承担方" />, 
    		dsp:`费用承担方`,
    		dataIndex:"chato",
    		key:"chato",
    		width:110,
    	},
    	{
    		title:<Label value="手续费" />, 
    		dsp:`手续费`,
    		dataIndex:"feeamt",
    		key:"feeamt",
    		width:100,
    	},
    	{
    		title:<Label value="起息日" />, 
    		dsp:`起息日`,
    		dataIndex:"valdat",
    		key:"valdat",
    		width:100,
    	},
    	{
    		title:<Label value="收报行" />, 
    		dsp:`收报行`,
    		dataIndex:"rcvbnk",
    		key:"rcvbnk",
    		width:100,
    	},
    	{
    		title:<Label value="[72]给收报行指示" />, 
    		dsp:`[72]给收报行指示`,
    		dataIndex:"infmsg",
    		key:"infmsg",
    		width:150,
    	},
    	{
    		title:<Label value="申报类型" />, 
    		dsp:`申报类型`,
    		dataIndex:"dectyp",
    		key:"dectyp",
    		width:100,
    	},
    	{
    		title:<Label value="交易编码1" />, 
    		dsp:`交易编码1`,
    		dataIndex:"buscod",
    		key:"buscod",
    		width:100,
    	},
    	{
    		title:<Label value="交易金额1" />, 
    		dsp:`交易金额1`,
    		dataIndex:"busamt",
    		key:"busamt",
    		width:100,
    	},
    	{
    		title:<Label value="交易附言1" />, 
    		dsp:`交易附言1`,
    		dataIndex:"businf",
    		key:"businf",
    		width:100,
    	},
    	{
    		title:<Label value="交易编码2" />, 
    		dsp:`交易编码2`,
    		dataIndex:"buscodadd",
    		key:"buscodadd",
    		width:100,
    	},
    	{
    		title:<Label value="交易金额2" />, 
    		dsp:`交易金额2`,
    		dataIndex:"busamtadd",
    		key:"busamtadd",
    		width:100,
    	},
    	{
    		title:<Label value="交易附言2" />, 
    		dsp:`交易附言2`,
    		dataIndex:"businfadd",
    		key:"businfadd",
    		width:100,
    	},
    	{
    		title:<Label value="NRA账户" />, 
    		dsp:`NRA账户`,
    		dataIndex:"nraflg",
    		key:"nraflg",
    		width:100,
    	},
    	{
    		title:<Label value="保税区" />, 
    		dsp:`保税区`,
    		dataIndex:"bdqflg",
    		key:"bdqflg",
    		width:100,
    	},
    	{
    		title:<Label value="合同号" />, 
    		dsp:`合同号`,
    		dataIndex:"connum",
    		key:"connum",
    		width:100,
    	},
    	{
    		title:<Label value="发票号" />, 
    		dsp:`发票号`,
    		dataIndex:"invnum",
    		key:"invnum",
    		width:100,
    	},
    	{
    		title:<Label value="填报人" />, 
    		dsp:`填报人`,
    		dataIndex:"ownusr",
    		key:"ownusr",
    		width:100,
    	},
    	{
    		title:<Label value="填报人电话" />, 
    		dsp:`填报人电话`,
    		dataIndex:"telnum",
    		key:"telnum",
    		width:110,
    	},
    ]


    //按钮事件
    onUpload= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('cptbat/upload',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    Notification.success({message:'数据提交成功!'})
                    
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
    }
    onImp= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('cptbat/imp',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    Notification.success({message:'数据提交成功!'})
                    
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
    }
	
	onFileChange=({file,fileList,event})=>{
		if(file.status=='done')//上传成功
		{
			const {error,codetable,data,retcod} = file.response
			if(retcod == SUCCESS)
			{
				//处理成功
				runInAction(()=>{
					Object.assign(this.model,data)
				})
			}
			this.fileLoading=false
		}
		else if(file.status=='uploading') //上传中
		{
			this.fileLoading=true
		}
		else{
			this.fileLoading=false
		}
		console.log("文件上传状态："+file.status)
		console.log(file)
		console.log(event)
		console.log(fileList)
	}
	onReturnData=()=>(
		{data:
			JSON.stringify({
			data:this.model
			})
		}
	)

    //交易内实现
    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"  onClick={this.onImp} desp="导入汇款数据" path="/imp">
		                <Label value="导入汇款数据"  desp="导入汇款数据"/>
	                </Button>
                    </div>
					   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					   <div className='button2'>
						   <Upload action={BASE_URI+"cptbat/upload"} headers={{
							   	token:this.props.UserContext.token,
								userId:  this.props.UserContext.userId,
								terminalType:'WEB'
							   }}
							   accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
							   onChange={this.onFileChange}
							   name="file"
							   data={this.onReturnData}
							   >
								   <Button loading={this.fileLoading}>
										{
										this.fileLoading?null:
										<Icon type="upload" />
										 } 选择文件上传
										</Button>
							   </Upload>
                    </div>
                </div>
                <Row >
                    <Col span={24} >
					       <Table rowKey="inr" columns={this.cbtlstHeader}  scroll={{x:3500}} dataSource={this.model.cbtlst}   path="/cbtlst"/>
					</Col>
				</Row>	
		      </div>
			</Card>
		)
	}
}
