import { useContext, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img2_1 from "~/assets/images/map_bi/content/img2_1.png";
import img2_2 from "~/assets/images/map_bi/content/img2_2.png";
import img2ico1 from "~/assets/images/map_bi/content/img2ico1.png";
import img2ico2 from "~/assets/images/map_bi/content/img2ico2.png";
import img2ico3 from "~/assets/images/map_bi/content/img2ico3.png";
import img2ico4 from "~/assets/images/map_bi/content/img2ico4.png";
import img3 from "~/assets/images/map_bi/content/img3.png";
import img4 from "~/assets/images/map_bi/content/img4.png";
import img5 from "~/assets/images/map_bi/content/img5.png";
import oval from "~/assets/images/map_bi/content/oval.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 "./index.less";

const block3OptionsNavList = ["分公司统计", "相关方单位统计"];

function Index() {
  const { currentPort, area, currentBranchOffice } = useContext(Context);

  const [block1OptionsList, setBlock1OptionsList] = useState([
    { label: "分公司企业数", img: img3, count: 0 },
    { label: "相关方单位数", img: img4, count: 0 },
    { label: "员工数", img: img5, count: 0 },
  ]);

  const [block2OptionsList, setBlock2OptionsList] = useState([
    { label: "重大风险点数", img: img2ico1, bg_img: img2_1, count: 0 },
    { label: "较大风险点数", img: img2ico2, bg_img: img2_1, count: 0 },
    { label: "一般风险点数", img: img2ico3, bg_img: img2_2, count: 0 },
    { label: "低风险点数", img: img2ico4, bg_img: img2_2, count: 0 },
  ]);

  const [block3Index, setBlock3Index] = useState(0);
  const [block3List, setBlock3List] = useState([
    { CORP_NAME: "秦皇岛港新益港务有限公司12", count: 197, allDeptCount: 74 },
    { CORP_NAME: "1122公司测试隐患考评", count: 1, allDeptCount: 1 },
    { CORP_NAME: "秦港股份二公司", count: 872, allDeptCount: 73 },
    { CORP_NAME: "秦港股份六公司", count: 1008, allDeptCount: 86 },
    { CORP_NAME: "秦港股份七公司", count: 1168, allDeptCount: 76 },
    { CORP_NAME: "秦港股份九公司", count: 785, allDeptCount: 51 },
    { CORP_NAME: "秦港股份杂货公司", count: 771, allDeptCount: 78 },
    { CORP_NAME: "秦港股份铁运公司", count: 578, allDeptCount: 41 },
    { CORP_NAME: "秦港股份流机公司", count: 671, allDeptCount: 87 },
    { CORP_NAME: "秦港股份电力公司", count: 364, allDeptCount: 43 },
    { CORP_NAME: "秦港股份船舶公司", count: 433, allDeptCount: 39 },
    { CORP_NAME: "秦港股份综服中心", count: 655, allDeptCount: 70 },
    { CORP_NAME: "秦港物资中心", count: 153, allDeptCount: 25 },
    { CORP_NAME: "秦港教培中心", count: 52, allDeptCount: 12 },
    { CORP_NAME: "秦港行政中心", count: 18, allDeptCount: 7 },
    { CORP_NAME: "秦港餐饮中心", count: 96, allDeptCount: 29 },
    { CORP_NAME: "工程项目中心", count: 12, allDeptCount: 5 },
    { CORP_NAME: "秦港技术中心", count: 50, allDeptCount: 7 },
    { CORP_NAME: "河北港口集团数联科技（雄安）有限公司", count: 15, allDeptCount: 5 },
    { CORP_NAME: "秦港新闻中心", count: 1, allDeptCount: 1 },
  ]);

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

  return (
    <div className="port_index">
      <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={oval} alt="" />
              <div className="label">{item.label}</div>
              <div className="count">
                <CountUp end={+item.count} />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="风险区域统计" />
        <div className="options">
          {block2OptionsList.map((item, index) => (
            <div key={index} className="option">
              <img src={item.img} className="img" alt="" />
              <img src={item.bg_img} className="img_bg" alt="" />
              <div>
                <div className="label">{item.label}</div>
                <div className="count">
                  <CountUp end={+item.count} />
                </div>
              </div>
            </div>
          ))}
        </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">公司名称</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.CORP_NAME : item.RELEVANT_UNIT_NAME}
                    </div>
                    <div className="td">
                      {block3Index === 0 ? item.allDeptCount - 1 : item.allDeptCount}
                    </div>
                    <div className="td">{item.count}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
