import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon29 from "~/assets/images/map_bi/content/icon29.png";
import icon30 from "~/assets/images/map_bi/content/icon30.png";
import icon32 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 FengBi() {
  const [block1List, setBlock1List] = useState([
    { img: icon29, title: "堆场区", count1: 123, count2: 45 },
    { img: icon30, title: "码头区", count1: 141, count2: 43 },
  ]);
  const [block2Index, setBlock2Index] = useState(0);
  const [block3Index, setBlock3Index] = useState(0);
  const [block3List, setBlock3List] = useState([
    { 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" },
  ]);

  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_fengbi">
      <div className="block1">
        <Title title="封闭区域统计" />
        <div className="options">
          {
            block1List.map((item, index) => (
              <div className="option" key={index}>
                <div className="img">
                  <img src={item.img} alt="" />
                </div>
                <div className="infos">
                  <div className="title">{item.title}</div>
                  <div className="info">
                    <div>
                      <div className="label">人数</div>
                      <div className="value">
                        <CountUp end={+item.count1}></CountUp>
                      </div>
                    </div>
                    <div>
                      <div className="label">车辆数</div>
                      <div className="value">
                        <CountUp end={+item.count2}></CountUp>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="corner-img top-left-img">
                  <img src={icon32} alt="" />
                </div>
                <div className="corner-img top-right-img">
                  <img src={icon32} alt="" />
                </div>
                <div className="corner-img bottom-left-img">
                  <img src={icon32} alt="" />
                </div>
                <div className="corner-img bottom-right-img">
                  <img src={icon32} alt="" />
                </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="options">
          <div className="table">
            <div className="tr">
              <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.NAME}</div>
                    <div className="td">{item.IN}</div>
                    <div className="td">{item.OUT}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FengBi;
