import { Badge, Descriptions } from 'kts-components-antd-x4';
import React from 'react';
import agent from '../../Server';
import { Table, Pagination, Button, PageHeaderFoot, Radio, AutoTableContainer } from 'kts-xui';
interface TaxCreditInfo{ 
    createTime: string;
    putDate: string;
    putDepartment: string;
    putReason: string;
    removeDate: string;
    removeDepartment: string;
    removeReason: string;
} 
interface IMeta {
    total?: number;
    pageSize?: number;
    pageNum?: number
}
export default function App (props: {id: number}) { 
    const [list, setList] = React.useState<TaxCreditInfo[]>();
    const [pageMeta, setMeta] = React.useState<IMeta>({ pageNum: 1, pageSize: 10 });
    const onPageChange = React.useCallback((pageNum, pageSize) => {
        const data = {
            ...pageMeta,
            pageNum,
            pageSize
        }; 
        setMeta(data);
    }, []);
    React.useEffect(()=>{
        if(props.id){
            (async () => {
                const res: any = await agent.post('/web/verifierparty/risk/query-abnormal', {id: props.id, pageNum:pageMeta.pageNum, pageSize: pageMeta.pageSize}, null);
                if (res.err) {
                    return;
                } else {  
                    setList(res.res.items.map((item, index)=>{
                        return {
                            ...item,
                            index: (res.res.pageMeta.pageNum - 1) * res.res.pageMeta.pageSize + index + 1
                        } 
                    }
                    ));  
                    setMeta(res.res.pageMeta);
                }
            })()
        }
    }, [props.id, pageMeta.pageNum, pageMeta.pageSize])

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            ellipsis: true, 
        }, {
            title: '列入日期',
            dataIndex: 'putDate',
            width: 120,
            ellipsis: true,
        }, {
            title: '列入经营异常名录原因',
            dataIndex: 'putReason',
            width: 140,
        }, {
            title: '列入决定机关',
            dataIndex: 'putDepartment',
            width: 100,
        }, {
            title: '移出日期',
            dataIndex: 'removeDate',
            width: 100,
        }, {
            title: '移出经营异常名录原因',
            dataIndex: 'removeReason',
            width: 140,
        }, {
            title: '移出部门',
            dataIndex: 'removeDepartment',
            width: 100,
        }];

    return <div style={{ height: 'calc(100vh - 109px)', display: 'flex', flexDirection: 'column', overflow: 'auto'}}>
            <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                <Table
                    className='fixheight'
                    bordered={true}
                    dataSource={list}
                    columns={columns as any}
                    scroll={{ x: '1500', y: 'max-content' }}
                    pagination={false}
                /> 
            </AutoTableContainer>
            {pageMeta && <Pagination onChange={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} />}
    </div>
};