import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon1 from "~/assets/images/map_bi/content/ico15.png";
import icon2 from "~/assets/images/map_bi/content/ico16.png";
import icon3 from "~/assets/images/map_bi/content/ico17.png";
import icon4 from "~/assets/images/map_bi/content/ico18.png";
import icon5 from "~/assets/images/map_bi/content/icon32.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";

const block2OptionsNavList = ["人员", "车辆"];
const block3OptionsNavList = ["人员", "车辆"];
function MenJin() {
  const [block1List, setBlock1List] = useState([
    { label: "封闭区域数", count: 123, icon: icon1 },
    { label: "车行通道数", count: 123, icon: icon2 },
    { label: "人行通道数", count: 123, icon: icon3 },
    { label: "封闭区域当前人数", count: 123, icon: icon4 },
  ]);
  const [block2Index, setBlock2Index] = useState(0);
  const [block3Index, setBlock3Index] = useState(0);
  const [block3List, setBlock3List] = useState([
    { permissionRange: "A区", status: "1", applicant: "张三", approver: "李主管" },
    { permissionRange: "B区", status: "1", applicant: "李四", approver: "王经理" },
    { permissionRange: "C区", status: "1", applicant: "王五", approver: "赵主任" },
    { permissionRange: "D区", status: "0", applicant: "赵六", approver: "钱总监" },
    { permissionRange: "E区", status: "0", applicant: "钱七", approver: "孙部长" },
    { permissionRange: "F区", status: "0", applicant: "孙八", approver: "周经理" },
    { permissionRange: "G区", status: "0", applicant: "周九", approver: "吴主任" },
    { permissionRange: "H区", status: "1", applicant: "吴十", approver: "郑主管" },
    { permissionRange: "I区", status: "0", applicant: "郑一", approver: "王总监" },
    { permissionRange: "J区", status: "1", applicant: "王二", approver: "张部长" },
  ]);

  const chartInstance = useRef(null);
  const main1Ref = useRef(null);

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, [
      { NAME: "零号门", IN: "0", OUT: "0" },
      { NAME: "一号门", IN: "15", OUT: "12" },
      { NAME: "二号门", IN: "8", OUT: "10" },
      { NAME: "三号门", IN: "22", OUT: "18" },
      { NAME: "四号门", IN: "5", OUT: "7" },
      { NAME: "五号门", IN: "30", OUT: "25" },
      { NAME: "六号门", IN: "12", OUT: "14" },
      { NAME: "七号门", IN: "18", OUT: "16" },
      { NAME: "八号门", IN: "9", OUT: "11" },
      { NAME: "九号门", IN: "25", OUT: "20" },
    ]);

    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  });

  const block2OptionsClick = (index) => {
    if (index === block2Index)
      return;
    setBlock2Index(index);
  };

  const block3OptionsClick = (index) => {
    if (index === block3Index)
      return;
    setBlock3Index(index);
  };

  return (
    <div className="branch_office_menjin">
      <div className="block1">
        <Title title="封闭区域统计" />
        <div className="options">
          <div className="items">
            {
              block1List.map((item, index) => (
                <div className="item" key={index}>
                  <div className="img">
                    <img src={item.icon} alt="" />
                  </div>
                  <div className="info">
                    <div className="label">{item.label}</div>
                    <div className="count">
                      <CountUp end={+item.count}></CountUp>
                    </div>
                  </div>
                  <div className="corner-img top-left-img">
                    <img src={icon5} alt="" />
                  </div>
                  <div className="corner-img top-right-img">
                    <img src={icon5} alt="" />
                  </div>
                  <div className="corner-img bottom-left-img">
                    <img src={icon5} alt="" />
                  </div>
                  <div className="corner-img bottom-right-img">
                    <img src={icon5} alt="" />
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className="block2">
        <Title
          title="封闭区域进出情况统计"
          extra={(
            <div className="tabs">
              {block2OptionsNavList.map((item, index) => (
                <div
                  key={index}
                  className={`tab ${index === block2Index ? "active" : ""}`}
                  onClick={() => block2OptionsClick(index)}
                >
                  {item}
                </div>
              ))}
            </div>
          )}
        />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
        </div>
      </div>
      <div className="block3">
        <Title
          title="口门申请记录"
          extra={(
            <div className="tabs">
              {block3OptionsNavList.map((item, index) => (
                <div
                  key={index}
                  className={`tab ${index === block3Index ? "active" : ""}`}
                  onClick={() => block3OptionsClick(index)}
                >
                  {item}
                </div>
              ))}
            </div>
          )}
        />
        <div className="table">
          <div className="tr">
            <div className="td">权限范围</div>
            <div className="td">申请类型</div>
            <div className="td">申请人</div>
            <div className="td">审批人</div>
          </div>
          <div className="scroll">
            <SeamlessScroll list={block3List} step={0.5}>
              {block3List.map((item, index) => (
                <div key={index} className="tr">
                  <div className="td">{item.permissionRange}</div>
                  <div className="td" style={{ color: item.status === "1" ? "#FC6B13" : "#fff" }}>{item.status === "1" ? "临时" : "长期"}</div>
                  <div className="td">{item.applicant}</div>
                  <div className="td">{item.approver}</div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MenJin;
