import { useEffect, useState } from "react";
import { Modal } from "antd";
import "./left.less";

import * as echarts from "echarts";
import Orgin from "./orgin";
import Pover from "./pover";
const HomeLeft = () => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const initChart = () => {
    var myChart = echarts.init(document.getElementById("xunlian"));
    var option = {
      xAxis: {
        type: "category",
        data: ["应急抢险", "消防灭火", "水上救援", "民兵训练", "维稳处突"],
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 30,
        },
      },
      grid: {
        top: "10%",
        bottom: "45%",
        right: "5%",
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false, // 去除网格线
        },
      },
      series: [
        {
          data: [10, 15, 27, 10, 18],
          type: "line",
          smooth: true,
          areaStyle: {
            opacity: 0.1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };

  useEffect(() => {
    initChart();
  }, []);

  // const openDispatch = () => {
  // 位置移动
  // MapUtl.makerList[0].setPosition([103.55, 30.342]);
  // var m = MapUtl.amap;
  // var newIcon = new m.Icon({
  //   image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
  //   size: new m.Size(25, 34), // 图标大小
  //   anchor: new m.Pixel(12, 32), // 图标锚点
  // });
  // MapUtl.makerList[0].setIcon(newIcon);
  // };

  return (
    <div className="left_container">
      <div className="org">
        <div className="org_head">
          <p>组织架构</p>
        </div>
        <Orgin />
      </div>
      <div className="org">
        <div className="org_head">
          <p>武装力量</p>
        </div>
        <Pover />
      </div>
      <div className="org">
        <div className="org_head">
          <p>年度训练</p>
        </div>
        <div style={{ width: "100%", height: "100%" }} id="xunlian"></div>
      </div>
      <Modal
        title="组织架构"
        className="owner_model"
        width={"80%"}
        open={isModalOpen}
        afterClose={() => {}}
        okText="确定"
        cancelText="取消"
        onOk={() => {}}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <p>cascsa</p>
      </Modal>
    </div>
  );
};

export default HomeLeft;