// 污水
import React, { PureComponent } from "react";
import {
  CenterFloodTop,
  CenterPage,
  FloodItem,
  LeftPage,
  RightPage,
} from "./style";
import ChartBox from "../ChartBox";
import BMap from "../centerPage/charts/BMap";
import { ShowIconType } from "../Map/MockData";

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { name: "内涝点总数", value: "28%" },
        { name: "内涝点消除率", value: "28%" },
      ],
    };
  }
  render() {
    return (
      <CenterPage>
        <CenterFloodTop>
          {this.state.data.map((item, idx) => (
            <FloodItem
              color={idx ? "#9f6d0b" : "#3598df"}
              right={`${idx * 180 + 50}px`}
            >
              {item.name}
              <div className="text">{item.value}</div>
            </FloodItem>
          ))}
        </CenterFloodTop>
        <BMap
          actives={[
            ShowIconType.Personnel,
            ShowIconType.Car,
            ShowIconType.Waterlogging,
            ShowIconType.Video,
            ShowIconType.Rainfall,
            ShowIconType.Flow,
            ShowIconType.All,
          ]}
        />
      </CenterPage>
    );
  }
}

export default index;