import * as React from 'react';
import { Table,AutoTableContainer } from 'kts-xui';
import { Modal, Pagination, Tooltip } from 'kts-components-antd-x4';
import { Drawer, Tag } from 'kts-xui';
import agent from '../Server';
import moment from 'moment';
import { findLabel, proveStatusEnum } from '../CommonComponents/FiledsEnum';
/** Props接口 */
interface IProps {
    onClose?: () => void;
    /**
     * 列表id
     */
    dataId?: string;
    /**
     * 发票id
     */
    invoiceUuid?: number;
}
export default class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '处理',
            dataIndex: 'operate',
            width: 120,
        },
        {
            title: '时间',
            dataIndex: 'createTime',
            width: 160,
            ellipsis: true,
            render: (text) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            }
        },
        {
            title: '证明结果',
            width: 100,
            dataIndex: 'proveStatus',
            render: (text, record) => {
                if (text === 1) {
                    return <span style={{ color: '#0074ff' }}>正常</span>
                } else if (text === 2 || text == 4) {
                    return <Tooltip title={record.proveMsg}><span style={{ color: 'red' }}>{findLabel(text, proveStatusEnum)}</span></Tooltip>
                }
            }
        },



    ];
    constructor(props) {
        super(props);
        this.state = {
            dataId: this.props.dataId,
            invoiceUuid: this.props.invoiceUuid,
            list: [],
            pageMeta: null,
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10
        };
        this.getData(params);
    }
    getData = async (params) => {
        params = {
            ...params,
            dataId: this.state.dataId,
            invoiceUuid: this.state.invoiceUuid,
        }
        const res: any = await agent.post('/web/verifier/invoice/record/queryRecordPage', params, this);
        if (res.er) {
            return;
        } else if (res.res) {
            this.setState({
                list: res.res.items,
                pageMeta: res.res.pageMeta,
            })
        }

    }
    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 { pageMeta, list } = this.state;
        return (
            <Drawer
                title='复验记录'
                onClose={this.props.onClose}
                visible={true}
                width={900}
                footer={null}
                bodyStyle={{ paddingBottom: 0, display: 'flex', height: 'calc(100vh - 140px)', flexDirection: 'column', }}
            >
                <AutoTableContainer style={{ flex: 1 }} >
                    {list &&
                        <Table
                            dataSource={list}
                            columns={this.columns}
                            pagination={false}
                        />
                    }
                </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>);
    }

}