import * as React from 'react';
import { AutoTableContainer, Table, Pagination, Tag, Drawer } from 'kts-xui';
import { AdvancedSearch, KtsForm } from 'kts-components';
import moment from 'moment';
import { columnEnum } from '../CommonComponents/ColumnEnum';
import { findLabel, invoiceTypeEnum, nationStatusEnum, collectionModeEnum, handleStatusEnum } from '../CommonComponents/FiledsEnum';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import agent from '../Server';
import { Tooltip } from 'kts-components-antd-x4';
/** Props接口 */
interface IProps {
    onClose: () => void;
}

class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '采集状态',
            dataIndex: 'handleStatus',
            align: 'center',
            width: 100,
            render: (text, record) => {
                if (text === 1) {
                    return <Tag style={{ color: '#0074ff' }}>{findLabel(text, handleStatusEnum)}</Tag>
                } else {
                    return <Tooltip title={record.handleMsg}><ExclamationCircleOutlined style={{ color: 'red' }} /></Tooltip>
                }
            }
        },
        {
            title: '发票类型',
            width: 120,
            align: 'center',
            dataIndex: 'invoiceType',
            render: (text, record) => {
                if (text) {
                    return <Tag>{findLabel(text, invoiceTypeEnum)}</Tag>
                }
            }
        },
        {
            title: '国税状态',
            dataIndex: columnEnum['国税状态'],
            align: 'center',
            width: 120,
            render: (text) => {
                if (text === 1) {
                    return <Tag style={{ color: '#0074ff' }}>{findLabel(text, nationStatusEnum)}</Tag>
                } else {
                    return <Tag style={{ color: 'red' }}>{findLabel(text, nationStatusEnum)}</Tag>
                }
            }
        },
        {
            title: '销售方',
            dataIndex: columnEnum['销售方'],
            width: 160,
            ellipsis: true,
        }, {
            title: '购买方',
            dataIndex: columnEnum['采购方'],
            width: 160,
            ellipsis: true,
        }, {
            title: '发票号码',
            width: 190,
            dataIndex: 'invoiceNo',
        }, {
            title: '发票代码',
            width: 140,
            dataIndex: 'invoiceCode',
        }, {
            title: '开票日期',
            width: 130,
            dataIndex: 'invoiceDate',
            render: (text) => {
                return text && moment(text).format('YYYY-MM-DD');
            }
        }, {
            title: '采集方式',
            width: 130,
            dataIndex: columnEnum['采集方式'],
            render: (text, record) => {
                if (text) {
                    return <Tag>{findLabel(text, collectionModeEnum)}</Tag>
                }
            }
        }, {
            title: '采集时间',
            width: 160,
            dataIndex: columnEnum['采集时间'],
            ellipsis: true,
            render: text => {
                return text && moment(text).format('YYYY-MM-DD HH:mm')
            }
        }, {
            title: '采集人',
            width: 130,
            dataIndex: columnEnum['采集人'],
        },

    ];
    constructor(props) {
        super(props);
        this.state = {
            pageMeta: null,
            list: [
            ],
            params: {},
            showModal: false,
            selectedRowKeys: [],
            denyList: [],
            invoiceUuid: ''
        };
    }
    erifyRecords = id => {
        this.setState({
            invoiceUuid: id
        })
    }
    closeVerify = () => {
        this.setState({
            invoiceUuid: ''
        })
    }
    topExpand = () => {
        return (
            <AdvancedSearch
                width={480}
                height={44}
                compact={true}
                defaultKey="invoiceNo"
                placeholder="请输入发票号码"
                searchFormSubmit={this.onSearch}
            >
                <KtsForm
                    labelCol={9}
                    wrapperCol={15}
                    labelAlign="left"
                    compact={true}
                    schema={{
                        type: 'object',
                        properties: {
                            [columnEnum['采集状态']]: {
                                type: 'string',
                                title: '采集状态',
                                enum: handleStatusEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            [columnEnum['发票类型']]: {
                                type: 'string',
                                title: '发票类型',
                                enum: invoiceTypeEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            [columnEnum['国税状态']]: {
                                type: 'string',
                                title: '国税状态',
                                enum: nationStatusEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            [columnEnum['销售方']]: {
                                type: 'string',
                                title: '销售方',
                            },
                            [columnEnum['采购方']]: {
                                type: 'string',
                                title: '购买方',
                            },
                            invoiceCode: {
                                type: 'string',
                                title: '发票代码',
                            },
                            invoiceNo: {
                                type: 'string',
                                title: '发票号码',
                            },
                            kaipiao: {
                                type: 'daterange',
                                title: '开票日期',
                                'x-props': {
                                    extendsFields: ['minInvoiceDate', 'maxInvoiceDate'],
                                }
                            },
                            [columnEnum['采集方式']]: {
                                type: 'string',
                                title: '采集方式',
                                enum: collectionModeEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            endDate: {
                                type: 'daterange',
                                title: '采集时间',
                                'x-props': {
                                    extendsFields: ['minCreateTime', 'maxCreateTime'],
                                }
                            },
                            [columnEnum['采集人']]: {
                                type: 'string',
                                title: '采集人',
                            },

                        },
                    }}
                >
                </KtsForm>
            </AdvancedSearch>
        );
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10,
            ...this.state.params,
        };
        this.getData(params);
    }
    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);
    }
    onSearch = (data = {}) => {
        console.log(data);
        this.setState({
            params: data,
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1
        };
        this.getData(params);
    }
    getData = async (params?) => {
        params = {
            ...params,
            minInvoiceDate: params['minInvoiceDate'] && moment(params['minInvoiceDate']).format('YYYY-MM-DD 00:00:00'),
            maxInvoiceDate: params['maxInvoiceDate'] && moment(params['maxInvoiceDate']).format('YYYY-MM-DD 23:59:59'),
            minCreateTime: params['minCreateTime'] && moment(params['minCreateTime']).format('YYYY-MM-DD 00:00:00'),
            maxCreateTime: params['maxCreateTime'] && moment(params['maxCreateTime']).format('YYYY-MM-DD 23:59:59'),
        }
        const res: any = await agent.post('/collector/record/page', params, this);
        if (res.err) {
            return;
        } else {
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    onCaijiRefresh = () => {
        this.onRefresh();
    }
    onClose = () => {
        this.props.onClose();
    }
    render() {
        const dataSource = this.state.list;
        const { pageMeta, selectedRowKeys, invoiceUuid } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys
                });
            },
            getCheckboxProps: (record) => ({
                disabled: record.effectiveStatus !== 1
            }),
        }
        return (
            <Drawer
                title="采集记录"
                onClose={this.onClose}
                visible={true}
                width={1000}
                bodyStyle={{ padding: '10px 24px' }}
            >
                <div style={{ marginBottom: 10 }}>
                    {this.topExpand()}
                </div>
                <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                    <Table
                        className='fixheight'
                        dataSource={dataSource}
                        columns={this.columns as any}
                        bordered={true}
                        scroll={{ x: '1500', y: 'max-content' }}
                        pagination={false}
                        rowKey='id'
                    />
                </AutoTableContainer>
                {pageMeta && <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 >
        );
    }
}
export default UIComponents