import * as React from 'react';
import { message, Button, Table, Drawer } from 'kts-xui';
import {  Pagination, Tag, Tooltip } from 'kts-components-antd-x4';
import { AdvancedSearch, KtsForm } from 'kts-components';
import agent from '../../../Server';
import moment from 'moment';
import {
    WarningOutlined,
    InfoCircleOutlined
} from '@ant-design/icons';
import { invoiceTypeEnum, nationStatusEnum, handleStatusEnum, findLabel, collectionModeEnum } from '../../../CommonComponents/FiledsEnum'
/** Props接口 */
interface IProps {
    onSuccess: () => void;
    taskUuid: string;
    status: number;
}
export default class UIComponents extends React.Component<any, any> {
    columns = [
        {
            title: '发票类型',
            dataIndex: 'invoiceType',
            key: 'invoiceType',
            align: 'center',
            width: 120,
            render: (text, record) => {
                if (text) {
                    return <Tooltip title={record.errorMsg}><Tag>{findLabel(text, invoiceTypeEnum)} {record.errorMsg && <WarningOutlined style={{ color: 'red' }} />}</Tag></Tooltip>
                } else {
                    if (record.errorMsg) {
                        return <Tooltip title={record.errorMsg}><WarningOutlined style={{ color: 'red' }} /></Tooltip>
                    }
                }

            }
        },
        {
            title: '采集状态',
            dataIndex: 'handleStatus',
            key: 'handleStatus',
            align:'center',
            width: 100,
            render: (text,record) => {
                if (text !== 1) {
                    return <span style={{ color: 'red' }}>{findLabel(text, handleStatusEnum)}</span>
                } else if (!text) {
                    return '-';
                } else {
                    return findLabel(text, handleStatusEnum)
                }
            }
        },
        {
            title: '国税状态',
            dataIndex: 'nationStatus',
            key: 'nationStatus',
            align:'center',
            width: 100,
            render: text => {
                return <span>{findLabel(text, nationStatusEnum)}</span>
            }
        },
        {
            title: '销售方',
            dataIndex: 'salerName',
            key: 'salerName',
            width: 190,
            ellipsis: true,
        },
        {
            title: '购买方',
            dataIndex: 'buyerName',
            key: 'buyerName',
            width: 190,
            ellipsis: true,
        },
        {
            title: '发票号码',
            dataIndex: 'invoiceNo',
            key: 'invoiceNo',
            width: 190,
        },
        {
            title: '发票代码',
            dataIndex: 'invoiceCode',
            key: 'invoiceCode',
            width: 140,
        },
        {
            title: '开票日期',
            dataIndex: 'invoiceDate',
            key: 'invoiceDate',
            width: 140,
            render: text => moment(text).format('YYYY-MM-DD')
        },
        {
            title: '采集方式',
            dataIndex: 'collectionMode',
            key: 'collectionMode',
            width: 100,
            render: text => {
                return <span>{findLabel(text, collectionModeEnum)}</span>
            }
        },
        {
            title: '采集时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 180,
            ellipsis: true,
            render: text => moment(text).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '采集人',
            dataIndex: 'collectMan',
            key: 'collectMan',
            width: 100,
            ellipsis: true,
        },
       
    ];
    constructor(props: IProps) {
        super(props);
        this.state = {
            list: [],
            menuKey: '',
            pageMeta: null,
            params: {},
            visible: false,
            taskUuid: this.props.taskUuid,
        };
    }
    componentDidMount() {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getData(params);
    }
    onReChech = async (key: string) => {
        const res: any = await agent.get('/web/verifiedTask/reCheckCollectInvoice', { recordUuid: key, taskUuid: this.state.taskUuid }, this);
        if (res.err) {
            return;
        } else {
            message.success('操作成功');
            this.onRefresh();
        }
    }
    getData = async (params) => {
        params = {
            ...params,
            taskUuid: this.state.taskUuid
        }
        const res: any = await agent.post('/collector/record/page', params, this);
        if (res.er) {
            return;
        } else if (res.res) {
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    onClose = () => {
        this.props.onSuccess();
    }
    onSuccess = (list: any[]) => {
        console.log(list);
    }
    refreshInvoice = () => {

    }
    handleMenuClick = e => {
        this.setState({
            visible: true,
            menuKey: e.key
        });
    };
    onSearch = (data = {}) => {
        data={
            ...data,
            minCreateTime:data['minCreateTime']&&moment(data['minCreateTime']).format('YYYY-MM-DD 00:00:00'),
            maxCreateTime:data['maxCreateTime']&&moment(data['maxCreateTime']).format('YYYY-MM-DD 23:59:59'),
        }
        this.setState({
            params: data,
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1,
        };
        this.getData(params);
    }
    radioChange = (e) => {
        this.props.changeView!(e.target.value);
    }
    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);
    }
    onCaijiRefresh = () => {
        this.onRefresh();
        this.props.onSuccess!();
    }
    topExpand = () => {
        return (
            <AdvancedSearch
                width={400}
                height={44}
                compact={true}
                defaultKey="invoiceNo"
                placeholder="请输入发票号码"
                searchFormSubmit={this.onSearch}
            // extra={<Radio.Group defaultValue="record" onChange={this.radioChange} style={{ flex: 'none', display: 'flex', marginRight: 10 }}>
            //     <Radio.Button value="invoice">发票信息</Radio.Button>
            //     <Radio.Button value="record">采集记录</Radio.Button>
            // </Radio.Group>}
            >
                <KtsForm
                    labelCol={6}
                    wrapperCol={18}
                    labelAlign="left"
                    compact={true}
                    schema={{
                        type: 'object',
                        properties: {
                            invoiceType: {
                                type: 'string',
                                title: '发票类型',
                                enum: invoiceTypeEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            nationStatus: {
                                type: 'string',
                                title: '国税状态',
                                enum: nationStatusEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            salerName: {
                                type: 'string',
                                title: '销售方',
                            },
                            buyerName: {
                                type: 'string',
                                title: '采购方',
                            },
                            invoiceNo: {
                                type: 'string',
                                title: '发票号码',
                            },
                            invoiceCode: {
                                type: 'string',
                                title: '发票代码',
                            },
                            invoiceDate: {
                                type: 'daterange',
                                title: '开票日期范围',
                                'x-props': {
                                    extendsFields: ['minInvoiceDate', 'maxInvoiceDate'],
                                }
                            },
                            collectionMode: {
                                type: 'string',
                                title: '采集方式',
                                enum: collectionModeEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            createDate: {
                                type: 'daterange',
                                title: '采集时间范围',
                                'x-props': {
                                    extendsFields: ['minCreateTime', 'maxCreateTime'],
                                    format: 'YYYY-MM-DD',
                                    showTime: true
                                }
                            },
                            collectMan: {
                                type: 'string',
                                title: '采集人',
                            },
                        },
                    }}
                >
                </KtsForm>
            </AdvancedSearch>
        );
    }
    render() {
        const { list, pageMeta } = this.state;
        const dataSource = list && list.map((item, index) => {
            return {
                ...item,
                index
            };
        });
        return (
            <Drawer
                title="采集记录"
                onClose={this.onClose}
                visible={true}
                footer={null}
                width={700}
            >
                <div style={{ display: 'flex', padding: '0 0px 10px' }}>
                    <div style={{ flex: 1 }}>
                        {this.topExpand()}
                    </div>
                    {/* <div style={{ display: 'flex', flex: 0, alignItems: 'center' }}>
                        {(status === 1 || status === 2) && <InvoiceComponent value={this.state.type} key='0' taskUuid={this.state.taskUuid} onSuccess={this.onCaijiRefresh}><Button type="primary">发票采集</Button></InvoiceComponent>}
                    </div> */}
                </div>
                {/* <PageHeaderFoot
                    expandLeft={this.topExpand()}
                    expandRight={[
                        <InvoiceComponent key='0' taskUuid={this.state.taskUuid} onSuccess={this.onRefresh}><Button type="primary">发票采集</Button></InvoiceComponent>,
                        // <Button key="1" type="primary" onClick={this.send}>请求证明</Button>,
                    ]}
                /> */}
                        <Table
                            className='fixheight'
                            dataSource={dataSource}
                            columns={this.columns as any}
                            scroll={{ x: '1400' }}
                            pagination={false}
                        />
                        {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>
        );
    }

}