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

const OverView = ({ overviewData }) => {
  return (
    // <Spin spinning={overviewData.loading}>
      <div className={styles.overview}>
        <img
          className={styles.overview_bg}
          src={require("../../../../assets/bigscreen/overview-bg.png")}
        />
        <span className={styles.overview_title}>平台数据汇总</span>
        <div className={styles.overview_content}>
          <div className={styles.overview_content_item}>
            <img
              className={styles.item_img}
              src={require("../../../../assets/bigscreen/member.png")}
            />
            <CountUp
              className={styles.item_value}
              end={overviewData.data.memberNum}
            />
            <div className={styles.item_label}>会员</div>
          </div>
          <div className={styles.overview_content_item}>
            <img
              className={styles.item_img}
              src={require("../../../../assets/bigscreen/dis.png")}
            />

            <CountUp
              className={styles.item_value}
              end={overviewData.data.distributorNum}
            />
            <div className={styles.item_label}>分销商</div>
          </div>
          <div className={styles.overview_content_item}>
            <img
              className={styles.item_img}
              src={require("../../../../assets/bigscreen/store.png")}
            />
            <CountUp
              className={styles.item_value}
              end={overviewData.data.storeNum}
            />
            <div className={styles.item_label}>店铺</div>
          </div>
          <div className={styles.overview_content_item}>
            <img
              className={styles.item_img}
              src={require("../../../../assets/bigscreen/dis.png")}
            />
            <CountUp
              className={styles.item_value}
              end={overviewData.data.serviceProviderNum}
            />
            <div className={styles.item_label}>服务商</div>
          </div>
          <div className={styles.overview_content_item}>
            <img
              className={styles.item_img}
              src={require("../../../../assets/bigscreen/member.png")}
            />
            <CountUp
              className={styles.item_value}
              end={overviewData.data.productNum}
            />
            <div className={styles.item_label}>商品总数</div>
          </div>
        </div>
        <div className={styles.overview_member}>
          <img
            className={styles.overview_member_img}
            src={require("../../../../assets/bigscreen/overview-bg.png")}
          />
          <span className={styles.overview_member_title}>会员地域分布</span>
        </div>
      </div>
    // </Spin>
  );
};

export default connect(({ bigscreen }) => ({
  overviewData: bigscreen.overviewData,
}))(OverView);