import * as React from 'react';
import { Table, Button, Form, Input, Drawer } from 'kts-xui';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import { Alert } from 'kts-components-antd-x4'

import agent from '../../../Server';
/** Props接口 */
interface IProps {
    onClose: () => void;
    value: string | number[];
    list?: string[];
    onSave: (values) => void;
    type?: boolean;
    threeInone?: any;
}
export default class UIComponents extends React.Component<IProps, any> {
    formRef:any = React.createRef<FormInstance>();
    columns = [
        {
            title: '单据名称',
            dataIndex: 'originalDocument',
            width: 240,
        },

    ];
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: this.props.value,
            list: this.props.list || [],
            pageMeta: null,
            filterList: []
        }
    }
    componentDidMount() {
        if (this.props.threeInone&&this.props.threeInone.goodsUuid) {
            this.getData();
        } else {
            this.setState({
                filterList: this.props.list
            })
        }
    }
    getData = async () => {
        const res: any = await agent.post('/collector/task/listGoodsWithDoc', { ...this.props.threeInone }, this);
        if (res.er) {
            return;
        } else if (res.res) {
            this.setState({
                list: res.res,
                filterList: res.res
            })
        }
    }
    onFinish = values => {
        if (values.name ) {
            const { list } = this.state;
            const filter = list.filter(item => item.originalDocument.indexOf(values.name) >= 0);
            this.setState({
                filterList: filter,
            })
        } else {
            if (this.props.threeInone&&this.props.threeInone.goodsUuid) {
                this.setState({
                    filterList: this.state.list
                })
            } else {
                this.setState({
                    filterList: this.props.list
                })
            }
        }
        this.onRefresh();
    }
    onRefresh = () => {
        this.setState({
            selectedRowKeys: []
        })
    }
    onSave = () => {
        const { selectedRowKeys } = this.state;
        this.props.onSave(selectedRowKeys);
    }
    render() {
        const { selectedRowKeys, filterList } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys) => {
                this.setState({
                    selectedRowKeys
                })
            },

            selectedRowKeys
        };
        return (
            <Drawer
                title='关联单据'
                onClose={this.props.onClose}
                visible={true}
                width={400}
                footer={
                    <div style={{ textAlign: 'right' }}>
                        <Button type="primary" onClick={this.onSave}>保存</Button>
                    </div>}
            >
                <>
                    <Form
                        ref={this.formRef}
                        onFinish={this.onFinish}
                        layout="inline"
                        style={{ marginBottom: 10 }}
                    >
                        <Form.Item
                            name='name'
                            label=''
                        >
                            <Input style={{ width: 200 }} placeholder='请输入单据名称进行搜索' />
                        </Form.Item>
                        <Form.Item>
                            <Button type='primary' htmlType="submit">查询</Button>
                        </Form.Item>
                    </Form>
                    { this.props.type === true && <Alert style={{ marginBottom: 10 }} message='批量关联将会覆盖之前的关联关系' type="warning" showIcon closable></Alert>}
                    {filterList &&
                        <Table
                            dataSource={filterList}
                            columns={this.columns}
                            rowKey="docUuid"
                            rowSelection={rowSelection}
                        />
                    }
                </>
            </Drawer>);
    }

}