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

import LeftMenu from "../../components/LeftMenu/index";
import SituationMap from '../../components/Map/SituationMap';
import { ChildMenu } from "../../components/childMenu/index";
import AutoList from '../../components/autoList/index';
import { DropDownList } from "../../components/DropDownList";
import TitleEcharts from "../../components/TitleEcharts/index.jsx";

class Analysis extends React.Component {
    state = {
        //菜单下标
        childIndex: 0,//子菜单下标
        menuIndex: 0,
        leftMenuData: {
            data: {
                list: []
            }
        },
        subMenu: {
            data: {
                list: []
            }
        },
        RightAutoListData: {
            data: {
                list: []
            }
        },
        MapDataNavEcharts: {
            data: {

            }
        },
        mapConfig: {
            option: {
                geoJson: {

                }
            },
            data: {
                amapkey: '',
                map: {},
                legend: [],
                covers: []
            }
        },
        LeftRoundChart: {
            data: {

            }
        },
        RightRoundChart: {
            data: {

            }
        },
    }
    updateMapPointData = null;
    //左侧菜单
    clickMenu = (item, menuIndex) => {
        this.getInfoData(item);
        //获取地图数据
        getData({
            port: "MapPointData1",
            ...params,
            id: item.id
        }).then(res => {
            const { code, config } = res;
            config.data.list = item.productList.filter(x => {
                x.lon = x.lng-0 || 0;
                x.lat = x.lat-0 || 0;
                return x;
            });

            config.data.updateList = add=>{
                this.updateMapPointData = add;
            }
            if(typeof this.updateMapPointData === "function"){
                this.updateMapPointData(config.data.list || []);
            }else{
                this.setState({ mapConfig: config });
            }
        });
        return '';
        const { match: { params = {} } } = this.props;
        const { id } = item;
        getData({
            port: 'childMenuData', //后台数据分类名称
            ...params,
            params: { ...item },
            id
        }).then(res => {
            const { config: subMenu } = res;
            this.setState({ subMenu, menuIndex });
            this.subMenuClick(0);
        });
    }
    //子菜单点击
    subMenuClick = childIndex => {
        this.setState({ childIndex });
        const {
            data: {
                list = []
            }
        } = this.state.subMenu;
        this.getInfoData(list[childIndex] || {});
    }
    //获取子集数据
    getInfoData = e => {
        const {
            match: {
                params = {}
            }
        } = this.props,
            Obj = {
                params: e,
                id: e.id || ''
            };
        //获取右列表数据
        getData({
            port: "RightAutoListData",
            ...params,
            ...Obj
        }).then(res => {
            const { config } = res;
            this.setState({ RightAutoListData: config });
        });
        //柱状 图表
        getData({
            port: "DropDownListData",
            ...params,
            ...Obj
        }).then(res => {
            const { config } = res;
            this.setState({ DropDownListData: config });
            this.dropDownClick((config.data.list || [])[0] || {});
        });

        //圆形图表1
        getData({
            port: "LeftRoundChart",
            ...params,
            ...Obj
        }).then(res => {
            const { config } = res;
            this.setState({ LeftRoundChart: config });
        });
        getData({
            port: "RightRoundChart",
            ...Obj,
            ...params
        }).then(res => {
            const { config } = res;
            this.setState({ RightRoundChart: config });
        });
    }

    componentDidMount() {
        const {
            match: {
                params = {}
            }
        } = this.props;
        getData({
            port: 'leftMenuData',
            ...params
        }).then(res => {
            const { config, config: {
                data: {
                    list = []
                }
            } } = res;
            this.setState({ leftMenuData: config });
            this.clickMenu(list[0] || {}, 0);
        });
    }

    //分类下拉点击切换
    dropDownClick = e => {
        const {
            match: {
                params = {}
            }
        } = this.props;
        const Obj = {
            ...params,
            params: e,
            id: e.id
        };
        getData({
            ...Obj,
            port: "MapDataNavEcharts"
        }).then(res => {
            const { config } = res;
            this.setState({ MapDataNavEcharts: config });
        });
    }

    componentWillUnmount() {
        //组件销毁
    }
    render() {
        const { menuIndex, leftMenuData, mapConfig, childIndex, subMenu, RightAutoListData, DropDownListData, MapDataNavEcharts, LeftRoundChart, RightRoundChart } = this.state;
        return (
            <div className={styles.Box}>
                <div className={styles.Left}>
                    <LeftMenu menuIndex={menuIndex} data={leftMenuData} click={this.clickMenu}></LeftMenu>
                </div>
                <Box className={styles.Right} no={true}>
                    {/* <ChildMenu childIndex={childIndex} data={subMenu} upData={subMenu => this.setState({ subMenu })} onClick={this.subMenuClick} /> */}
                    <div style={{ display: "flex", flex: 1 }}>
                        <div style={{ flex: 1, overflow: "hidden", height: "99.5%" }}>
                            <SituationMap config={mapConfig} />
                        </div>
                        <div className={styles.RightList}>
                            <div className={styles.RightListItem}>
                                <Box className={styles.Box}>
                                    <div className={styles.AutoList}>
                                        <EditTpl style={{
                                            bottom: "auto"
                                        }}
                                            data={RightAutoListData}
                                            upData={RightAutoListData => this.setState({ RightAutoListData })}></EditTpl>
                                        <AutoList row={2} native={true}
                                            data={(RightAutoListData.data || {}).list || []}
                                            style={{ margin: "10px 0" }}></AutoList>
                                    </div>
                                </Box>
                            </div>
                            <div className={styles.RightListItem}>
                                <Box className={styles.Box}>
                                    <DropDownList data={DropDownListData} click={e => this.dropDownClick(e)}></DropDownList>
                                    <TitleEcharts hideTitle={true} data={MapDataNavEcharts}></TitleEcharts>
                                </Box>
                            </div>
                            <div className={styles.RightListItem}>
                                <Box className={styles.Box} style={{ display: "flex" }}>
                                    <TitleEcharts style={{ flex: 1 }} hideTitle={true} data={LeftRoundChart} showTable={false}></TitleEcharts>
                                    <div className={"vertical-line"}></div>
                                    <TitleEcharts style={{ flex: 1 }} hideTitle={true} data={RightRoundChart} showTable={false}></TitleEcharts>
                                </Box>
                            </div>
                        </div>
                    </div>
                </Box>
            </div>
        )
    }
}
export {
    Analysis
}
export default Analysis