import React from 'react';
import { Button, Icon, Checkbox } from 'antd';
import { WeaTools, WeaDialog, WeaSearchGroup, WeaTable } from 'ecCom';

import './style/';

class WeaPlugin extends React.Component {
    state = { visible: this.props.visible || false, test: false, data: {}, isCheck: false };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.getPlugins = this.getPlugins.bind(this);
        this.getPluginStatus = this.getPluginStatus.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onTest = this.onTest.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onShow = this.onShow.bind(this);
    }

    componentWillMount() {
        if (this.state.visible) {
            this.getPlugins();
        }
    }

    render() {
        const { test, data = {}, isCheck = false } = this.state;
        const { plugins = [], otherPlugins = [] } = data;

        let columns = [
            { key: 'index', title: '序号', dataIndex: 'index', width: '10%' },
            { key: 'name', title: '名称', dataIndex: 'name', width: '20%' },
            { key: 'explain', title: '描述', dataIndex: 'explain', width: '35%' },
            { key: 'size', title: '大小', dataIndex: 'size', width: '10%' },
            {
                key: 'status',
title: '状态',
dataIndex: 'status',
width: '10%',
                render: (text, record) => this.getPluginStatus(record.progid),
            },
            {
                key: 'download',
title: '下载并安装',
dataIndex: 'download',
width: '15%',
                render: (text, record) => <a href={record.url} target="_blank" style={{ color: '#00a9ff' }}>下载</a>,
            },
        ];

        let displayComp = (
            <div className="wea-plugin-body">
                <WeaSearchGroup title="控件安装" needTigger={true} showGroup={true}>
                    <WeaTable columns={columns} dataSource={plugins} pagination={false} />
                </WeaSearchGroup>
                <WeaSearchGroup title="安装其他工具" needTigger={true} showGroup={true}>
                    <WeaTable columns={columns} dataSource={otherPlugins} pagination={false} />
                </WeaSearchGroup>
                <div className="wea-plugin-chk-msg">
                    <Checkbox checked={isCheck} onChange={this.onChange}>每次进入系统时检测</Checkbox>
                </div>
                <div className="wea-plugin-tip-msg">
                    <span><Icon type="exclamation-circle" /><span style={{ marginLeft: '10px' }}>注意：安装完毕请重启计算机！</span></span>
                </div>
            </div>
        );

        if (test) {
            columns = [
                {
                    key: 'index',
title: '序号',
dataIndex: 'index',
width: '10%',
                    render: (text, record) => parseInt(record.index) - 1,
                },
                { key: 'name', title: '名称', dataIndex: 'name', width: '15%' },
                { key: 'clsid', title: '控件编号', dataIndex: 'clsid', width: '20%' },
                { key: 'clsname', title: '控件名称', dataIndex: 'clsname', width: '20%' },
                { key: 'version', title: '版本', dataIndex: 'version', width: '10%' },
                {
                    key: 'status',
title: '状态',
dataIndex: 'status',
width: '10%',
                    render: (text, record) => this.getPluginStatus(record.progid),
                },
                {
                    key: 'download',
title: '检测',
dataIndex: 'download',
width: '15%',
                    render: (text, record) => <Button type="ghost" icon="search" onClick={() => this.onTest(record)}>检测</Button>,
                },
            ];

            displayComp = (
                <div className="wea-plugin-body">
                    <WeaSearchGroup title="控件检测" needTigger={true} showGroup={true}>
                        <WeaTable columns={columns} dataSource={plugins.slice(1)} pagination={false} />
                    </WeaSearchGroup>
                    <WeaSearchGroup title="如果控件不能够正常运行怎么办？" needTigger={true} showGroup={true}>
                        <div className="wea-plugin-step">
                            <div className="wea-plugin-step-num">1</div>
                            <span>第一步：从 C:\WINDOWS\Downloaded Program Files 删除通过自动提示安装方式注册的控件，对应名称参见clsname列；</span>
                        </div>
                        <div className="wea-plugin-step">
                            <div className="wea-plugin-step-num">2</div>
                            <span>第二步：从“控制面板 -> 删除或添加程序”删除通过下载控件方式安装的控件；</span>
                        </div>
                        <div className="wea-plugin-step">
                            <div className="wea-plugin-step-num">3</div>
                            <span>第三步：删除用手工方式注册的控件：</span>
                            <div style={{ paddingLeft: '30px', color: '#666' }}>
                                <p>1、在命令行执行 regedit.exe；</p>
                                <p>2、在键 HKEY_CLASSES_ROOT\CLSID 下查找对应的 clsid，如Office 控件的注册项为 {'{23739A7E-5741-4D1C-88D5-D50B18F7C347}'}；</p>
                                <p>3、如果找到该注册项，表明控件已安装。安装的文件路径见 InprocServer32 项的值，在命令行执行“regsvr32 /u &lt;带路径的文件名称&gt;”即可删除；</p>
                            </div>
                        </div>
                        <div className="wea-plugin-step">
                            <div className="wea-plugin-step-num">4</div>
                            <span>第四步：点击<span style={{ color: '#00a9ff', cursor: 'pointer' }} onClick={() => this.setState({ test: false })}>重新下载</span>控件方式安装控件！</span>
                        </div>
                    </WeaSearchGroup>
                    <WeaSearchGroup title="为什么通过下载插件安装方式卸载控件会报错？" needTigger={true} showGroup={true}>
                        <div>
                            <span>卸载控件之前需要关闭所有 IE 窗口和使用控件的程序。</span>
                        </div>
                    </WeaSearchGroup>
                </div>
            );
        }

        return (
            <WeaDialog
              visible={this.state.visible}
              title="插件下载"
              icon="wevicon-wea-plugin"
              iconBgcolor="#a7adb5"
              style={{ width: 810, height: 480 }}
              zIndex={100}
              hasScroll={true}
              maskClosable={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                {displayComp}
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        if (this.state.test) {
            buttons.push(<Button type="primary" onClick={() => this.setState({ test: false })}>返回</Button>);
        } else {
            buttons.push(<Button type="primary" onClick={() => this.setState({ test: true })}>控件检测</Button>);
        }
        return buttons;
    }

    getPlugins() {
        WeaTools.callApi('/api/portal/systemInfo/getPlugins', 'GET', {}).then((result) => {
            const { data } = result;
            this.setState({ data, isCheck: data.isCheck });
        });
    }

    onChange(e) {
        const checked = e.target.checked;
        this.setState({ isCheck: checked });

        WeaTools.callApi('/api/portal/systemInfo/setIsCheck', 'POST', { isCheck: checked ? '0' : '1' });
    }

    getPluginStatus(progid) {
        let status = false;
        try {
            const obj = new ActiveXObject(progid);
            if (obj) {
                status = true;
            }
        } catch (e) {
        }

        return status ? <Icon type="check-circle" style={{ color: '#70d256', fontSize: '14px' }} /> : <Icon type="cross-circle" style={{ color: '#ff3f00', fontSize: '14px' }} />;
    }

    onTest(obj) {
        const dialog = new window.top.Dialog();
        dialog.currentWindow = window;
        dialog.Width = 650;
        dialog.Height = 400;
        dialog.Title = `控件检测：${obj.name}`;
        dialog.URL = obj.checkpageurl;
        dialog.show();
    }

    onCancel() {
        this.setState({ visible: false });
    }

    onShow() {
        this.setState({ visible: true });
        this.getPlugins();
    }
}

export default WeaPlugin;