import * as React from 'react';
import { Table, Drawer, Button, } from 'kts-xui';
import agent from '../../Server';
import { AdvancedSearch, KtsForm } from 'kts-components';
import { Row, Space } from 'kts-components-antd-x4';
/** Props接口 */
interface IProps {
    onClose: () => void;
    onSuccess: (value) => void;
}

export default class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '公司名称',
            dataIndex: 'customerName',
            width: 300,
            ellipsis: true,
        },
        {
            title: '纳税人识别号',
            dataIndex: 'customerTaxId',
        },

    ]
    constructor(props) {
        super(props);
        this.state = {
            didlist: [],
            pageNum: 1,
            pageSize: 10,
            pageMeta: null,
            selectedRow: {},
            params: {},
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10
        };
        this.getDidlist(params);
    }
    // TODO 客商请求接口要保持前缀相同，后期需要修改，需要后端提供对应服务的客商查询接口
    getDidlist = async (params) => {
        const res: any = await agent.post('/third/dependency/customerPage', params, this);
        if (!res.err) {
            this.setState({
                didlist: res.res.items,
                pageNum: res.res.pageMeta.pageNum,
                pageSize: res.res.pageMeta.pageSize,
                pageMeta: res.res.pageMeta,
            })
        }
    }
    onClose = () => {
        this.props.onClose();
    }
    onChange = (pagination) => {

        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum: pagination.current,
                pageSize: pagination.pageSize,
            },
        }, () => {
            this.onRefresh();
        })
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getDidlist(params);
    }
    onSearch = (data = {}) => {
        this.setState({
            params: data
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1,
        };
        this.getDidlist(params);
    }
    onSubmit = () => {
        this.props.onSuccess({ verifiedParty: this.state.selectedRow.customerName, verifiedPartyId: this.state.selectedRow.companyDid });
    }
    topExpand = () => {
        return (
            <div style={{ marginBottom: 10 }}>
                <AdvancedSearch
                    width={400}
                    height={44}
                    compact={true}
                    defaultKey="customerName"
                    placeholder="请输入公司名称"
                    searchFormSubmit={this.onSearch}
                >
                    <KtsForm
                        labelCol={9}
                        wrapperCol={15}
                        labelAlign="left"
                        compact={true}
                        schema={{
                            type: 'object',
                            properties: {
                                customerName: {
                                    type: 'string',
                                    title: '公司名称',
                                },
                                customerTaxId: {
                                    type: 'string',
                                    title: '纳税人识别号',
                                },
                            },
                        }}
                    >
                    </KtsForm>
                </AdvancedSearch>
            </div>
        );
    }
    render() {
        const dataSource = this.state.didlist;
        const { pageMeta } = this.state
        const rowSelection = {
            onChange: (selectedRowKeys: React.Key[], selectedRows) => {
                this.setState({
                    selectedRow: selectedRows[0]
                })
            },
        };
        return (
            <Drawer
                title="客商管理"
                onClose={this.onClose}
                visible={true}
                footer={
                    <Row justify='end'>
                        <Space align='end'>
                            <Button type="primary" onClick={this.onSubmit}>添加</Button>
                            <Button onClick={this.onClose}>取消</Button>
                        </Space>
                    </Row>}
                width={700}
            >
                {this.topExpand()}
                <Table rowSelection={{
                    type: 'radio',
                    ...rowSelection,
                }} rowKey='id' bordered dataSource={dataSource} columns={this.columns} pagination={pageMeta} onChange={this.onChange} />
            </Drawer>
        );
    }
}