import "@babel/polyfill";
import React from 'react';
import styles from "./index.css";
import MainFrame from '../MainFrame/index.jsx';
import NavMenu from '../../components/NavMenu/index.jsx';
import Weather from '../../components/Weather/index.jsx';
import { Route, Redirect, NavLink, Link } from "react-router-dom";
import { getData } from "../../api/index";
import component from '../../config/component';
import Box from "../../components/Box/index.jsx";
import Title from "../../components/Title/index.jsx";
const urlPath = props => {
    try {
        let {
            match: {
                path: _path,
                url
            },
            item: {
                path
            },
            list = []
        } = props,
            page = -1;
        url = url.split("/");
        _path = _path
            .split("/")
            .map((x, i) => {
                const iu = url[i];
                const k = x.indexOf(":"),
                    j = x.indexOf("?");
                if (k != -1) {
                    x = x.substring(k + 1, j);
                }
                if (x == "pId") {
                    x = iu.split("-")[0] || x;
                }
                if (x == 'page') {
                    page = i;
                    //查找是否存在
                    const a = list.filter(x => {
                        if (x.path == "/" + iu)
                            return x;
                    }
                    );
                    if (a.length) {
                        x = iu || x;
                    } else {
                        x = list[0]
                            .path
                            .split("/")[1] || x;
                    }
                }
                return iu || x;
            });
        //替换page项路由
        page != -1 && _path.splice(page, 1, path.substring(1, path.length));
        return _path.join("/");
    } catch (error) {
        return "";
    }

}
const ALink = props => {
    const {
        item: {
            name,
            icon
        }
    } = props;
    return <NavLink
        to={urlPath(props)}
        className={`iconfont ${icon}`}
        activeClassName={styles.active}
        style={{
            padding: "5px 14px"
        }}>{name}</NavLink>
}
export default class Init extends React.Component {
    state = {
        config: {
            data: {
                title: "",
                cityCode: "",
                list: []
            }
        },
        navIndex: 0,
        FloatWindowData: {
            data: {
                list: [],
                title: ""
            }
        }
    }
    componentDidMount() {
        const {
            match: {
                params,
                params: {
                    pId = ""
                }
            }
        } = this.props;
        getData({
            port: "Layout",
            ...params,
            pId: (pId || "").split("-")[0]
        }).then(res => {
            const { code, config } = res;
            if (!code) {
                this.setState({ config });
            }
        });

        getData({
            port: "FloatWindowData",
            ...params,
            pId: (pId || "").split("-")[0]
        }).then(res => {
            const { code, config } = res;
            if (!code) {
                this.setState({ FloatWindowData: config });
            }
        });

    }
    click = navIndex => {
        this.setState({ navIndex });
    }
    redirect = e => {
        const {
            config: {
                data: {
                    list = []
                }
            }
        } = this.state,
            path = urlPath({
                ...(this.props),
                list,
                item: list[0]
            });
        return path && <Redirect to={path} />
    }
    path = path => {
        let {
            match: {
                path: _path,
            }
        } = this.props;
        return _path.split("/").map(x => {
            let zs = "";
            const k = x.indexOf(":"),
                j = x.indexOf("?");
            if (k != -1) {
                zs = x.substring(k + 1, j);
            }
            if (zs == 'page') {
                return path.split("/")[1];
            }
            return x;
        }).join("/");
    }
    a1a = null;
    oneInner = null;
    floatWindow = oneInner => {
        clearInterval(this.a1a);
        if (!oneInner) return '';
        //定时器
        this.a1a = setInterval(moves, 400);
        //函数
        var x = 10;
        var y = 10;

        function moves() {
            var tops = oneInner.offsetTop
            var lefts = oneInner.offsetLeft

            if (lefts >= document.documentElement.clientWidth - oneInner.offsetWidth || lefts <= 0) {
                x = -x
            }

            if (tops >= document.documentElement.clientHeight - oneInner.offsetHeight || tops <= 0) {
                y = -y
            }

            tops += y;
            lefts += x;

            oneInner.style.top = tops + "px"
            oneInner.style.left = lefts + "px"
        }
        this.oneInner = oneInner;
        //悬停停止
        oneInner.onmouseover = function () {
            clearInterval(this.a1a);
        }
        //放手继续运动
        oneInner.onmouseout = function () {
            this.a1a = setInterval(moves, 400);
        }
    }
    //进入内页
    goLink = (e, i) => {
        //处理path  替换 页面 与 pId
        let { match: {
            path,
            url
        } } = this.props;
        url = url.split("/");
        path = path.split("/").map((x, i) => {
            const iu = url[i];
            if (i == 1) {
                return "detail";
            }
            const k = x.indexOf(":"),
                j = x.indexOf("?");
            if (k != -1) {
                x = x.substring(k + 1, j);
            }
            if (x == 'pId') {
                return iu + "-" + e.id;
            }
            return iu;
        }).join("/");
        return <Link style={{color:"#fff"}} to={path}>{e.name}</Link>
    }
    render() {
        const {
            config,
            navIndex,
            config: {
                data,
                data: {
                    title = "",
                    list = [],
                    floatWindow
                }
            },
            FloatWindowData
        } = this.state;
        return (
            <MainFrame title={title}>
                {floatWindow?<div ref={e => this.floatWindow(e)} className={styles.FloatWindow}>
                    <Box className={styles.FloatWindowBox}>
                        <Title>{FloatWindowData.data.title}</Title>
                        <ul onMouseOver={e => clearInterval(this.a1a)}>
                            {FloatWindowData.data.list.map(x => {
                                return (<li key={x.id} onClick={e => this.go(x)}>{this.goLink(x)}</li>)
                            })}
                        </ul>
                    </Box>
                </div>:''}

                <NavMenu
                    noEdit={true}
                    slot={'SubCenter'}
                    index={navIndex}
                    data={config}
                    active={navIndex => this.click(navIndex)}>
                    <ALink
                        {...this.props}
                        list={list}
                        style={{
                            padding: "0"
                        }}></ALink>
                </NavMenu>
                <Weather slot={"SubRight"} RequestData={data} />
                <Route exact={true} path={this.props.path} render={e => this.redirect(e)} />
                {!!list.length && list.map((x, key) => < Route exact={false} key={key} path={this.path(x.path)} component={component[x.path]} />)}
            </MainFrame>
        );
    }
}
