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} from '@/components/Common-Library'
import Api from '@/service/api'
import mInfsmh from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable,runInAction } from 'mobx'
import { Row, Col, Card, Modal } from 'antd'
import ELCMessage from '@/components/Business-Library/ELCMessage'
import moment from 'moment'

const CodeTable = CodeTableFactory.getInstance()


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

    constructor(props)
    {
        super(props)
        this.model = new mInfsmh()    
        this.bind = Bind.bind(this)
    }
	
	async componentWillMount() 
	{
		/*
		*添加初始化代码
		*/
		const rtnmsg = await Api.post('infsmh/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()//关闭校验
    }

    onRecpan_show = async (row) => {
        let docpth = row.docpth
        const rtnmsg = await Api.post('infsmh/recpan_show', { params: { docpth } })
        //根据报文码获取报文名
        let namArr = CodeTable.docnam.find(item=>item.value==row.docfil)
        console.log(namArr)
        let docnam = ''
        if(namArr){
          docnam = namArr.label
        }else{
          docnam = row.docfil
        }
        if (rtnmsg.retcod == SUCCESS) {
          Modal.info({
            title: docnam, content: <div style={{ height: 400, overflow: 'auto' }}><ELCMessage mty={row.msgtyp} message={rtnmsg.data["recpan_docinf"]} /></div>,
            width: 1000,
          })
        }
        else {
          Notification.error({ message: '服务端请求失败!' })
        }
        //余下逻辑处理
  
    }

    recpan_smhlstHeader=[
    	{
    		title:<Label itext="业务编号" />, 
    		dataIndex:"extkey",
    		key:"extkey",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.extkey,r2.extkey),
    	},
    	// {
    	// 	title:<Label itext="创建交易" />, 
    	// 	dataIndex:"crefrm",
    	// 	key:"crefrm",
    	// 	width:100,
    	// 	sorter: (r1,r2)=>ColSorter(r1.crefrm,r2.crefrm),
    	// },
    	{
    		title:<Label itext="创建日期" />, 
    		dataIndex:"credattim",
    		key:"credattim",
    		width:100,
        sorter: (r1,r2)=>ColSorter(r1.credattim,r2.credattim),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="报文路径" />, 
    		dataIndex:"docpth",
    		key:"docpth",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.credattim,r2.credattim),
    	},
    	// {
    	// 	title:<Label itext="创建柜员" />, 
    	// 	dataIndex:"creusr",
    	// 	key:"creusr",
    	// 	width:100,
    	// 	sorter: (r1,r2)=>ColSorter(r1.creusr,r2.creusr),
    	// },
    	{
    		title:<Label itext="收发报" />, 
    		dataIndex:"dir",
    		key:"dir",
    		width:70,
    		sorter: (r1,r2)=>ColSorter(r1.dir,r2.dir),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.inout.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="报文码" />, 
    		dataIndex:"docfil",
    		key:"docfil",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.docfil,r2.docfil),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.msgtyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="报文名称" />, 
    		dataIndex:"nam",
    		key:"nam",
    		width:160,
        sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
        render:(val,row)=>{
          //通过报文码生成报文名称
          let text = row.docfil
    			let em = CodeTable.docnam.find(item=>item.value==text)
    			if(em)
    				text= em.label
    			return text
        }
    	},
    	{
    		title:<Label itext="回报信息" />, 
    		dataIndex:"rjctinf",
    		key:"rjctinf",
    		width:100,
        sorter: (r1,r2)=>ColSorter(r1.rjctinf,r2.rjctinf),
    	},
    	{
    		title:<Label itext="报文状态" />, 
    		dataIndex:"staflg",
    		key:"staflg",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.staflg,r2.staflg),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.smhstaflg.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="操作" />, 
    		dataIndex:"操作",
    		key:"操作",
    		width:70,
    		render:(val, row, index)=>{
    			return <a href="javascript:;" onClick={() => this.onRecpan_show(row)}>报文展示</a>
    		}
    	},
    ]


    //按钮事件
    onRecpan_search= ()=>{
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('infsmh/recpan_search',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
                    this.model.recpan_smhlst=rtnmsg.data.recpan_smhlst
                }
                else
                {
                	Notification.error({message:'服务端请求失败!'})
                }
                //余下逻辑处理
                    
        })
    }

    //消息处理测试按钮
    // onStart = async ()=>{
    //   const rtnmsg = await Api.post('switsk/start',{})
    //   if(rtnmsg.retcod == SUCCESS)
    //   {
    //     Notification.success({message:'数据提交成功!'})
                    
    //   }
    //   else
    //   {
    //     Notification.error({message:'服务端请求失败!'})
    //   }
    // }

    // //计提摊销测试
    // async onCalacr(){
    //   const rtnmsg = await Api.post('cobacr/calacr',{data:this.model})
    //   if(rtnmsg.retcod == SUCCESS)
    //   {
    //     Notification.success({message:'数据提交成功!'})
    //   }
    //   else
    //   {
    //     Notification.error({message:'服务端请求失败!'})
    //   }
    // }

    //交易内实现
    renderPage(){
    	const bind = this.bind
      const {i18n} = this.props
      return (
        <Card title="报文查询" size="small" className="transTitle">
          <div style={{ position: 'relative', padding: 20 }}>
            <Row>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="起始时间" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    <DatePickerItem InputProps={bind("recpan_dattimfro")} />
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="截止时间" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    <DatePickerItem InputProps={bind("recpan_dattimtil")} />
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="报文名称" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    {/* <InputItem InputProps={bind("recpan_frm")}  maxLength={6} /> */}
                    <SelectItem InputProps={bind("recpan_msgtyp")} code={CodeTable.docnam} />
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="业务编号" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    <InputItem InputProps={bind("recpan_ownref")}  maxLength={20} />
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="报文状态" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    <SelectItem InputProps={bind("recpan_sta")} code={CodeTable.smhstaflg} />
                  </Col>
                </Row>
              </Col>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="收发报" trn="infsmh" />
                  </Col>
                  <Col span={14}>
                    <SelectItem InputProps={bind("recpan_inout")} code={CodeTable.inout} />
                  </Col>
                </Row>
              </Col>
            </Row>

            {/* <Row>
              <Col span={12}>
                <Row className="row">
                  <Col span={5} offset={2}>
                    <Label itext="计提摊销日期" trn="infsmh" />
                  </Col>
                  <Col span={7}>
                    <DatePickerItem InputProps={bind("acrdat")} />
                  </Col>
                  <Col span={6} offset={2}>
                    <Button type="primary" icon="search" onClick={()=>this.onCalacr()}>
                      <Label i18nId="计提摊销" />
                    </Button>
                  </Col>
                </Row>
              </Col>
            </Row> */}

            <div className='button0'>
              <div className='button2'>
                <Button type="primary" icon="search" onClick={this.onRecpan_search}>
                  <Label i18nId="MTABUT_BT000022" />
                </Button>
              </div>
            </div>

            <Row style={{marginTop:30}}>
              <Col>
                <Table  
                  rowKey="inr" 
                  // onRow={ (row)=>({onClick:()=>this.onSelcon(row)}) } 
                  columns={this.recpan_smhlstHeader}
                  dataSource={this.model.recpan_smhlst}
                  pagination={{hideOnSinglePage:true}}
                />
              </Col>
            </Row>
          </div>
          {/* <Button style={{ position:'absolute',right:'3em',top:'4em' }}  type="primary" size="small" onClick={this.onStart}>
            <Label itext="消息处理测试" />
          </Button> */}
        </Card>
      )
	}
}
