import { Typography } from 'kts-components-antd-x4';
import React from 'react';
import agent from '../../Server';
import { Table, Pagination, Button, PageHeaderFoot, AutoTableContainer } from 'kts-xui';
interface PunishmentInfoV3 {
    content: string;
    decisionDate: string;
    departmentName: string;
    evidence: string;
    legalPersonName: string;
    punishName: string;
    punishNumber: string;
    punishStatus: string;
    reason: string;
    remark: string;
    source: string;
    type: string;
    typeSecond: string;
}
interface IMeta {
    total?: number;
    pageSize?: number;
    pageNum?: number
}
const { Paragraph, Text } = Typography;
export default function App(props: { id: number }) {
    const [list, setList] = React.useState<PunishmentInfoV3[]>();
    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-punishmentinfo', { 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: 'punishName',
            width: 160,
            ellipsis: true,
        }, {
            title: '决定文书号',
            dataIndex: 'punishNumber',
            width: 200,
        }, {
            title: '处罚事由',
            dataIndex: 'reason',
            width: 200,
            render: (_text, record) => {
                return <CollapseExpand text={_text} />
            }
        }, {
            title: '处罚状态',
            dataIndex: 'punishStatus',
            width: 100,
        }, {
            title: '处罚决定日期',
            dataIndex: 'decisionDate',
            width: 120,
        }, {
            title: '处罚类别1',
            dataIndex: 'type',
            width: 100,
        }, {
            title: '处罚类别2',
            dataIndex: 'typeSecond',
            width: 100,
        }, {
            title: '处罚依据',
            dataIndex: 'evidence',
            width: 200,
            render: (_text, record) => {
                return <CollapseExpand text={_text} />
            }
        }, {
            title: '处罚机关',
            dataIndex: 'departmentName',
            width: 180,
        }, {
            title: '处罚结果',
            dataIndex: 'content',
            width: 200,
            render: (_text, record) => {
                return <CollapseExpand text={_text} />
            }
        }];

    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>
};

const CollapseExpand = (props) => {
    const _text = props.text;
    const [ellipsis, setEllipsis] = React.useState(true);
    const onExpand = () => {
        setEllipsis(false)
    }
    const onCollapse = () => {
        setEllipsis(true)
    }
    return <Paragraph key={Math.random() * 100000} ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: '展开', onExpand: onExpand } : false}>
        {_text}
        {(!ellipsis && _text) && <a onClick={onCollapse} >  收起</a>}
    </Paragraph>
}