import React, { useCallback, useEffect, useState } from 'react';
import { ServiceAgent } from 'grey-service-agent';
import env from './env';
import { PageHeaderTop } from 'kts-xui';
import { UnorderedListOutlined } from '@ant-design/icons';
import { MasterTask, MasterProductList, MasterResponseList, MasterStatics, MasterInvoiceList, MasterSetting, Dashboard, Exports } from '../../';
import { Redirect, useHistory } from 'react-router-dom';
import { Switch, Route, MemoryRouter } from 'react-router-dom';
import Icon, { SettingOutlined } from '@ant-design/icons';
import { ReactComponent as TaskIcon } from './icon/task.svg';
import { ReactComponent as InvoiceIcon } from './icon/invoice_ico.svg';
import { ReactComponent as GoodsIcon } from './icon/goods.svg';
import { ReactComponent as EchatIcon } from './icon/echart_icon.svg';
import { ReactComponent as RequestIcon } from './icon/request_ico.svg';
export interface DigitalAssetVerificationProps {
    /** 通信模块 */
    server: ServiceAgent;
    children?: any
}

const DigitalAsset: React.FunctionComponent<DigitalAssetVerificationProps> = ({ server, children }) => { 
    const history = useHistory();
    const [key, setKey] = useState(history.location.pathname || '/task/list/verify');

    React.useEffect(() => {
        env.server = server;
    }, [server])

    const onChange = useCallback((value) => {
        history.push(value);
        setKey(value);
    }, [history]);
    const onTabChange = useCallback((path) => {
        setKey(path);
    }, []);
    useEffect(() => {
        setKey(history.location.pathname);
    }, [history.location.pathname])
    return <>
        <PageHeaderTop
            title="数字资产核验"
            onChange={onChange}
            activeKey={key}
            tabs={[
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <Icon component={TaskIcon} /><span>核验任务</span>
                    </div>, tabKey: '/task/list/verify'
                },
                // {
                //     tab: <div style={{ paddingLeft: 20, }}>
                //         <SettingOutlined /><span>工作台</span>
                //     </div>, tabKey: '/task/list/dash'
                // },
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <Icon component={InvoiceIcon} /><span>发票明细</span>
                    </div>, tabKey: '/task/list/invoicelist'
                },
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <Icon component={GoodsIcon} /><span>商品明细</span>
                    </div>, tabKey: '/task/list/product'
                },
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <Icon component={RequestIcon} /><span>申诉请求</span>
                    </div>, tabKey: '/task/list/response'
                },
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <Icon component={EchatIcon} /><span>穿透报表</span>
                    </div>, tabKey: '/task/list/echart'
                },
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <SettingOutlined /><span>业务规则设置</span>
                    </div>, tabKey: '/task/list/setting'
                }, 
                {
                    tab: <div style={{ paddingLeft: 20, }}>
                        <UnorderedListOutlined /><span>导出记录</span>
                    </div>, tabKey: '/task/list/export'
                },
            ]}
        >
        </PageHeaderTop>
        <Switch>
            <Route path="/task/list/verify" component={MasterTask} />
            <Route path="/task/list/invoicelist" render={() => <MasterInvoiceList onTabChange={onTabChange} />} />
            <Route path="/task/list/product/:No?/:code?" render={() => <MasterProductList onTabChange={onTabChange} />} />
            <Route path="/task/list/response" render={() => <MasterResponseList onTabChange={onTabChange} />} />
            <Route path="/task/list/echart" component={MasterStatics} />
            <Route path="/task/list/setting" component={MasterSetting} />
            <Route path="/task/list/dash" component={Dashboard} />
            <Route path="/task/list/export" component={Exports} />
            <Route render={() => <Redirect to={'/task/list/verify'} />} />
        </Switch>
    </>;
};
export default DigitalAsset;