import React from 'react';
import styles from './Situation.css';
import Box from "../components/Box/index.jsx";
import { TitleListText } from "../components/TitleListText/index.jsx";
import { VerticalList } from "../components/VerticalList/index.jsx";
import TitleEcharts from "../components/TitleEcharts/index.jsx";
import SituationMap, { Zg } from '../components/Map/SituationMap';
import { getData } from "../api/index";
import { Scroll } from "../components/Animation/index";

import { TableScroll } from "../components/TableScroll/index";
import { Merchants } from "../components/Merchants";
import { HorizontalListTitle } from "../components/HorizontalListTitle";
import { DropDownList } from "../components/DropDownList";

import Amap from '../components/amap/index';
import Title from '../components/Title/index.jsx';
import EditTpl from "../components/edit/index";



export default class Situation extends React.Component {
    state = {
        kindId: '',
        itemId: "",
        pointData: {},

        FirmExplanation: {
            mId: "",
            pId: "",
            data: {
                title: "",
                introduce: '',
                list: []
            }
        },
        MapDataNav: {
            data: {
                list: []
            }
        },
        MapDataNavEcharts: {
            data: {

            }
        },
        //bottom Table Data
        MapDataNavTable: {
            data: {

            }
        },
        MapDataNavTable1: {
            data: {

            }
        },
        merchantsData: {
            data: {
                title: "",
                list: []
            }
        },

        //top right Echarts pie Data
        SalesRatio: {
            data: {

            }
        },

        HorizontalListTitleData: {
            data: {
                list: []
            }
        },
        mapConfig: {
            option: {
                geoJson: {

                }
            },
            data: {
                amapkey: '',
                map: {},
                legend: [],
                covers: []
            }
        },
        //预警
        WarningData: {
            mId: "",
            pId: "",
            data: {
                title: "",
                list: []
            }
        },
        mapConfig1: {
            noEdit: true,
            data: {
                amapkey: '',
                map: {

                },
                legend: [],
                covers: [],
                zoom: 6
            }
        },
        WarningDataItem: {}
    }
    //需求定时更新
    demandInformation = null;
    getDemandInformation({id = ""}){
        clearTimeout(this.demandInformation);
        const {
            match: {
                params = {}
            }
        } = this.props;
        getData({
            port: "MapDataNavTable1",
            ...params,
            id //数据ID
        }).then(res => {
            const { config } = res;
            this.setState({ MapDataNavTable1: config });
            this.demandInformation = setTimeout(e=>{
                // this.getDemandInformation({id});
            },1000);
        });
    }
    getAllData = (id = "") => {
        const {
            match: {
                params = {}
            }
        } = this.props;
        this.getDemandInformation({id});
        //left top 标题 列表 描述
        getData({
            port: "FirmExplanation",
            ...params,
            id //数据ID
        }).then(res => {
            const { config } = res;
            this.setState({ FirmExplanation: config });
        });
        //left bottom 竖向列表
        getData({
            port: "MapDataNav",
            ...params,
            id //数据ID
        }).then(res => {
            const { config, config: {
                data: {
                    list = []
                }
            } } = res;
            this.setState({ MapDataNav: config });
            list.length && this.itemClick(list[0]);
        });

        getData({
            port: "merchantsData",
            ...params,
            id //数据ID
        }).then(res => {
            const { config } = res;
            this.setState({ merchantsData: config });
        });

        getData({
            port: "HorizontalListTitleData",
            ...params,
            id //数据ID
        }).then(res => {
            const { config, config: {
                data: {
                    list = []
                }
            } } = res;
            this.setState({ HorizontalListTitleData: config });
            list.length && this.titleClick(list[0]);
        });

        getData({
            port: "DropDownListData",
            ...params,
            id //数据ID
        }).then(res => {
            const { config, config: {
                data: {
                    list = []
                }
            } } = res;
            this.setState({ DropDownListData: config });
            list.length && this.dropDownClick(list[0]);

        });

        //bottom Table Data    TitleTable
        getData({
            port: "MapDataNavTable",
            ...params,
            id //数据ID
        }).then(res => {
            const { config } = res;
            this.setState({ MapDataNavTable: config });
        });
        


        getData({
            port: "WarningData",
            ...params,
            id //数据ID
        }).then(res => {
            const { code } = res;
            let { config = { data: { legend: [], list: [] } } } = res;
            //绑定点击处理
            config.data.list = config.data.list.map((x, i) => {
                //绑定点击事件
                x.events = {
                    click: e => {
                        this.activePoint(x, true, i);
                    }
                }
                //绑定图例对象到项
                x._legend = config.data.legend[x.legend - 1 || 0];
                return x;
            });
            const covers = config.data.list.map((x, i) => {
                x.legend = x.legend || 1;
                const position = x.lnglat.map(x => {
                    const v = x - 0;
                    return v ? v : 1;
                });
                return {
                    ...x,
                    id: x.id,
                    type: "Marker",
                    position,
                    value: "",
                    style: {
                        strokeColor: "#FF0000",
                        fillColor: "rgba(255,0,0,0.5)"
                    }
                }
            });
            if (!code) {
                this.setState({
                    WarningData: config, mapConfig1: {
                        data: {
                            amapkey: '',
                            map: {

                            },
                            legend: config.data.legend.map(x => {
                                return {
                                    ...x,
                                    content: "diffusionMarkerIcon"
                                }
                            }),
                            covers
                        }
                    }
                });
                setTimeout(f => {
                    this.activePoint(config.data.list[0]);
                }, 1000);
            }
        });
    }

    //预警地图点击
    activePoint = (e) => {
        this.addPoint(e);
        this.setState({ WarningDataItem: e });
    }

    //标题类切换 点击
    titleClick = e => {
        const {
            match: {
                params = {}
            }
        } = this.props;
        const Obj = {
            ...params,
            params: e,
            id: e.id
        };
        //SalesRatio
        getData({
            port: "SalesRatio",
            ...Obj,
        }).then(res => {
            const { config } = res;
            this.setState({ SalesRatio: config });
        });
    }
    //分类下拉点击切换
    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 });
        });
    }


    componentDidMount() {
        //初始组件数据
        this.getAllData();
    }
    componentWillUnmount(){
        clearTimeout(this.demandInformation);
    }
    updateMapPointData = null;
    itemClick = e => {
        const {
            match: {
                params = {}
            }
        } = this.props;
        const Obj = {
            ...params,
            params: e,
            id: e.id
        };
        //获取地图数据
        getData({
            ...Obj,
            port: "MapPointData"
        }).then(res => {
            const { code, config } = res;
            if (!code) {
                config.data.updateList = add=>{
                    this.updateMapPointData = add;
                }
                if(typeof this.updateMapPointData === "function"){
                    this.updateMapPointData(config.data.list || []);
                }else{
                    this.setState({ mapConfig: config });
                }
            }
        });
    }
    render() {
        const {
            FirmExplanation,
            MapDataNav,
            MapDataNavTable,
            MapDataNavTable1,
            MapDataNavEcharts,
            merchantsData,
            HorizontalListTitleData,
            DropDownListData,
            SalesRatio,
            mapConfig,
            mapConfig1,
            WarningDataItem,
            WarningData
        } = this.state;
        return (
            <div
                className={styles.flexWarp}
                style={{
                    height: "100%"
                }}>
                <div className={styles.colLeft}>
                    <Box style={{
                        height: "68%"
                    }}>
                        <TitleListText data={FirmExplanation} />
                    </Box>
                    <Box
                        style={{
                            height: "calc(32% - 10px)",
                            marginTop: "10px"
                        }}>
                        <VerticalList data={MapDataNav} itemClick={e => this.itemClick(e)} />
                    </Box>
                </div>
                <div className={styles.colMiddle}>
                    <div style={{height:"673px",overflow: "hidden"}}>
                        <SituationMap style={{transform: "scale(1.2)"}} config={mapConfig} />
                    </div> 
                    <div style={{
                        height: "222px",
                        display: "flex"
                    }}>
                        <Box style={{
                            height: "100%",
                            width: "calc(50% - 5px)",
                            marginRight: '5px'
                        }}>
                            <TableScroll className={styles.oneLi} data={MapDataNavTable} />
                        </Box>
                        <Box style={{
                            height: "100%",
                            width: "calc(50% - 5px)",
                            marginLeft: '5px'
                        }}>
                            <TableScroll data={MapDataNavTable1} />
                        </Box>
                    </div>

                </div>
                <Scroll className={styles.colRight}>
                    <Box className={styles.ItemBox}>
                        <DropDownList data={DropDownListData} click={e => this.dropDownClick(e)}></DropDownList>
                        <TitleEcharts hideTitle={true} data={MapDataNavEcharts}></TitleEcharts>
                    </Box>
                    <Box className={styles.ItemBox}>
                        <HorizontalListTitle style={{ position: 'relative' }} data={HorizontalListTitleData} click={e => this.titleClick(e)} />
                        <TitleEcharts hideTitle={true} data={SalesRatio} showTable={false}></TitleEcharts>
                    </Box>
                    <Box className={styles.ItemBox}>
                        <Merchants data={merchantsData} />
                    </Box>
                    <Box className={styles.ItemBox} style={{ position: "relative" }}>
                        <EditTpl data={WarningData} upData={WarningData => this.setState({ WarningData })}></EditTpl>
                        <Title style={{ position: "absolute", left: "3px", right: "3px", top: "3px", zIndex: 10, background: "rgba(8,11,33,.8)" }}>{(WarningData.data || {}).title}</Title>
                        <Amap useAMapUI={e => { window.AMapUIProtocol = "https:" }} noLegend={true} noTool={true} {...this.props} config={mapConfig1} addPoint={e => this.addPoint = e}>
                            <Zg></Zg>
                        </Amap>
                        <div className={styles.warningTextDes}>
                            <span>{WarningDataItem.desc}</span>
                        </div>
                    </Box>
                </Scroll>
            </div>
        )
    }
}