import React from 'react';
import styles from './index.css';
import { getData } from '../../../api/index';
import EditTpl from "../../../components/edit/index";
import Box from '../../../components/Box/index.jsx';
import AutoList from '../../../components/autoList/index';

export default class index extends React.Component {
    state = {
        ParkDetailsInfo: {
            data: {
                list: [],
                introduce: ""
            }
        }
    }
    updata = (props) => {
        const {
            match: {
                params = {}
            },
            navItem
        } = props,
            obj = {
                ...params,
                params: {
                    ...navItem
                }
            };
        //园区基本信息
        getData({
            ...obj,
            port: "ParkDetailsInfo"
        }).then(res => {
            const { code, config } = res;
            if (!code) {
                //动态标题
                // config.data.title = navItem.name;
                this.setState({ ParkDetailsInfo: config })
            }
        });
    }
    componentDidMount() {
        this.updata(this.props);
    }
    componentWillReceiveProps(props) {
        const { navItem } = this.props,
            { navItem: { id } } = props;
        id && id != navItem.id && this.updata(props);
    }
    render() {
        let {
            ParkDetailsInfo
        } = this.state,
        {data:{list = []}} = ParkDetailsInfo,
        [list1,...list2] = list,
        list3 = list2.pop();
        list3 = list3?[list3]:[];
        list1 = list1?[list1]:[];
        return (
            <div className={styles.box}>
                <EditTpl style={{ left: "30%" }} data={ParkDetailsInfo} updata={ParkDetailsInfo => this.setState({ ParkDetailsInfo })}></EditTpl>
                <Box className={styles.top}>
                    <div className={styles.topList}>
                        <AutoList row={1}
                            data={list1}></AutoList>
                        <AutoList row={2}
                            data={list2}
                            style={{ margin: "10px 0" }}></AutoList>
                        <AutoList row={1}
                            data={list3}
                            style={{ margin: "10px 0" }}></AutoList>
                    </div>
                </Box>
                <Box className={styles.bottom}>
                    <div className={styles.introduce} dangerouslySetInnerHTML={{__html:ParkDetailsInfo.data.introduce}}>
                    </div>
                </Box>
            </div>
        )
    }
}