import * as React from 'react';
import { AutoTableContainer, Table, Pagination, Tag, Drawer } from 'kts-xui';
import moment from 'moment';
import { columnEnum } from '../CommonComponents/ColumnEnum';
import { Tooltip } from 'kts-components-antd-x4';
import { findLabel, submitStatusEnum } from '../CommonComponents/FiledsEnum';

import agent from '../Server';
/** Props接口 */
interface IProps {
    onClose: () => void;
    invoiceUuid: string;
}

class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '核验方',
            dataIndex: 'verifierName',//这个字段特殊取的，统一的字段名字是verifierParty
            width: 160,
            ellipsis: true,
        }, {
            title: '时间',
            width: 130,
            dataIndex: 'submitTime',
            render: (text) => {
                return text && moment(text).format('YYYY-MM-DD HH:mm');
            }
        }, {
            title: '提交人',
            width: 130,
            dataIndex: columnEnum['提交人'],
        }, {
            title: '提交状态',
            width: 130,
            dataIndex: columnEnum['提交状态'],
            render: (text, record) => {
                if (text === 4) {
                    return <Tooltip title={record.submitMsg}><Tag>{findLabel(text, submitStatusEnum)}</Tag></Tooltip>
                } else {
                    return <Tag>{findLabel(text, submitStatusEnum)}</Tag>
                }
            }
        },

    ];
    constructor(props) {
        super(props);
        this.state = {
            pageMeta: null,
            list: [],
            params: {
                invoiceUuid: this.props.invoiceUuid
            },
            showModal: false,
            denyList: [],
            invoiceUuid: ''
        };
    }
    erifyRecords = id => {
        this.setState({
            invoiceUuid: id
        })
    }
    closeVerify = () => {
        this.setState({
            invoiceUuid: ''
        })
    }
    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 = {}) => {
        this.setState({
            params: data,
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1
        };
        this.getData(params);
    }
    getData = async (params?) => {
        const res: any = await agent.post('/asset/submit/submitInvoicePage', 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, } = this.state;
        return (
            <Drawer
                title="提交记录"
                onClose={this.onClose}
                visible={true}
                width={700}
                bodyStyle={{ paddingBottom: 0, display: 'flex', height: 'calc(100vh - 140px)', flexDirection: 'column', }}
            >
                <AutoTableContainer style={{ flex: 1,  }} >
                    <Table
                        className='fixheight'
                        dataSource={dataSource}
                        columns={this.columns as any}
                        pagination={false}
                        rowKey='subId'
                    />
                </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