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 YwbhPicker1 extends React.Component {
    constructor() {
        super();
    }
    @observable
    visible = false

    @observable
    dataSource = []

    @observable
    loading = false

    @observable
    selectRowKeys = []


    async handleClick() {
        this.visible = true
        this.loading = true
        // 请求后台的信息（利用传入的url地址请求）
        let url = this.props.url;
        let flg = this.props.flg;
        let ownref1=this.props.ownref1;
        // "/cptspe/cptp_cpdque"
        const rtnmsg = await Api.post("ditsel/ditmod_sel", { params: { flg }, data: {ownref1} })
        if (rtnmsg.retcod == SUCCESS) {
            // 给table的dataSource赋值，重新渲染table
            this.dataSource = rtnmsg.data["ditmod_didlst"];
            console.log("this.dataSurce =======111========================")
            console.log(this.dataSource);
            console.log(this.ownref1);
        } else {
            Notification.error({ message: url + '服务端请求失败!' })
        }
        this.loading = false
    }
    handleCancel() {
        this.visible = false;
    }
    async onSelect(row) {
        console.log("row||||||||||||||||||||||||||||||||||||")
        console.log(row);
        const rtnmsg = await Api.post("ditsel/ditmod_choose", { params: { didinr: row.inr }, data: {} })
        // rtnmsg.data && Object.assign(this.props.model, rtnmsg.data);
        rtnmsg.data && this.props.onChange(rtnmsg.data);
        // const { model, prefix } = this.props;
        // if (model && prefix)   //默认赋值
        // {
        //     model[`${prefix}_extkey`] = row.extkey || ""
        //     let adrblk = ''
        //     let nam1 = row.nam1 || ""
        //     let nam2 = row.nam2 || ""
        //     let str1 = row.str1 || ""
        //     let str2 = row.str2 || ""
        //     if (nam1)
        //         adrblk = nam1
        //     if (nam2)
        //         adrblk = adrblk + "\r\n" + nam2
        //     if (str1)
        //         adrblk = adrblk + "\r\n" + str1
        //     if (str2)
        //         adrblk = adrblk + "\r\n" + str2
        //     model[`${prefix}_adrblk`] = adrblk;
        //     //model[`${prefix}_adrblk`] = (row.nam1 || "") + "\r\n" + (row.nam2 || "")+ "\r\n" + (row.str1 || "")+ "\r\n" + (row.str2 || "");
        // }
        // this.props.onSelect && this.props.onSelect(row)
        this.visible = false

    }
    render() {
        const columns = [
            {
                title: '选择',

                key: 'select',
                width: 70,
                render: (val, row) => {
                    return <Icon type="search" onClick={() => this.onSelect(row)} />
                }
            },
                {
                    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:"opndat",
                    key:"opndat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.opndat,r2.opndat),
                },
                {
                    title:"开证类型", 
                    dataIndex:"isstyp",
                    key:"isstyp",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.isstyp,r2.isstyp),
                    render:(val, row, index)=>{
                        let text = val
                        let em = CodeTable.isstyp.find(item=>item.value==val)
                        if(em)
                            text= em.label
                        return text
                    }
                },
                {
                    title:"贸易方式", 
                    dataIndex:"trdtyp",
                    key:"trdtyp",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.trdtyp,r2.trdtyp),
                    render:(val, row, index)=>{
                        let text = val
                        let em = CodeTable.trdtyp.find(item=>item.value==val)
                        if(em)
                            text= em.label
                        return text
                    }
                },
                {
                    title:"失效日期", 
                    dataIndex:"expdat",
                    key:"expdat",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.expdat,r2.expdat),
                },
                {
                    title:"对付方式", 
                    dataIndex:"avbby",
                    key:"avbby",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.avbby,r2.avbby),
                    render:(val, row, index)=>{
                        let text = val
                        let em = CodeTable.avbby.find(item=>item.value==val)
                        if(em)
                            text= em.label
                        return text
                    }
                },
                {
                    title:"效期", 
                    dataIndex:"tenmaxday",
                    key:"tenmaxday",
                    width:100,
                    sorter: (r1,r2)=>ColSorter(r1.tenmaxday,r2.tenmaxday),
                },
                {
                    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={600}
            >
                <Table
                    columns={columns}
                    dataSource={this.dataSource}
                     scroll={{x:1250}}
                >

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