import { useContext, useState } from "react";
import CountUp from "react-countup";
import icobg from "~/assets/images/map_bi/content/icobg.png";
import icon25 from "~/assets/images/map_bi/content/icon25.png";
import icon26 from "~/assets/images/map_bi/content/icon26.png";
import label from "~/assets/images/map_bi/content/label.png";
import videoimg1 from "~/assets/images/map_bi/content/videoimg1.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const ZhongDian = () => {
  const { currentPort, area, currentBranchOffice } = useContext(Context);

  const [block1OptionsList, setBlock1OptionsList] = useState([
    { lable: "视频总数", count: 0 },
    { lable: "在线数量", count: 0 },
    { lable: "离线数量", count: 0 },
  ]);

  const [block2OptionsList, setBlock2OptionsList] = useState([
    { img: icon25, label: "重点工程总数", count: 0 },
    { img: icon26, label: "重点工程开工数量", count: 0 },
  ]);

  return (
    <div className="port_zhongdian">
      <div className="block1">
        <Title title="视频定位" />
        <div className="options">
          <div className="option">
            <div className="leftimg" style={{ backgroundImage: `url(${videoimg1})` }} />
            <div>
              {block1OptionsList.map((item, index) => (
                <div key={index} className="info">
                  <div className="lable">
                    {item.lable}
                    :
                  </div>
                  <div className="count">
                    <CountUp end={+item.count} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="block2">
        <Title title="重点工程" />
        <div className="options">
          {block2OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="circular" style={{ backgroundImage: `url(${icobg})` }}>
                <img src={item.img} alt="" />
              </div>
              <div className="info">
                <div className="title" style={{ backgroundImage: `url(${label})` }}>
                  {item.label}
                </div>
                <div className="count">
                  <CountUp end={+item.count} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ZhongDian;
