import PoverPage from "@/pages/poverPage";
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";

const Pover = (props: Store) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const initChart = (data) => {
    var myChart = echarts.init(document.getElementById("pover"));
    var option = {
      xAxis: {
        type: "category",
        data: data.map((item) => item.dep_name),
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 30,
        },
      },
      grid: {
        top: "10%",
        bottom: "35%",
        right: "5%",
        left: "12%",
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false, // 去除网格线
        },
      },
      series: [
        {
          data: data.map((item) => item.count),
          type: "bar",
          barWidth: 10, // 设置柱子粗细
          color:"#0094FF",
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };

  useEffect(() => {
    homeStore.getAf().then((res) => {
      initChart(res?.data?.record);
    });
   
  }, [homeStore]);
  const openPoverHander = () => {
    setIsModalOpen(true);
  };
  return (
    <>
      <div
        onClick={openPoverHander}
        style={{ width: "100%", height: "100%" }}
        id="pover"
      ></div>
      <Modal
        title="力量汇总"
        className="owner_model"
        width={"80%"}
        height={"700px"}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <PoverPage />
      </Modal>
    </>
  );
};

export default inject("homeStore")(observer(Pover));
