import * as React from 'react';
import { Drawer, Dropdown } from 'kts-xui';
import { Menu } from 'kts-components-antd-x4';
import MyIcon from './Icon';
import UIComponents from './UI.Components';
import IOption from './IOption';
import './index.less';

/** Props接口 */
interface IProps {
    urlData: IOption;
    refreshInvoice: () => void;
    onClose: () => void;
    currentActive: string;
}

export default class InvoiceImport extends React.Component<IProps, any> {

    constructor(props: IProps) {
        super(props);
        this.state = {
            currentActive: this.props.currentActive,
        }
    }

    handleMenuClick = e => {
        this.setState({ currentActive: e.key });
    };

    renderPageTitle = () => {
        const { currentActive } = this.state;
        switch (currentActive) {
            case 'scangun':
                return "扫码枪";
            case "excel":
                return "Excel上传";
            case 'image':
                return "影像/板式文件";
            case "scanner":
                return "扫描仪";
            case "manual":
                return "手工录入";
            case 'rule':
                return '规则导入';
            case 'commonexcel':
                return 'Excel上传';
            default:
                return "";
        }
    }

    render() {
        const { urlData } = this.props;

        let menu = (
            <Menu onClick={this.handleMenuClick}>
                {
                    urlData.scankey4 && <Menu.Item key="scangun">扫码枪</Menu.Item>
                }
                {
                    urlData.url && <Menu.Item key="excel">Excel上传</Menu.Item>
                }
                {/* <Menu.Item key="image">
                    影像/板式文件
                </Menu.Item> */}
                {/* <Menu.Item key="scanner">
                    扫描仪
                </Menu.Item> */}
                {
                    urlData.key4 && <Menu.Item key="manual">手工录入</Menu.Item>
                }
                {
                    urlData.rule && <Menu.Item key="rule">规则导入</Menu.Item>
                }
                {
                    urlData.commonUploadCb && <Menu.Item key="commonexcel">Excel上传</Menu.Item>
                }
            </Menu>
        );

        return (
            <div className='modules'>
                <Drawer
                    visible={true}
                    width={350}
                    onClose={this.props.onClose}
                    title={
                        urlData.rule ? this.renderPageTitle() :
                            <Dropdown key='excel' overlay={menu}>
                                <span>
                                    <span className='headTitle'>{this.renderPageTitle()}</span>
                                    <MyIcon style={{ width: '14px', height: '14px', marginLeft: '10px' }} src={'/packup.svg'} />
                                </span>
                            </Dropdown>
                    }
                >
                    <UIComponents
                        currentActive={this.state.currentActive}
                        onClose={this.props.onClose}
                        urlData={this.props.urlData}
                        refreshInvoice={this.props.refreshInvoice}
                    />
                </Drawer>
            </div>
        );
    }
}