import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
import icon1 from "~/assets/images/map_bi/content/ico19.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";

function ZhongDian() {
  const [block1List, setBlock1List] = useState([
    { label: "项目总数", value: 34, icon: icon1 },
    { label: "待开工项目数", value: 34, icon: icon1 },
    { label: "进行中项目数", value: 34, icon: icon1 },
  ]);
  const [block3List, setBlock3List] = useState([
    { projectName: "北京地铁17号线工程", contractor: "中建一局", inspections: 25, hazards: 3, penaltyAmount: 15000 },
    { projectName: "上海浦东国际机场扩建", contractor: "中铁建工", inspections: 32, hazards: 5, penaltyAmount: 25000 },
    { projectName: "广州南沙大桥建设", contractor: "中交一航", inspections: 18, hazards: 2, penaltyAmount: 12000 },
    { projectName: "深圳国际会展中心", contractor: "中建三局", inspections: 45, hazards: 8, penaltyAmount: 35000 },
    { projectName: "杭州亚运会场馆改造", contractor: "中国建筑", inspections: 28, hazards: 4, penaltyAmount: 18000 },
    { projectName: "成都天府国际机场", contractor: "中冶集团", inspections: 38, hazards: 6, penaltyAmount: 28000 },
    { projectName: "武汉长江隧道工程", contractor: "中电建", inspections: 22, hazards: 1, penaltyAmount: 8000 },
    { projectName: "西安高新区基础设施", contractor: "中石化建设", inspections: 41, hazards: 7, penaltyAmount: 32000 },
    { projectName: "南京长江大桥维修", contractor: "中国化学", inspections: 15, hazards: 2, penaltyAmount: 10000 },
    { projectName: "重庆轨道交通5号线", contractor: "中国铁建", inspections: 35, hazards: 4, penaltyAmount: 20000 },
  ]);

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

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, [
      { NAME: "中建一局", WAIT_START: "12", IN_PROGRESS: "8" },
      { NAME: "中铁建工", WAIT_START: "15", IN_PROGRESS: "10" },
      { NAME: "中交一航", WAIT_START: "8", IN_PROGRESS: "12" },
      { NAME: "中建三局", WAIT_START: "20", IN_PROGRESS: "15" },
      { NAME: "中国建筑", WAIT_START: "5", IN_PROGRESS: "7" },
      { NAME: "中冶集团", WAIT_START: "18", IN_PROGRESS: "14" },
      { NAME: "中电建", WAIT_START: "10", IN_PROGRESS: "9" },
      { NAME: "中石化建设", WAIT_START: "22", IN_PROGRESS: "18" },
      { NAME: "中国化学", WAIT_START: "7", IN_PROGRESS: "5" },
      { NAME: "中国铁建", WAIT_START: "16", IN_PROGRESS: "13" },
    ]);

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

  return (
    <div className="branch_office_zhongdian">
      <div className="block1">
        <Title title="项目统计" />
        <div className="options">
          <div className="items">
            {
              block1List.map((item, index) => (
                <div className="item" key={index}>
                  <div className="img">
                    <img src={item.icon} alt="" />
                  </div>
                  <div className="info">
                    <div className="label">{item.label}</div>
                    <div className="value">
                      <CountUp end={+item.value}></CountUp>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="承包项目情况" />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "260px" }} />
        </div>
      </div>
      <div className="block3">
        <Title title="项目进行情况" />
        <div className="options">
          <div className="table">
            <div className="tr">
              <div className="td">项目名称</div>
              <div className="td">承包单位</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">{item.projectName}</div>
                    <div className="td">{item.contractor}</div>
                    <div className="td">{item.inspections}</div>
                    <div className="td">{item.hazards}</div>
                    <div className="td">{item.penaltyAmount}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block4">
        <Title title="移动监控情况" />
        <div className="options">
          <AliPlayer source="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" height="150px" isLive />
        </div>
      </div>
    </div>
  );
}

export default ZhongDian;
