import React from "react";
import { Spin } from "antd";
import { connect } from "dva";
import WorldMap from "./WorldMap";
import styles from "../styles/common.less";

const MapContainer = ({
  data,
  loading,
}) => {
  const parseData = (mapData) => {
    return mapData.map((item) => ({
      name: item.city,
      value: [
        item.longitude ?? 116.4074,
        item.latitude ?? 39.9042,
        item.memberNum,
      ],
    }));
  };

  return (
    <Spin spinning={loading}>
      <div className={styles.common}>
        <WorldMap data={parseData(data)} />
      </div>
    </Spin>
  );
};

export default connect(({ bigscreen }) => ({
  data: bigscreen.mapContainerData.data,
  loading: bigscreen.mapContainerData.loading
}))(MapContainer);
