import React, { Component } from "react";
import styles from './index.css';
import { getData } from '../../api/index';
import Amap, { GeoJSON } from '../../components/amap/index';
import { DistributedList } from '../../components/DistributedList/index.jsx';
import Box from '../../components/Box/index.jsx';

import { Zg } from '../../components/Map/SituationMap';
import { LevelList1 } from '../../components/LevelList1/index.jsx';
import { NumTostring } from '../../components/numTostring/index';
class Distributed extends Component {
    state = {
        mapConfig: {
            data: {
                noEdit: true,
                amapkey: '',
                map: {

                },
                legend: [],
                covers: []
            }
        },
        CropCount: {
            data: {
                title: "",
                list: []
            }
        },
        ParkList: {
            mId: "",
            pId: "",
            data: {
                title: "",
                list: []
            }
        },
        item: {},
        activeIndex: 0,
        //类别index
        typeIndex:0
    }
    componentDidMount() {
        const { match: { params = {} } } = this.props;
        getData({
            port: "CropCount",
            ...params,
        }).then(res => {

            const { config } = res;
            this.setState({ CropCount: config });
            this.active(config.data.list[0] || {},0);
        });
    }
    //类别点击
    active = (e,typeIndex) =>{
        this.setState({typeIndex});
        const { match: { params = {} } } = this.props;
        getData({
            port: "ParkList",
            ...params,
            params:{
                ...e
            },
            id:e.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];
                //设置url跳转路由

                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) {
                if(typeof this.updateCover === "function"){
                    this.updateCover(covers,config.data.legend.map(x => {
                        return {
                            ...x,
                            content: "diffusionMarkerIcon"
                        }
                    }));
                }else{
                    this.setState({
                        ParkList: config, mapConfig: {
                            data: {
                                amapkey: '',
                                map: {
    
                                },
                                legend: config.data.legend.map(x => {
                                    return {
                                        ...x,
                                        content: "diffusionMarkerIcon"
                                    }
                                }),
                                covers
                            }
                        }
                    });
                    return '';
                }
                this.setState({
                    ParkList: config
                });
                this.activePoint(((config.data || {}).list || [])[0] || {},'',0);
            }
        });
    }
    //列表项点击
    activePoint = (e, show, activeIndex) => {
        this.addPoint(e);
        this.setState({ activeIndex, item: e });
    }
    //点击搜索
    searchValue = (e)=>{
        const {CropCount:{data:{list}},typeIndex} = this.state,
        o = list[typeIndex];
        delete o.id;
        this.active({...o,
        key:e},typeIndex);
    }
    render() {
        const { mapConfig, CropCount, ParkList, activeIndex ,typeIndex} = this.state;
        return (
            <div className={styles.box}>
                <Amap updateCover={e=>this.updateCover=e} noLegend={true} {...this.props} config={mapConfig} addPoint={e => this.addPoint = e}>
                    <Zg></Zg>
                </Amap>
                <div className={styles.ListBox}>
                    <Box style={{ height: "25%" }}>
                        <LevelList1 activeItem={typeIndex} style={{ position: "relative" }} data={CropCount} active={(...e)=>this.active(...e)}></LevelList1>
                        <div className={styles.Line}></div>
                        <div className={styles.merchantsBody}>
                            <div className={styles.viewName}>
                                {(((CropCount.data || {}).list || [])[typeIndex] || {}).title || ''}
                            </div>
                            <div className={styles.viewVal}>
                                <NumTostring>{(((CropCount.data || {}).list || [])[typeIndex] || {}).value || ''}</NumTostring>
                            </div>
                        </div>
                    </Box>
                    <br />
                    <Box style={{ height: "75%" }}>
                        <DistributedList searchValue={this.searchValue} {...this.props} style={{ height: "100%" }} activePoint={(e, show, activeIndex) => this.activePoint(e, show, activeIndex)} activeIndex={activeIndex} data={ParkList} />
                    </Box>
                </div>
            </div>
        );
    }
}
export default Distributed;