import React,{Component} from 'react'
import {Tabs,Table,Card,Icon,Row,Col,Pagination} from 'antd'
import {
	Page, Validator, Notification, FormItem, DatePickerItem,
	InputItem, Input, Bind, SelectItem, Button, Label, Image, 
} from '@/components/Common-Library'
import "./index.less"
import { observer } from 'mobx-react'
import { observable } from 'mobx'
import ELCMessage from '@/components/Business-Library/ELCMessage'

import AmountInput from '@/components/Common-Library/AmountInput'

const TabPane = Tabs.TabPane

export default class FftEntry extends Component{
    render(){
        return (
            <Card size="small"  className="transTitle">
                <Tabs type="card" >
                    <TabPane tab="待复核" key="1">
                        <TabComponent />
                    </TabPane>

                    <TabPane tab="已退回" key="2">
                        <TabComponent />
                    </TabPane>
                    <TabPane tab="待确认" key="3">
                        <TabComponent />
                    </TabPane>
                    <TabPane tab="待回执" key="4">
                        <TabComponent />
                    </TabPane>
                </Tabs>
            </Card>
        )
    }
}

@observer
class TabComponent extends Component{
    
    headers = [
        {
            title:'业务编号'
        }
    ]
    @observable
    model = {ordno:''}

    render(){
        const bind = Bind.bind(this)
        const message = {"GrpHdr":{"InstgAgt":{"MmbId":"123","BrnchId":{"Id":"456"}}},"LCInfo":{"DtOfIss":"2019-09-18","LCAmt":{"amount":"0","Ccy":"CNY"},"PosFltRt":"0","NegFltRt":"0","IssBkInfo":{},"ApplBkInfo":{},"AdvsBkInfo":{},"ApplInfo":{},"BfcyInfo":{},"TraNm":{"Othr":""},"Hon":{"ExpOfPmt":""},"ContInfo":{"ContAmt":{"amount":"0","Ccy":"CNY"},"Contcnt":""},"NegoBkInfo":{},"TrsfBkInfo":[{}],"ConfBkInfo":{}}};

        return (
            <div className="entry_com_container">
                <AmountInput />
                <ELCMessage message={message} mty={"Elcs_101_001_01"}/>
                <Row>
                    <Col span={6} offset={1}>
                        <InputItem placeholder = "输入业务参考号搜索" InputProps={{...bind('ordno'),
                            size:'default',
                            placeholder:'输入单号搜索',addonAfter:
                            (<Icon type="search" title="搜索业务"/>
                            
                            ),
                            onPressEnter:()=>alert("123")
                        }} /> 
                    </Col>
                    <Col span={3} offset={1}>
                        <span>更多搜索条件</span>
                    </Col>
                    
                </Row>
                <div>
                    <div>

                    </div>
                </div>
                <Row className="entry_com_list_header">
                    <Col span={4} >
                        <span>业务参考号</span>
                    </Col>
                    <Col span={3}>
                        <span>币种</span>
                    </Col>
                    <Col span={3}>
                        <span>金额</span>
                    </Col>
                    <Col span={3}>
                        <span>通知行</span>
                    </Col>
                </Row>
                <div style={{height:'2.5rem',lineHeight:'2.5rem'}}>
                    <div style={{float:"right",display:'inline-block',height:'2.5rem',lineHeight:'2.5rem',padding:'8px'}}>
                        <Pagination size="small" pageSize={10} defaultCurrent={2} total={200} />
                    </div>
                </div>
                <ListItem /><ListItem /><ListItem /><ListItem /><ListItem /><ListItem />
            </div>
            
        )
    }
}

class ListItem extends Component{
    render(){
        const model = {credat:'2019-9-10',ownref:'LCSSSAA098789'}
        return <div className="entry_comp_list_item">
            <div className="enry_comp_item_header">
                <span className="enry_comp_item_dat">{model.credat}</span>
                <span className="enry_comp_item_ownref">{`业务编号：${model.ownref}`}</span>
                <span><Icon type="user" />张三</span>
                <div className="enry_comp_item_header_tool">
                
                    <Icon type="undo" title="撤销"/>
                    <Icon type="close-circle" title="关闭"/>
                    <Icon type="delete" title="删除"/>
                </div>
            </div>
            <div className="entry_comp_item_body">
                   <Row>
                        <Col span={4} >
                        <span>LC0000000001</span>
                        </Col>
                        <Col span={3}>
                        <span>CNY</span>
                        </Col>
                        <Col span={3}>
                        <span>1231323123213</span>
                        </Col>
                        <Col span={3}>
                        <span>中银行北京分行</span>
                        </Col>
                    </Row>
            </div>
        </div>
    }
}