import { ScrollBoard } from "@jiaminghi/data-view-react";
import React, { useState, useEffect, useMemo } from "react";
import ReactECharts from "echarts-for-react";
export default (props) => {
  const { title, config, data } = props;
  console.log(data);

  const option = useMemo(() => {
    let xData;
    let yData1, yData2;
    if (title === "出入库单数量") {
      xData = data?.map((it) => it?.time);
      yData1 = data?.map((it) => it?.outstoreNum);
      yData2 = data?.map((it) => it?.instoreNum);
    } else if (title === "出入库产品数量") {
      xData = data?.map((it) => it?.time);
      yData1 = data?.map((it) => it?.outstoreNum);
      yData2 = data?.map((it) => it?.instoreNum);
    }

    return {
      grid: {
        top: 25,
        left: 35,
        bottom: 28,
        right: 15,
      },
      xAxis: {
        type: "category",
        data: xData,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: yData1,
          type: "bar",
          itemStyle: {
            borderRadius: [15, 15, 0, 0],
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ECF2", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#7E7E7E", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          data: yData2,
          type: "bar",
          itemStyle: {
            borderRadius: [15, 15, 0, 0],
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#F4664A", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#F1F1F1", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
  }, [data]);

  return (
    <>
      <div className="data-content">
        <div className="content-header">{title}</div>
        <div className="content-charts">
          <ReactECharts
            option={option}
            style={{ height: "100%", width: "100%" }}
          />
        </div>
      </div>
    </>
  );
};
