import React, { useCallback, useEffect, useState } from 'react';
import { ServiceAgent } from 'grey-service-agent';
import env from './env';
import { PageHeaderTop } from 'kts-xui';
import { SlaveTask, SlaveProductList, SlaveInvoiceList,SlaveSetting } from '../..';
import { Redirect, useHistory } from 'react-router-dom';
import Icon  from '@ant-design/icons';
import { Switch, Route, MemoryRouter } from 'react-router-dom';
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';
export interface DigitalAssetVerificationProps {
    /** 通信模块 */
    server: ServiceAgent;
    
}

const DigitalAsset: React.FunctionComponent<DigitalAssetVerificationProps> = ({ server }) => {
    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]);
    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,}}>
                        <Icon component={InvoiceIcon} /><span>发票明细</span>
                    </div>, tabKey: '/task/list/invoicelist'
                },
                {
                    tab: <div style={{ paddingLeft: 20,  }}>
                        <Icon component={GoodsIcon} /><span>商品明细</span>
                    </div>, tabKey: '/task/list/goodslist'
                },
                {
                    tab: <div style={{ paddingLeft: 20,  }}>
                        <Icon component={GoodsIcon} /><span>业务规则设置</span>
                    </div>, tabKey: '/task/list/setting'
                },
            ]}
        >
        </PageHeaderTop>
        <Switch>
            <Route path="/task/list/verify" component={SlaveTask} />
            <Route path="/task/list/invoicelist/:No?/:code?" component={SlaveInvoiceList} />
            <Route path="/task/list/goodslist" component={SlaveProductList} />
            <Route path="/task/list/setting" component={SlaveSetting} />
            <Route render={() => <Redirect to='/task/list/verify' />} />
        </Switch>
    </>;
};
export default DigitalAsset;