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: 40,
        left: 38,
        bottom: 60,
        right: 14,
      },
      xAxis: {
        type: "category",
        data: xData,
        splitLine: {
          show: false,
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          interval: 0, //如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
          rotate: "45", // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
          color: "#FFFFFF",
        },
      },
      yAxis: {
        type: "value",
        splitLine: {
          lineStyle: {
            color: "#FFFFFF",
          },
          show: false,
        },
        name: title === "出入库单数量" ? "条" : "kg",
        nameTextStyle: {
          padding: [0, 26, 0, 0],
          color: "#FFFFFF",
        },
        axisLabel: {
          color: "#FFFFFF",
        },
      },
      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" style={{ position: "relative" }}>
        <div className="content-header">{title}</div>
        <div className="content-charts">
          <ReactECharts
            option={option}
            style={{ height: "100%", width: "100%" }}
          />
        </div>
        <div
          style={{
            position: "absolute",
            display: "flex",
            top: 3,
            right: 10,
          }}
          className="statuslogo"
        >
          <div>
            <div
              style={{ backgroundColor: "#F36B50" }}
              className="statustitle"
            ></div>
            入库
          </div>
          <div>
            <div
              style={{ backgroundColor: "#17D8DC" }}
              className="statustitle"
            ></div>
            出库
          </div>
        </div>
      </div>
    </>
  );
};
