import React, {Component} from "react";
import styles from './index.css';
import Box from '../../../components/Box/index.jsx';
import {Scroll} from '../../../components/Animation/index';
import {getData} from '../../../api/index';
import Edit from '../../../components/edit/index';
import TitleEcharts from '../../../components/TitleEcharts/index.jsx';

export class Things extends Component {
    state = {
        navData: {
            data: {
                list: []
            }
        },
        ItemData: {
            data: {
                list: []
            }
        },
        cIndex: 0,
        lIndex: 0,
        echartsData:{
            data:{

            }
        }
    }
    updata = ()=>{
        const {
            match: {
                params = {}
            },
            navItem,
            item
        } = this.props;
        getData({
            port: "ThingsPiontData",
            ...params,
            params: {
               ...navItem
            }
        }).then(res => {
            const {
                code,
                config,
                config: {
                    data: {
                        list = []
                    }
                }
            } = res;
            if (!code) {
                this.setState({navData: config});
                list.length && this.active(0);
            }
        });
    }
    componentDidMount(){
        this.updata();
    }
    //点击监控点导航
    active = cIndex => {
        const {
                match: {
                    params = {}
                }
            } = this.props, {
                navData: {
                    data: {
                        list = []
                    }
                }
            } = this.state;
        getData({
            port: "ThingsTypeData",
            ...params,
            params: {
                ...(list[cIndex] || {}),
                id: ((params.pId + "").split("-")[1] || '')
            }
        }).then(res => {
            const {
                code,
                config,
                config: {
                    data: {
                        list = []
                    }
                }
            } = res;
            if (!code) {
                this.setState({ItemData: config});
                list.length && this.activeItem(0);
            }
        });
        this.setState({cIndex});
    }
    //点击项
    activeItem = lIndex => {
        const {
                match: {
                    params = {}
                }
            } = this.props, {
                ItemData: {
                    data: {
                        list = []
                    }
                }
            } = this.state,
            item = (list[lIndex] || {});
        getData({
            port: "ThingsEchartsData",
            ...params,
            params: item
        }).then(res => {
            const {code, config} = res;
            if (!code) {
                //动态标题
                config.data.title = `24小时${item.name}变化`;
                this.setState({echartsData:config});
            }
        });
        this.setState({lIndex});
    }
    render() {
        const {
            navData,
            navData: {
                data: {
                    list = []
                }
            },
            ItemData,
            ItemData: {
                data: {
                    list: _list = []
                }
            },
            echartsData,
            cIndex,
            lIndex
        } = this.state;
        return (
            <div className={styles.box}>
                <Box className={styles.top}>
                    <Edit
                        style={{
                        bottom: "auto",
                        top: "-10px"
                    }}
                        data={navData}
                        updata={navData => this.setState({navData})}></Edit>
                    <Scroll className={styles.navBox} index={cIndex} active={e => this.active(e)}>
                        {!!list.length && list.map((x, i) => {
                            return (
                                <div
                                    key={i}
                                    className={`${styles.navItem} ${cIndex == i
                                    ? styles.active
                                    : ''}`}
                                    onClick={e => this.active(i)}>
                                    {x.name}
                                </div>
                            );
                        })
}
                    </Scroll>
                    <Edit
                        style={{
                        bottom: "0",
                        top: "50%"
                    }}
                        data={ItemData}
                        updata={ItemData => this.setState({ItemData})}></Edit>
                    <Scroll
                        className={styles.dataItemList}
                        index={lIndex}
                        active={e => this.activeItem(e)}>
                        {!!_list.length && _list.map((x, i) => {
                            return (
                                <div
                                    className={`${styles.dataItem} ${lIndex == i
                                    ? styles.activeDataItem
                                    : ''}`}
                                    key={i}
                                    onClick={e => this.activeItem(i)}>
                                    <i className={`iconfont ${x.icon}`}></i>
                                    <h4>{x.name}</h4>
                                    <h5>{x.value}{x.unit}</h5>
                                </div>
                            );
                        })
}
                    </Scroll>
                </Box>
                <Box className={styles.bottom}>
                    <TitleEcharts data={echartsData}></TitleEcharts>
                </Box>
            </div>
        )
    }
}
export default Things;