import { useMount } from "ahooks";
import { useContext, useRef, useState } from "react";
import CountUp from "react-countup";
import anquan_bg1 from "~/assets/images/map_bi/content/anquan_bg1.png";
import anquan_bg2 from "~/assets/images/map_bi/content/anquan_bg2.png";
import anquan_bg3 from "~/assets/images/map_bi/content/anquan_bg3.png";
import anquan_bg4 from "~/assets/images/map_bi/content/anquan_bg4.png";
import icobg from "~/assets/images/map_bi/content/icobg.png";
import icon27 from "~/assets/images/map_bi/content/icon27.png";
import icon28 from "~/assets/images/map_bi/content/icon28.png";
import icon29 from "~/assets/images/map_bi/content/icon29.png";
import label from "~/assets/images/map_bi/content/label.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import { initEcharts1 } from "./echarts";
import "./index.less";

const WeiXian = () => {
  const { currentPort, area, currentBranchOffice } = useContext(Context);
  const [block3List, setBlock3List] = useState([
    { WORK_TYPE: "动火作业", STATUS_NAME: "现场负责人", USER_NAME: "李长健" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "运行乙班" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "卸车部运行乙班" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "动火后", USER_NAME: "王启龙" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "装船部" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "装船队机修乙班" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "动火后", USER_NAME: "彭俊伟" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "装船队机修乙班" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "运行乙班" },
    { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "卸车队运行甲班" },
  ]);
  const [block1OptionsList, setBlock1OptionsList] = useState([
    { img: icon27, label: "申请数", count: 0 },
    { img: icon28, label: "审批中", count: 0 },
    { img: icon29, label: "归档数", count: 0 },
  ]);

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

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, {
      clickDate: ["2025-12-31", "2026-01-01", "2026-01-02", "2026-01-03", "2026-01-04"],
      date: [
        ["7.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
        ["0.0", "0.0", "0.0", "0.0", "0.0"],
      ],
      name: ["动火作业", "盲板作业", "有限空间作业", "高处作业", "吊装作业", "临时用电", "动土作业", "断路作业"],
    });

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

  return (
    <div className="port_weixian">
      <div className="block1">
        <Title title="安全作业状态统计" />
        <div className="options">
          {block1OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="circular" style={{ backgroundImage: `url(${icobg})` }}>
                <img src={item.img} alt="" />
              </div>
              <div className="label" style={{ backgroundImage: `url(${label})` }}>
                {item.label}
                ：
                <CountUp end={+item.count} />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="安全作业情况统计" />
        <div className="content">
          <div ref={main1Ref} style={{ width: "100%", height: "240px" }} />
        </div>
      </div>

      <div className="block3">
        <Title title="安全作业记录" />
        <div className="content">
          <div className="table">
            <div className="tr">
              <div className="td">序号</div>
              <div className="td">作业类型</div>
              <div className="td">状态</div>
              <div className="td">下一步操作人</div>
            </div>
            {block3List && block3List.length > 0
              ? (
                  block3List.map((item, index) => (
                    <div key={index} className="tr">
                      <div className="td">
                        <div
                          className="bg"
                          style={{
                            ...(index === 0 && { backgroundImage: `url(${anquan_bg1})` }),
                            ...(index === 1 && { backgroundImage: `url(${anquan_bg2})` }),
                            ...(index === 2 && { backgroundImage: `url(${anquan_bg3})` }),
                            ...(index > 2 && { backgroundImage: `url(${anquan_bg4})` }),
                          }}
                        >
                          {index + 1}
                        </div>
                      </div>
                      <div className="td">{item.WORK_TYPE}</div>
                      <div className="td">{item.STATUS_NAME}</div>
                      <div className="td">{item.USER_NAME}</div>
                    </div>
                  ))
                )
              : (
                  <div className="tr">
                    <div className="empty">暂无数据</div>
                  </div>
                )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default WeiXian;
