import PoverPage from "@/pages/poverPage";
import { Modal } from "antd";
import * as echarts from "echarts";
import { useEffect, useState } from "react";

const Pover = () => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const initChart = () => {
    var myChart = echarts.init(document.getElementById("pover"));
    var option = {
      xAxis: {
        type: "category",
        data: ["基干民兵", "普通民兵", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 30,
        },
      },
      grid: {
        top: "10%",
        bottom: "45%",
        right: "5%",
        left: "12%",
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false, // 去除网格线
        },
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          barWidth: 10, // 设置柱子粗细
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    initChart();
  }, []);
  const openPoverHander = () => {
    setIsModalOpen(true);
  };
  return (
    <>
      <div
        onClick={openPoverHander}
        style={{ width: "100%", height: "100%" }}
        id="pover"
      ></div>
      <Modal
        title="力量汇总"
        className="owner_model"
        width={"80%"}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <PoverPage />
        {/* <p>cascsa</p> */}
      </Modal>
    </>
  );
};

export default Pover;