import React from 'react';
import styles from './index.css';
import ParkDetail from './Details/index.jsx';
import Things from './Things/index.jsx';
import LeftMenu from "../../components/leftMenu/index";
import Iframe from "./iframe/index";
import {getData} from '../../api/index';
const ChildNav = props =>{
    const {ParkDetailMenu:{data:{list = []}},activeIndex} = props;
    switch((list[activeIndex] || {}).tpl){
        case "ParkDetail":
            return <ParkDetail {...props}></ParkDetail>
        case "Things":
            return <Things {...props}></Things>
    }
    return "";
}
export default class index extends React.Component {
    state = {
        ParkDetailMenu: {
            data:{
                list:[]
            }
        },
        activeIndex:0
    }
    componentWillReceiveProps(props){
        const {
            match: {
                params
            },navItem = {}
        } = props,
        {navItem:_navItem = {}} = this.props;
        navItem.id && navItem.id != _navItem.id && getData({
            port:"ParkDetailMenu",
            ...params,
            params:{
                ...navItem
            }
        }).then(res => {
            const {code, config,config:{
                data:{
                    list = []
                }
            }} = res;
            if (!code) {
                config.data.list = list.map((x,i)=>{
                    //初始ID 
                    x.id = x.id || i+1;
                    return x;
                });
                this.setState({ParkDetailMenu: config});
                list.length && this.clickMenu({},0);
            }
        });
    }
    clickMenu = (item,activeIndex) => {
        this.setState({activeIndex});
    }
    render() {
        const {ParkDetailMenu,ParkDetailMenu:{
            data:{
                list = []
            }
        },activeIndex} = this.state;
        return (
            <div className={styles.cBox}>
                <LeftMenu activeIndex={activeIndex} {...this.props} style={{height:"auto"}} data={ParkDetailMenu} click={this.clickMenu}></LeftMenu>
                <div style={{display:'flex'}}>
                    <ChildNav {...this.props} item={list[activeIndex]} ParkDetailMenu={ParkDetailMenu} activeIndex={activeIndex}></ChildNav>
                </div>
                <Iframe {...this.props} style={{flex:1}}></Iframe>
            </div>
        )
    }
}