import React from 'react';
import { Table, Drawer, Button, Pagination } from 'kts-xui';
import { KtsForm } from 'kts-components';
import { FormButtonGroup, Submit } from "@formily/antd";
import moment from 'moment';
import agent from '../../../Server';
interface IProps {
    onClose: () => void;
    importInvoice: (list) => void;
}
export default class SellerImport extends React.Component<IProps, any> {
    columns = [
        {
            title: '销售方',
            dataIndex: 'seller',
            ellipsis: true,

        }, {
            title: '采购方',
            dataIndex: 'buyer',
            key: 'buyer',
            ellipsis: true,
        }, {
            title: '发票号码',
            width: 190,
            dataIndex: 'invoiceNo',
        }, {
            title: '发票代码',
            dataIndex: 'invoiceCode',
            width: 120,
        }, {
            title: '开票日期',
            dataIndex: 'invoiceDate',
            width:170,
            render: (text) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            }
        }, {
            title: '金额',
            dataIndex: 'money',
            width:80
        },
    ];
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: [],
            selectedRows: [],
            pageMeta: {
                pageNum: 1,
                pageSize: 10,
                pages: 0,
                total: 0,
            },
            list: [
                {
                    key: '1',
                    seller: '重庆德赛电力设备有限公司',
                    buyer: '北京进步时代科技有限公司',
                    invoiceNo: '08175812',
                    invoiceCode: '1100212130',
                    invoiceDate: '2021-08-26',
                },
            ],
        }
    }
    onSubmitSchema = (value) => {
        console.log(value);
    }
    getData = async (params) => {
        const res: any = await agent.post('', params,this);
        if (res.er) {
            return;
        } else if(res.res){
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    /**
     * 导入发票
     */
    onImport = () => {
        
        const { selectedRows } = this.state;
        this.props.importInvoice(selectedRows);
    }
    onPageChange = (pageNum, pageSize) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefresh();
        });
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getData(params);
    }
    render() {
        const dataSource = this.state.list;
        const { pageMeta } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys,
                    selectedRows
                });
            }
        }
        return (
            <Drawer
                title='进项发票采集导入'
                onClose={this.props.onClose}
                visible={true}
                width={1000}
            >
                <KtsForm
                    labelAlign="left"
                    onSubmit={this.onSubmitSchema}
                    schema={{
                        type: 'object',
                        properties: {
                            grid: {
                                type: 'void',
                                "x-component": "mega-layout",
                                "x-component-props": {
                                    "grid": true,
                                },
                                properties: {
                                    buyer: {
                                        type: 'string',
                                        title: '销售方',
                                    },
                                    "[startDate,endDate]": {
                                        key:"[startDate,endDate]",
                                        name: "[startDate,endDate]",
                                        title: '开票日期',
                                        type: 'daterange',
                                        'x-props': {
                                            style: {
                                                width: '100%',
                                            },
                                        },
                                    },
                                },
                            },
                        },
                    }
                    }
                >
                    <FormButtonGroup style={{ justifyContent: 'end' }} align="right">
                        <Button type="primary" onClick={this.onImport}>导入</Button>
                        <Button htmlType='submit'>查询</Button>
                    </FormButtonGroup>
                </KtsForm>
                <Table
                    rowSelection={rowSelection}
                    dataSource={dataSource}
                    columns={this.columns}
                    pagination={false}
                >
                </Table>
                <Pagination onChange={this.onPageChange} showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条,  共有 ${total} 条`} style={{ padding: '16px 0', flex: 'none', background: 'white', textAlign: 'center' }} total={pageMeta.total} pageSize={pageMeta.pageSize} current={pageMeta.pageNum} showSizeChanger={true} />
            </Drawer>
        );
    }
}