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

const AddMemberTrend = ({ options, current, data, loading, dispatch }) => {
  const onChange = (val) => {
    dispatch({
      type: "bigscreen/setMemberAddTrendData",
      payload: { current: val },
    });
    dispatch({
      type: "bigscreen/load_add_member_trend",
    });
  };
  const parseData = (barData) => {
    const xAxisdata = [];
    const seriesData = [];

    (barData ?? []).forEach((item) => {
      xAxisdata.push(item.day);
      seriesData.push(item.newMemberNum);
    });

    return {
      xAxisdata,
      seriesData,
    };
  };

  return (
    <Spin spinning={loading}>
      <div className={styles.common}>
        <div className={styles.common_header}>
          <PanelNav title="新增会员趋势" />
          <div className={styles.common_header_conditions}>
            <RadioButtonGroup
              options={options}
              label={current}
              onChange={onChange}
            />
          </div>
        </div>
        <div className={styles.common_content}>
          <BarChart {...parseData(data)} />
        </div>
      </div>
    </Spin>
  );
};

export default connect(({ bigscreen }) => ({
  data: bigscreen.memberAddTrendData.data,
  loading: bigscreen.memberAddTrendData.loading,
  options: bigscreen.memberAddTrendData.options,
  current: bigscreen.memberAddTrendData.current,
}))(AddMemberTrend);