import { Badge, Descriptions } from 'kts-components-antd-x4';
import React from 'react';
import agent from '../../Server';
import { Space, Typography } from 'kts-components-antd-x4';
import { Table, Pagination, AutoTableContainer, Modal } from 'kts-xui';
interface OwnTaxV2 {
    department: string;
    legalpersonName: string;
    location: string;
    name: string;
    newOwnTaxBalance: string;
    ownTaxAmount: string;
    ownTaxBalance: string;
    personIdName: string;
    personIdNumber: string;
    publishDate: string;
    regType: string;
    taxCategory: string;
    taxIdNumber: string;
    taxpayerType: string;
    type: string;
}
interface IMeta {
    total?: number;
    pageSize?: number;
    pageNum?: number
}

const { Title, Paragraph } = Typography;
export default function App(props: { id: number }) {
    const [list, setList] = React.useState<OwnTaxV2[]>();
    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-owntax', { 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: 'publishDate',
            width: 120,
            ellipsis: true,
        }, {
            title: '纳税人识别号',
            dataIndex: 'taxIdNumber',
            width: 160,
        }, {
            title: '欠税税种',
            dataIndex: 'taxCategory',
            width: 150,
        }, {
            title: '当前新发生的欠税余额',
            dataIndex: 'newOwnTaxBalance',
            width: 140,
        }, {
            title: '欠税余额',
            dataIndex: 'ownTaxAmount',
            width: 100,
        }, {
            title: '税务机关',
            dataIndex: 'department',
            width: 140,
        }, {
            title: '操作',
            dataIndex: 'taxIdNumber',
            width: 100,
            render: (text, record) => {
                return (
                    <Space>
                        <a onClick={() => { onView(record); }} >详情</a>
                    </Space>
                )
            }
        }];
    const onView = (record) => {
        const _detail = record as any;
        Modal.info({
            width: '950px',
            title: '欠税公告详情',
            okText: '关 闭',
            content: <div style={{ height: `calc(100vh - 280px)`, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
                <p>
                    <Paragraph>
                        <Descriptions labelStyle={{ width: '200px' }} contentStyle={{ width: '210px' }} title="" bordered={true} column={2}>
                            <Descriptions.Item label="纳税人类型">{_detail?.taxpayerType}</Descriptions.Item>
                            <Descriptions.Item label="纳税人识别号">{_detail?.taxIdNumber}</Descriptions.Item>
                            <Descriptions.Item label="负责人姓名">{_detail?.legalpersonName}</Descriptions.Item>
                            <Descriptions.Item label="证件号码">{_detail?.personIdNumber}</Descriptions.Item>
                            <Descriptions.Item label="经营地点" span={2}>{_detail?.location}</Descriptions.Item>
                            <Descriptions.Item label="欠税税种">{_detail?.taxCategory}</Descriptions.Item>
                            <Descriptions.Item label="欠税金额">{_detail?.ownTaxAmount}</Descriptions.Item>
                            <Descriptions.Item label="欠税余额">{_detail?.ownTaxBalance}</Descriptions.Item>
                            <Descriptions.Item label="当前新发生的欠税余额">{_detail?.newOwnTaxBalance}</Descriptions.Item>
                            <Descriptions.Item label="税务机关">{_detail?.department}</Descriptions.Item>
                            <Descriptions.Item label="发布日期">{_detail?.publishDate}</Descriptions.Item>
                        </Descriptions>
                    </Paragraph>
                </p>
            </div>,
        });
    }
    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>
};