import { Modal } from "antd";
import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import KanBan from "./kanban";
const Wz = (props: Store) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

  const initChart = (data) => {
    var myChart = echarts.init(document.getElementById("wz"));
    var option = {
      legend: {
        top: "5%",
        right: "right",
        textStyle: {
          color: "#fff",
        },
        formatter: function (name) {
          let v;
          data.forEach((item) => {
            if (item.name === name) {
              v = item.value;
            }
          });
          return name + "-" + v;
        },
      },
      series: [
        {
          center: ["35%", "40%"],
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          label: {
            backgroundColor: "#F6F8FC",
            borderColor: "#8C8D8E",
            borderWidth: 0,
            show: true,
            borderRadius: 4,
          },
          data,
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    homeStore.getMm().then((res) => {
      initChart(res.data?.record);
    });
  }, [homeStore]);
  return <>
    <div onClick={() => {setIsModalOpen(true)}} style={{ width: "100%", height: "100%" }} id="wz"></div>;
    <Modal
        title="物资看板"
        className="owner_model"
        width={"80%"}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <KanBan />
      </Modal>
  </>
};
export default inject("homeStore")(observer(Wz));