
import React from 'react';
import { Button, Modal, Table, Icon, } from 'antd';
import { observer } from 'mobx-react'
import Api from '@/service/api'
import { observable } from 'mobx'
import { Notification } from '@/components/Common-Library'
import CodeTableFactory from '@/components/CodeTable'
const CodeTable = CodeTableFactory.getInstance()
@observer
export default class DanJu extends React.Component {
    constructor(props) {
        super(props);
        this.state={
					canClick:true
        }
    }
    @observable
    visible = false

    @observable
    dataSource = []

		componentDidMount() {
			this.props.childEvevnt && this.props.childEvevnt(this);
		}

    async handleClick() {
        if(!this.state.canClick){
					return
				}
				this.setState({canClick:false})

        // 请求后台的信息
        const rtnmsg = await Api.post("detsel/detmod_sel", { 
            data: {
                ownref1:this.props.model.ownref1,
                detmod_clsflg:this.props.model.detmod_clsflg?'X':''
            } 
        })
        if (rtnmsg.retcod == SUCCESS) {
            // 给table的dataSource赋值，重新渲染table
            this.dataSource = rtnmsg.data['detmod_dedlst']; 
            if(this.dataSource && this.dataSource.length){
                this.visible = true
            }else{
                Notification.error({ message: '未查询到相关数据!' })
						}
        } else {
            Notification.error({ message: '服务端请求失败!' })
        }
				setTimeout(()=>{
					this.setState({canClick:true})
				},500)
    }
    handleCancel() {
        this.visible = false;
    }
    async onSelect(record) {
        
        const rtnmsg = await Api.post("detsel/detmod_choose", { params: { dedinr: record.inr }, data: {} })
        rtnmsg.data && Object.assign(this.props.model, rtnmsg.data);
        this.visible = false

    }
    render() {
        const columns = [
                {
                    title:"单据编号", 
                    dataIndex:"ownref",
                    key:"ownref",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
                },
                {
                    title:"概要描述", 
                    dataIndex:"nam",
                    key:"nam",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
                },
                {
                    title:"交单日期", 
                    dataIndex:"predat",
                    key:"predat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.predat,r2.predat),
                },
                {
                    title:"装运日期", 
                    dataIndex:"shpdat",
                    key:"shpdat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.shpdat,r2.shpdat),
                },
                {
                    title:"到期日", 
                    dataIndex:"matdat",
                    key:"matdat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.matdat,r2.matdat),
                },
                {
                    title:"承兑日期", 
                    dataIndex:"accdat",
                    key:"accdat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.accdat,r2.accdat),
                },
                {
                    title:"闭卷日期", 
                    dataIndex:"clsdat",
                    key:"clsdat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.clsdat,r2.clsdat),
                },
                {
                    title:"经办柜员", 
                    dataIndex:"ownusr",
                    key:"ownusr",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.ownusr,r2.ownusr),
                },
            ]
        const props = this.props;
        return (<div style={{ width: 1200 }}>
            <Button type="primary" icon="search" {...this.props} onClick={() => this.handleClick()} />
            <Modal
                visible={this.visible}
                onCancel={() => this.handleCancel()}
                footer={<Button onClick={() => this.handleCancel()}>取消</Button>}
                width={1200}
            >
                <Table
                    onRow={ record=>({onDoubleClick:()=>this.onSelect(record)}) }
                    columns={columns}
                    dataSource={this.dataSource}
                    pagination={ {pageSize:5,hideOnSinglePage:true} }
                    rowClassName={(row,index)=>
                        index%2===0 ? "twostyle" : "onestyle"
                    }
                >

                </Table>
            </Modal>
        </div>);
    }
}