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 Overview from '../../pages/Overview/index';
import {getData} from "../../api/index";

export default class Init extends React.Component {
    state = {
        config: {
            data: {
                list: []
            }
        },
        title:"贵州“林产品态势图”应用平台",
        navIndex: 0
    }
    componentDidMount() {
        const {match: {
                params
            },item} = this.props;
        getData({
            port: "ParkList",
            ...params,
            id:(item || {}).id
        }).then(res => {
            let {
                    code,
                    config,
                    config: {
                        pId,
                        title = '',
                        data: {
                            list = []
                        }
                    }
                } = res, {
                    navIndex = 0
                } = this.state;
            if (!code) {
                list.map((x,i)=>{
                    //查找当前pId项
                    pId.includes(x.id) && (navIndex = i);
                });
                //控制只显示一个
                navIndex>-1 && (config.data.list = [list[navIndex]]);
                this.setState({config,title});
                config.data.list.length && this.click(0);
            }
        });
    }
    click = navIndex => {
        //点击切换pId
        let {
            match: {
                path,
                url
            }
        } = this.props;
        const {config:{
            data:{
                title = '',
                list = []
            }
        }} = this.state;
        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"){
                let fg = iu.split("-");
                fg.splice(1,1,list[navIndex].id);
                x = fg.join("-") || x;
            }
            return iu || x;
        }).join("/");
        this.props.history.push(path);
        //如果标题为空 取动态标题
        this.setState({navIndex,title:title || (list[navIndex] || {}).name || ''});
    }
    //内页后退
    goBack = ()=>{
        const {match:{
            params = {}
        }} = this.props;
        const path = Object.keys(params).map(x=>{
            if(x == "pId"){
               return params[x].split("-")[0] || x;
            }
           return params[x];
        }).join("/");
        this.props.history.push("/home/"+path);
    }
    render() {
        const {
            config,
            navIndex,
            title,
            config: {
                data,
                data: {
                    list = []
                }
            }
        } = this.state;
        return (
            <MainFrame title={title}>
                <div slot={'SubCenter'}></div>
                <NavMenu
                    time={120000}
                    noEdit={true}
                    slot={'SubCenter'}
                    index={navIndex}
                    data={config}
                    active={navIndex => this.click(navIndex)}></NavMenu>
                <Weather slot={"SubRight"} RequestData={data}/>
                <a onClick={()=>this.goBack()} className={styles.returnBtn}></a>
                <Overview {...this.props} navItem={list[navIndex]}></Overview>
            </MainFrame>
        );
    }
}
