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

const OrderBasic = ({ data, options, current, loading, dispatch }) => {
  const onChange = (val) => {
    dispatch({
      type: "bigscreen/setOrderData",
      payload: { current: val },
    });
    dispatch({
      type: "bigscreen/load_order_basic",
    });
  };
  const parseData = (barData) => {
    const xAxisdata = [];
    const orderData = [];
    const amountData = [];

    barData.forEach((item) => {
      xAxisdata.push(item.date);
      orderData.push(item.order_count);
      amountData.push(item.total_amount)
    }); 

    return {
      xAxisdata,
      orderData,
      amountData
    };
  };

  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}>
          <BarLineChart {...parseData(data)} />
        </div>
      </div>
    </Spin>
  );
};

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