import { useMount } from "ahooks";
import { useContext, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img7 from "~/assets/images/map_bi/content/img7.png";
import img8 from "~/assets/images/map_bi/content/img8.png";
import navTitleOn from "~/assets/images/map_bi/content/title.png";
import navTitle from "~/assets/images/map_bi/content/title_on.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import { initEcharts1 } from "./echarts";
import "./index.less";

const block3OptionsNavList = ["人员闸机", "车辆闸机"];
const MenJin = () => {
  const { currentPort, area, currentBranchOffice } = useContext(Context);
  const [block1OptionsList, setBlock1OptionsList] = useState([
    {
      img: img7,
      label1: "口门数",
      count1: 0,
      label2: "车闸机数",
      count2: 0,
      label3: "人闸机数",
      count3: 0,
    },
    {
      img: img8,
      label1: "口门数",
      count1: 0,
      label2: "车闸机数",
      count2: 0,
      label3: "人闸机数",
      count3: 0,
    },
  ]);
  const [block3Index, setBlock3Index] = useState(0);
  const [block3List, setBlock3List] = useState([
    { USERNAME: "张三", TIME: "2023-12-01 08:30:15", STATE: "0", EQUIPMENTNAME: "东门人行闸机" },
    { USERNAME: "李四", TIME: "2023-12-01 09:15:22", STATE: "1", EQUIPMENTNAME: "西门人行闸机" },
    { USERNAME: "王五", TIME: "2023-12-01 10:45:30", STATE: "0", EQUIPMENTNAME: "南门人行闸机" },
    { USERNAME: "赵六", TIME: "2023-12-01 11:20:18", STATE: "1", EQUIPMENTNAME: "北门人行闸机" },
    { USERNAME: "陈七", TIME: "2023-12-01 13:30:45", STATE: "0", EQUIPMENTNAME: "东门人行闸机" },
    { USERNAME: "刘八", TIME: "2023-12-01 14:15:20", STATE: "0", EQUIPMENTNAME: "西门人行闸机" },
    { USERNAME: "孙九", TIME: "2023-12-01 15:45:10", STATE: "1", EQUIPMENTNAME: "南门人行闸机" },
    { USERNAME: "周十", TIME: "2023-12-01 16:30:25", STATE: "0", EQUIPMENTNAME: "北门人行闸机" },
    { USERNAME: "吴十一", TIME: "2023-12-02 08:15:30", STATE: "0", EQUIPMENTNAME: "东门人行闸机" },
    { USERNAME: "郑十二", TIME: "2023-12-02 09:30:40", STATE: "1", EQUIPMENTNAME: "西门人行闸机" },
    { USERNAME: "王十三", TIME: "2023-12-02 10:20:15", STATE: "0", EQUIPMENTNAME: "南门人行闸机" },
    { USERNAME: "冯十四", TIME: "2023-12-02 11:45:25", STATE: "1", EQUIPMENTNAME: "北门人行闸机" },
    { USERNAME: "蒋十五", TIME: "2023-12-02 13:10:35", STATE: "0", EQUIPMENTNAME: "东门人行闸机" },
    { USERNAME: "韩十六", TIME: "2023-12-02 14:50:20", STATE: "0", EQUIPMENTNAME: "西门人行闸机" },
    { USERNAME: "杨十七", TIME: "2023-12-02 15:30:45", STATE: "1", EQUIPMENTNAME: "南门人行闸机" },
    { USERNAME: "朱十八", TIME: "2023-12-02 16:20:10", STATE: "0", EQUIPMENTNAME: "北门人行闸机" },
    { USERNAME: "秦十九", TIME: "2023-12-03 08:45:30", STATE: "0", EQUIPMENTNAME: "东门人行闸机" },
    { USERNAME: "何二十", TIME: "2023-12-03 09:20:15", STATE: "1", EQUIPMENTNAME: "西门人行闸机" },
    { USERNAME: "吕二十一", TIME: "2023-12-03 10:30:20", STATE: "0", EQUIPMENTNAME: "南门人行闸机" },
    { USERNAME: "施二十二", TIME: "2023-12-03 11:15:40", STATE: "1", EQUIPMENTNAME: "北门人行闸机" },
  ]);

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

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

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, [
      { PEOPLE_OUT: "2", AREA_NAME: "王雯仲测试", PEOPLE_IN: "1", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "测试", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "测试11", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "1", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港一号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港二号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港三号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港四号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港五号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港六号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港七号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港八号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港九号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "秦港十号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "翻控一号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "翻控二号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
      { PEOPLE_OUT: "0", AREA_NAME: "翻控三号门", PEOPLE_IN: "0", CAR_IN: "0", CAR_OUT: "0" },
    ]);

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

  return (
    <div className="port_menjin">
      <div className="block1">
        <Title title="口门统计" />
        <div className="options">
          {block1OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="img">
                <img src={item.img} alt="" />
              </div>
              <div className="info">
                <div>
                  {item.label1}
                  ：
                  {item.count1}
                </div>
                <div>
                  {item.label2}
                  ：
                  {item.count2}
                </div>
                <div>
                  {item.label3}
                  ：
                  {item.count3}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="进入进出统计" />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
        </div>
      </div>

      <div className="block3">
        <Title title="口门进出记录" />
        <div className="content">
          <div className="options">
            {block3OptionsNavList.map((item, index) => (
              <div
                key={index}
                className="title"
                style={{ backgroundImage: index === block3Index ? `url(${navTitleOn})` : `url(${navTitle})` }}
                onClick={() => block3OptionsClick(index)}
              >
                {item}
              </div>
            ))}
          </div>
          <div className="table">
            <div className="tr">
              <div className="td">{block3Index === 0 ? "人员" : "车牌"}</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">
                      {block3Index === 0 ? item.USERNAME : item.LICENSE_PLATE}
                    </div>
                    <div className="td">{item.TIME}</div>
                    {block3Index === 0 && (
                      <div className={`td ${item.STATE === "0" ? "green" : ""}`}>
                        {item.STATE === "0" ? "进入" : "出港"}
                      </div>
                    )}
                    {block3Index === 0 && (
                      <div className={`td ${item.STATE === "0" ? "yellow" : ""}`}>
                        {item.EQUIPMENTNAME}
                      </div>
                    )}
                    {block3Index === 1 && (
                      <div className={`td ${item.STATE === "4" ? "green" : ""}`}>
                        {item.STATE === "0" ? "进场" : "出场"}
                      </div>
                    )}
                    {block3Index === 1 && (
                      <div className={`td ${item.STATE === "4" ? "yellow" : ""}`}>
                        {item.COMING_REASON}
                      </div>
                    )}
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MenJin;
