import { useState } from "react";
import CountUp from "react-countup";
import icon1 from "~/assets/images/map_bi/content/icon1.png";
import icon2 from "~/assets/images/map_bi/content/icon2.png";
import icon3 from "~/assets/images/map_bi/content/icon3.png";
import icon4 from "~/assets/images/map_bi/content/icon4.png";
import icon5 from "~/assets/images/map_bi/content/icon5.png";
import icon6 from "~/assets/images/map_bi/content/icon6.png";
import img1 from "~/assets/images/map_bi/content/img1.png";
import img2 from "~/assets/images/map_bi/content/img2.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import "./index.less";

function IndexInfo() {
  const [block1OptionsList] = useState([
    { img: icon1, label: "股份公司部门数量", value: 0 },
    { img: icon2, label: "分子公司数", value: 0 },
    { img: icon3, label: "相关方单位数", value: 0 },
  ]);

  const [block2OptionsList] = useState([
    { img: icon4, title: "监管端人员数", value: 0 },
    { img: icon5, title: "分子公司人数", value: 0 },
    { img: icon6, title: "相关方人员数", value: 0 },
  ]);

  return (
    <div className="index_info_container">
      <div className="block1">
        <Title title="企业统计" />
        <div className="options">
          {block1OptionsList.map((item, index) => (
            <div key={index} className="option">
              <img src={item.img} className="img_top" alt="" />
              <img
                className="img_bottom"
                src={img1}
                alt=""
              />
              <div className="label">{item.label}</div>
              <div className="value">
                <CountUp end={+item.value} />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="客户数据" />
        <div className="options">
          {block2OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="img" style={{ backgroundImage: `url(${img2})` }}>
                <img src={item.img} alt="" />
              </div>
              <div className="info">
                <div className="label">{item.title}</div>
                <div className="value">
                  <CountUp end={+item.value} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default IndexInfo;