import { Badge, Descriptions } from 'kts-components-antd-x4';
import React from 'react';
import agent from '../../Server';
import { Table, Pagination, AutoTableContainer } from 'kts-xui';
import { Space } from 'kts-components-antd-x4';
import { useHistory } from 'react-router-dom';
import moment from 'moment';
interface LawModule{ 
    caseno: string;
    casereason: string;
    casetype: string;
    court: string;
    docid: string;
    doctype: string;
    submittime: string;
    title: string;
    url: string;
} 
interface IMeta {
    total?: number;
    pageSize?: number;
    pageNum?: number
}
export default function App (props: {id: number}) {  
    const history = useHistory(); 
    const [list, setList] = React.useState<LawModule[]>();
    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-lawsuit', {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: 'judgetime',
            width: 120,
            ellipsis: true,
        }, {
            title: '案件名称',
            dataIndex: 'title',
            width: 180,
        }, {
            title: '案由',
            dataIndex: 'casereason',
            width: 100,
        }, {
            title: '案件类型',
            dataIndex: 'casetype',
            width: 100,
        }, {
            title: '案号',
            dataIndex: 'caseno',
            width: 180,
        }, {
            title: '操作',
            dataIndex: 'removeDepartment',
            width: 100,
            render: (text, record)=>{
                return (
                    <Space>
                        <a onClick={() => { onView(record); }} >详情</a>
                    </Space>
                )
            }
        }];
    const onView = (record) => {
        history.push({ pathname: `/task/risk/company/law/detail/${record.uuid}`, state: {...record,id:props.id} })
    }
    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>
};