import React from 'react';
import { Button, Modal, Table, Icon, Row, Col, Input as Input1 } from 'antd';
import { observer } from 'mobx-react'
import Api from '@/service/api'
import { observable } from 'mobx'
import { Notification, Input, Label } from '@/components/Common-Library'
@observer
export default class UnicodePicker extends React.Component {
    constructor() {
        super();
        this.state = {
            dataSource: []
        }
    }
    @observable
    visible = false

    @observable
    loading = false

    @observable
    selectRowKeys = []

    // 保存数据 ， dataSource从这里获取值
    @observable
    dataSource = []
    data = []
    condition = ""
    handleSelectButton = () => {
        if (this.condition != "") {
            let temp = [];
            this.data.map((item) => {
                if (item.cod.indexOf(this.condition) != -1) {
                    temp.push(item);
                }
            });
            this.dataSource=temp;
        }
    }
    async handleClick() {
        this.visible = true
        this.loading = true
        // 请求后台的信息（利用传入的url地址请求）
        let url = this.props.url;
        // url = "cptadv/codsel1_selbut";
        let flg = this.props.flg;
        const rtnmsg = await Api.post(url, { params: { flg }, data: {} })
        if (rtnmsg.retcod == SUCCESS) {
            // 给table的dataSource赋值，重新渲染table
            let index = this.props.index;
            // this.dataSource = rtnmsg.data[this.props.dataKey];
            this.dataSource = rtnmsg.data[index];
            this.data = rtnmsg.data[index];
        } else {
            Notification.error({ message: url + '服务端请求失败!' })
        }
        this.loading = false
    }
    handleCancel() {
        this.visible = false;
    }
    onSelect(row) {
        const { model, prefix } = this.props;
        if (model && prefix)   //默认赋值
        {
            model[`${prefix}`] = row.cod;
            // model[`dcl_${prefix}`] = row.txt;
        }
        this.props.onSelect && this.props.onSelect(row)
        this.visible = false
    }
    render() {
        const columns = [
            {
                title: '选择',

                key: 'select',
                width: 100,
                render: (val, row) => {
                    return <Icon type="search" onClick={() => this.onSelect(row)} />
                }
            },
            {
                title: '交易编码',
                dataIndex: 'cod',
                key: 'cod',
                width: 100,
            },
            {
                title: '类型',
                dataIndex: 'dir',
                key: 'dir',
                width: 100,
            },
            {
                title: '描述',
                dataIndex: 'txt',
                key: 'txt',
                width: 350,
            },
        ]
        const props = this.props;
        return (<div style={{ width: 1000 }}>
            <Button type="primary" icon="search" {...this.props} onClick={() => this.handleClick()} />
            <Modal
                visible={this.visible}
                onCancel={() => this.handleCancel()}
                footer={<Button onClick={() => this.handleCancel()}>取消</Button>}
                width={650}
            >
                <Row>
                    <Col span={5}>
                        <Label value="交易编码" />
                    </Col>
                    <Col span={5}>
                        <Input1 onChange={(value) => {
                            this.condition = value.target.value
                            console.log(this.condition);
                        }}></Input1>
                    </Col>
                    <Col span={5}offset={1}>
                        <Button onClick={this.handleSelectButton}>查询</Button>
                    </Col>
                    {/* <Col span={5}>
                        <Button>选择</Button>
                    </Col> */}
                </Row>
                <Table
                    columns={columns}
                    dataSource={this.dataSource}
                    // style={{height:500}}
                    pagination={{ pageSize: 5 }}
                >
                </Table>
            </Modal>
        </div>);
    }
}