import OrgChart from "@/pages/OrgChart";
import origin from "@/static/orgin.png";
import origin2 from "@/static/orgin2.png";
import ogr from "@/static/org_tow.png";
import { Modal } from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
const Orgin = (props: Store) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [isSelf, setIsSelf] = useState<boolean>(false);
 
  useEffect(() => {
    homeStore.getOgCount();
    homeStore.getVideoUrlList();
  }, [homeStore]);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <>
      <div className="orgin-content">
        <div className="po" onClick={()=>{
          setIsSelf(true)
          showModal()
        }}>
          <span>{homeStore.ogMap?.count ?? 0}</span>
          <img src={origin} alt="" />
          <p>党组织数量</p>
        </div>
        <div className="po" onClick={()=>{
            setIsSelf(false)
            showModal()
        }}>
          <span>{homeStore.ogMap?.member_count ?? 0}</span>
          <img src={origin2} alt="" />
          <p>党员数量</p>
        </div>
      </div>
      <Modal
        title={"组织架构"}
        className="owner_model"
        width={"80%"}
        okText="确定"
        cancelText="取消"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        {isSelf ? <OrgChart /> : <img alt="org" src={ogr} width={"100%"} />}
      </Modal>
    </>
  );
};

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