import React, {Component, Fragment} from 'react';
import './overall.scss';
import {JFLoading} from "../../component/JFLoading/JFLoading";
import {observer,inject} from "mobx-react/index";
import {JFPageHeader} from "../../component/JFPageHeader/JFPageHeader";
import {JFContent, JFContentHeader} from "../../component/JFContent/JFContent";
import {Icon, Switch} from 'antd';
import Clipboard from 'react-clipboard.js';
import {CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
import {Message} from "../../common/message";
import {numberSplit} from "../../common/utils";

@inject('overallStore', 'appStore')
@observer
class Overall extends Component {

    componentDidMount() {
        this.props.overallStore.init();
    }

    render() {
        let obj = {};
        let { overallStore, appStore } = this.props;
        let pvData = overallStore.pvInfo
            .filter(({ day,flows }) => { return flows.length !== 0  })
            .map(({ day,flows }) => { return { day,...(function () {
                obj = {};
                for (let i =0; i<flows.length; i++) {
                    obj['f'+i] = flows[i].count
                }
                return obj;
            }())}});
            console.log(appStore.siteDetail.autoBlacklist)
        return (
            <Fragment>
                <JFLoading loading={overallStore.loading} mask={true} />
                <div className={'ps-overall'}>
                    <JFPageHeader routes={[{ name:'总览' }]}/>
                    <JFContent className={'ps-overall-content'}>
                        {
                            appStore.isFirstLogin ? (
                                <div className={'ps-content-left'}>
                                    <JFContentHeader>
                                        配置方法
                                    </JFContentHeader>
                                    <div>
                                        <header>
                                            流光机概要
                                        </header>
                                        <p>
                                            流光机配置在客户的WAF和负载均衡的后面，客户网站和APP后端服务器的前面。客户
                                            需要把需要保护的页面通过负载均衡导流到流光机，流光机对进来的流量进行清洗，然后
                                            再发送给客户网站和APP后端服务器。
                                        </p>
                                        <h2>
                                            部署前准备环节
                                        </h2>
                                        <p>
                                            1.为我们准备一台单独的服务器，用于部署我们的流光机，流光机的数量以与我们的运维人员沟通为准。服务器的硬件要求:
                                        </p>
                                        <div className={'block'}>
                                            CPU:4核<br/>
                                            内存:8G<br/>
                                            硬盘:5006
                                        </div>
                                        <p>
                                            2.在这台服务器上安装一些必要的软件
                                        </p>
                                        <div className={'block'}>
                                            docker- compose version1.23.1或以上<br/>
                                            Docker version18.09.3或以上<br/>
                                            centos7.5或以上
                                        </div>
                                        <p>
                                            3.确认这台服务器的IP.假如这台服务器的IP是<span className={'ip-address'}>192.168.0.1</span>
                                        </p>
                                        <p>
                                            4.因为我们流光机需要和外界通信，修改服务器的防火墙设置，打开如下的IP和端口
                                        </p>
                                        <div className={'block'}>
                                            传日志，IP:47.110.92.152，Port5044<br/>
                                            下载新的威胁情报和配置，IP:47.11184.124Port:9000
                                        </div>
                                        <h2>
                                            实际部署环节
                                        </h2>
                                        <p>
                                            5.在之前准备好的服务器中(10.20.30.40)下载我们为你们准备的3个配置文件，并
                                            运行我们的 docker image。在运行前请确保80端口没有被占用，因为我们的服务
                                            将默认运行在80端口。
                                        </p>
                                        <div className={'block'}>
                                            mkdir-p/apps/software/<br/>
                                            cd/apps/software/<br/>
                                            curl-0 104.248.208.183: 8000/woof/docker-compose yml<br/>
                                            curl-O104.248.208.183:8000/woof/.eny<br/>
                                            curi-o 104.248.208.183: 8000/woof/rp-cuprops<br/>
                                            docker login --username docker deploy user@yuntiandun registry cn<br/>
                                            hangzhou. aliyuncs com--password fdsp3222<br/>
                                            ＃如果之前运行过则执行以下命令，否则的话就跳过，直接执行下一行<br/>
                                            docker-compose-f docker-compose yml down<br/>
                                            docker-compose-f docker-compose yml up-d
                                        </div>
                                        <p>
                                            6.修改负载均衡服务器的 Nginx配置(如果没有负载均衡服务器，则修改DNS配
                                            置，将所有流量导向我们的流光机)，把我们之前沟通过的，需要监控的流量导向
                                            我们的流光机。将以下内容复制进你们 nginx.conf中。(以下配置仅做参考)
                                        </p>
                                    </div>
                                </div>
                            ) : (
                                <div className={'ps-content-left second-login'}>
                                    <div className={'overall-data-top'}>
                                        <div className={'data-block'}>
                                            <header>保护中API</header>
                                            <span>
                                                { numberSplit(overallStore.protectedApi.count) }
                                            </span>
                                        </div>
                                        <div className={'data-block'}>
                                            <header>
                                                Top 5 API
                                            </header>
                                            <ul>
                                                {
                                                    overallStore.topFiveApi.map(({ count, url },index) => {
                                                        return (
                                                            <li key={index}>
                                                                <span>
                                                                    { url }
                                                                </span>
                                                                <span>
                                                                    { numberSplit(count) }
                                                                </span>
                                                            </li>
                                                        );
                                                    })
                                                }
                                            </ul>
                                        </div>
                                    </div>

                                    <div className={'overall-data-center'}>
                                        <div className={'data-block'}>
                                            <header>
                                                攻击流量
                                            </header>
                                            <div className={'data-block-content'}>
                                                { numberSplit(overallStore.attackFlow.count) }
                                            </div>
                                            <footer>
                                                <span>日</span><span>{ overallStore.attackFlow.gains.indexOf('-') === -1 ? <Icon type="arrow-up" style={{ color: 'red' }}/> : <Icon type="arrow-down" style={{ color: 'green' }}/> }</span><span>{ overallStore.attackFlow.gains }</span>
                                            </footer>
                                        </div>
                                        <div className={'data-block'}>
                                            <header>
                                                总流量
                                            </header>
                                            <div className={'data-block-content'}>
                                                { numberSplit(overallStore.totalFlow.count) }
                                            </div>
                                            <footer>
                                                <span>日</span><span>{ overallStore.totalFlow.gains.indexOf('-') === -1 ? <Icon type="arrow-up" style={{ color: 'red' }}/> : <Icon type="arrow-down" style={{ color: 'green' }}/> }</span><span>{ overallStore.totalFlow.gains }</span>
                                            </footer>
                                        </div>
                                        <div className={'data-block'}>
                                            <header>
                                                独立访问IP
                                            </header>
                                            <div className={'data-block-content'}>
                                                { numberSplit(overallStore.independentIp.count) }
                                            </div>
                                        </div>
                                    </div>

                                    <div className={'overall-data-bottom'}>
                                        {
                                            pvData.length > 0 && (
                                                <ResponsiveContainer width={5.9/6*100+'%'} height={280} isAnimationActive={false}>
                                                    <LineChart
                                                        isAnimationActive={false}
                                                        data={pvData}
                                                        dataKey={''}
                                                        margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
                                                    >
                                                        <CartesianGrid strokeDasharray="3 3" />
                                                        <XAxis dataKey="day" />
                                                        <YAxis />
                                                        <Tooltip formatter={(value) => [numberSplit(value)]}/>
                                                        {/*{*/}
                                                        {/*function () {*/}
                                                        {/*let arr = [];*/}
                                                        {/*for (let i in obj){*/}
                                                        {/*arr.push(<Line type="monotone" dataKey={ i } stroke="#8884d8" fill="#8884d8" />)*/}
                                                        {/*}*/}
                                                        {/*}()*/}
                                                        {/*}*/}
                                                        <Line type="monotone" dataKey="f0" stroke="#8884d8" fill="#8884d8" />
                                                    </LineChart>
                                                </ResponsiveContainer>
                                            )
                                        }
                                    </div>
                                </div>
                            )
                        }
                        <div className={'ps-content-right'}>
                            <div className={'ps-right-header'}>
                                站点信息
                            </div>
                            <div className={'ps-site-list'}>
                                <div className={'list-item'}>
                                    站点名称：{ appStore.siteDetail.siteName }
                                </div>
                                <div className={'list-item'}>
                                    站点ID：{ appStore.siteDetail.siteId }
                                </div>
                                <div className={'list-item'}>
                                    <div>
                                        API KEY：{ appStore.siteDetail.apiKey }
                                    </div>
                                    <Clipboard className={'copy-btn'} component={'span'} data-clipboard-text={appStore.siteDetail.apiKey} onSuccess={() => Message.success('复制完成')}>
                                        <Icon type="copy" />
                                    </Clipboard>
                                </div>
                                <div className={'list-item'}>
                                    <div>
                                        API SECRET：{ appStore.siteDetail.secretKey }
                                    </div>
                                    <Clipboard className={'copy-btn'} component={'span'} data-clipboard-text={appStore.siteDetail.secretKey} onSuccess={() => Message.success('复制完成')}>
                                        <Icon type="copy" />
                                    </Clipboard>
                                </div>
                            </div>
                            <div className={'ps-right-header'}>
                                快速操作
                            </div>
                            <div className={'quick-sp'}>
                                <div className={'quick-sp-content'}>
                                    <div>
                                        拦截模式
                                    </div>
                                    <div>
                                        <Switch checked={ appStore.siteDetail.autoBlacklist } onChange={(bool) => {overallStore.toggleBlockMode(bool ? 'yes': 'no')}} />
                                    </div>
                                </div>
                                <p>
                                    说明：开启拦截模式后，我们将使用大数据与人工智能模型自动识别攻击，并进行相应的防范。
                                </p>
                            </div>
                            <div className={'ps-right-header'}>
                                支持与服务
                            </div>
                            <div className={'help-list-content'}>
                                <div className={'help-list-item'}>
                                    帮助中心
                                </div>
                                <div className={'help-list-item'}>
                                    开发文档
                                </div>
                                <div className={'help-list-item'}>
                                    联系我们
                                </div>
                            </div>
                        </div>
                    </JFContent>
                </div>
            </Fragment>
        );
    }
}

export default Overall;