import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Table, Pagination, Button, PageHeaderFoot, Radio, AutoTableContainer } from 'kts-xui';
import { AdvancedSearch, KtsForm } from 'kts-components';
import { columnEnum } from '../../CommonComponents/ColumnEnum';
import { useHistory } from 'react-router-dom';
import { Space } from 'kts-components-antd-x4';
import agent from '../../Server';
import { upperCase } from 'lodash';
interface IProps {
    changeView: (value) => void;
}
interface IMeta {
    total?: number;
    pageSize?: number;
    pageNum?: number
}
/**
 * 客商
 * @param props 
 * @returns 
 */
const riskComponent = (props: IProps) => {
    const history = useHistory();
    const state = history.location.state as any
    const [params, setParams] = useState({ pageNum: 1, pageSize: 10, ...state });
    const [pageMeta, setMeta] = useState<IMeta>({ pageNum: 1, pageSize: 10 });
    const [list, setList] = useState<any[]>([]);
    const columns = [
        {
            title: '客商名称',
            dataIndex: 'companyName',
            width: 200,
            ellipsis: true,

        }, {
            title: '纳税人识别号',
            dataIndex: 'companyTaxNo',
            width: 160,
            ellipsis: true,
        }, {
            title: '经营状态',
            dataIndex: 'icRegStatus',
            width: 100,
            render: (_text, record) => {
                let isZC = _text === '存续' || _text === '正常' || _text === '在业' || _text === '开业' || _text === '登记' || _text === '在营' || _text === '经营' || _text === '有效' || _text === '在营在册' || _text === '在业在册';
                return <span style={!isZC ? { color: 'red' } : {}}>{_text}</span>
            }
        }, {
            title: '税务评级',
            width: 120,
            ellipsis: true,
            dataIndex: 'mTaxCredGrade',
            render: (_text, record) => {
                let isFX = upperCase(_text) === 'C' || upperCase(_text) === 'D';
                return (
                    <Space>
                        <a style={isFX ? { color: 'red' } : {}} onClick={() => { onView(record, 2); }} >{_text}</a>
                    </Space>
                )
            }
        }, {
            title: '经营异常',
            dataIndex: 'mrAbnormalTotal',
            width: 120,
            ellipsis: true,
            render: (_text, record) => {
                return (
                    <Space>
                        <a style={_text > 0 ? { color: 'red' } : {}} onClick={() => { onView(record, 3); }} >{_text}</a>
                    </Space>
                )
            }
        }, {
            title: '行政处罚',
            dataIndex: 'mrPunishmentTotal',
            width: 100,
            render: (_text, record) => {
                return (
                    <Space>
                        <a style={_text > 0 ? { color: 'red' } : {}} onClick={() => { onView(record, 4); }} >{_text}</a>
                    </Space>
                )
            }
        }, {
            title: '法律诉讼',
            dataIndex: 'jrLawSuitTotal',
            width: 100,
            render: (_text, record) => {
                return (
                    <Space>
                        <a style={_text > 0 ? { color: 'red' } : {}} onClick={() => { onView(record, 5); }} >{_text}</a>
                    </Space>
                )
            }
        },
        {
            title: '税收违法',
            dataIndex: 'mrTaxContraventionTotal',
            width: 100,
            render: (_text, record) => {
                return (
                    <Space>
                        <a style={_text > 0 ? { color: 'red' } : {}} onClick={() => { onView(record, 6); }} >{_text}</a>
                    </Space>
                )
            }
        },
        {
            title: '欠税公告',
            dataIndex: 'mrOwnTaxTotal',
            width: 100,
            render: (_text, record) => {
                return (
                    <Space>
                        <a style={_text > 0 ? { color: 'red' } : {}} onClick={() => { onView(record, 7); }} >{_text}</a>
                    </Space>
                )
            }
        }, {
            title: '操作',
            dataIndex: 'id',
            fixed: 'right',
            width: 100,
            render: (_text, record) => {
                return (
                    <Space>
                        <a onClick={() => { onView(record, 1); }} >查看</a>
                    </Space>
                )
            }
        },
    ];
    const onView = (record, tab) => {
        history.push({ pathname: `/task/risk/company/detail/${record.id}/${record.companyName}/${tab}`, state: record })
    }
    const onPageChange = useCallback((pageNum, pageSize) => {
        const newParams = {
            ...params,
            pageNum,
            pageSize
        };
        setParams(newParams);
    }, [params]);
    React.useMemo(() => {
        (async () => {
            const res: any = await agent.post('/web/verifierparty/risk/query', { ...params }, this);
            if (res.err) {
                return;
            } else {
                setList(res.res.items);
                setMeta(res.res.pageMeta);
            }
        })()
    }, [params]);
    const radioChange = (e) => {
        props.changeView(e.target.value);
    }
    const onSearch = useCallback((data) => {
        const newParams = {
            ...data,
            pageNum: 1,
            pageSize: pageMeta.pageSize
        };
        setParams(newParams);
    }, [params, pageMeta.pageSize])
    const topExpand = () => {
        return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <AdvancedSearch
                    width={380}
                    height={44}
                    initialValues={params}
                    extra={
                        <Radio.Group defaultValue="customer" onChange={radioChange} style={{ display: 'flex', marginRight: 10 }}>
                            <Radio.Button value="customer">客商信息</Radio.Button>
                            <Radio.Button value="list">扁平视图</Radio.Button>
                            <Radio.Button value="echart">穿透视图</Radio.Button>
                        </Radio.Group>
                    }
                    compact={true}
                    defaultKey="companyName"
                    placeholder="请输入客商名称"
                    searchFormSubmit={onSearch}
                >
                    <KtsForm
                        labelCol={9}
                        wrapperCol={15}
                        labelAlign="left"
                        initialValues={params}
                        compact={true}
                        schema={{
                            type: 'object',
                            properties: {
                                companyName: {
                                    type: 'string',
                                    title: '客商名称',
                                },
                                taskNo: {
                                    type: 'string',
                                    title: '任务单号'
                                },
                                companyTaxNo: {
                                    type: 'string',
                                    title: '纳税人识别号',
                                },
                                icRegStatus: {
                                    type: 'string',
                                    title: '经营状态',
                                    enum: [
                                        { label: '在业', value: '在业' },
                                        { label: '开业', value: '开业' },
                                        { label: '存续', value: '存续' },
                                        { label: '吊销', value: '吊销' },
                                        { label: '注销', value: '注销' },
                                        { label: '迁出', value: '迁出' },
                                        { label: '吊销，注销', value: '吊销，注销' },
                                        { label: '吊销，未注销', value: '吊销，未注销' },
                                        { label: '吊销，已注销', value: '吊销，已注销' },
                                        { label: '其他、撤销', value: '其他、撤销' },
                                        { label: '停业', value: '停业' },
                                        { label: '清算', value: '清算' },
                                    ],
                                    'x-props': {
                                        mode: "multiple"
                                    }
                                },
                                mtaxCredGrade: {
                                    type: 'string',
                                    title: '税务评级',
                                    enum: [
                                        { label: 'A', value: 'A' },
                                        { label: 'B', value: 'B' },
                                        { label: 'C', value: 'C' },
                                        { label: 'D', value: 'D' },
                                    ],
                                    'x-props': {
                                        mode: "multiple"
                                    }
                                },
                                mrAbnormalTotal: {
                                    type: 'string',
                                    title: '经营异常',
                                },
                                mrPunishmentTotal: {
                                    type: 'string',
                                    title: '行政处罚',
                                },
                                jrLawSuitTotal: {
                                    type: 'string',
                                    title: '法律诉讼',
                                },
                                'mrTaxContraventionTotal': {
                                    type: 'string',
                                    title: '税收违法',
                                },
                                'mrOwnTaxTotal': {
                                    type: 'string',
                                    title: '欠税公告',
                                },
                            },
                        }}
                    >
                    </KtsForm>
                </AdvancedSearch>
            </div>
        );
    }
    return (
        <div style={{ height: 'calc(100vh - 97px)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ flex: 'none', position: 'relative', zIndex: 1, }}>
                <PageHeaderFoot
                    expandLeft={topExpand()}
                >
                </PageHeaderFoot>
            </div>
            <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>
    );
}
export default riskComponent