import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const rankStyleNames = ["first", "second", "third"];

/** 负责查询并展示危险作业记录及其排行样式。 */
function WorkRecordPanel(props) {
  const { portArea } = useContext(Context);
  const [records, setRecords] = useState([]);

  useEffect(() => {
    const loadRecords = async () => {
      const { data = [] } = await props.getEightWorkInfoScreenWorkRecord({
        portArea,
        pageIndex: 1,
        pageSize: 9999,
      });
      setRecords(data);
    };

    loadRecords();
  }, []);

  return (
    <Panel title="安全作业记录" className="port-danger-work__record">
      <div className="port-danger-work-record__content">
        <div className="port-danger-work-record__table">
          <div className="port-danger-work-record__row">
            <div className="port-danger-work-record__cell">序号</div>
            <div className="port-danger-work-record__cell">作业类型</div>
            <div className="port-danger-work-record__cell">状态</div>
            <div className="port-danger-work-record__cell">下一步操作人</div>
          </div>
          <div className="port-danger-work-record__table-body">
            <Spin spinning={props.biStatistics.getEightWorkInfoScreenWorkRecordLoading}>
              <SeamlessScroll list={records} step={0.5}>
                {records.map((item, index) => (
                  <div key={index} className="port-danger-work-record__row">
                    <div className="port-danger-work-record__cell">
                      <div
                        className={`port-danger-work-record__rank port-danger-work-record__rank--${rankStyleNames[index] || "default"}`}
                      >
                        {index + 1}
                      </div>
                    </div>
                    <div className="port-danger-work-record__cell">
                      {item.workTypeName}
                    </div>
                    <div className="port-danger-work-record__cell">
                      {item.statusName}
                    </div>
                    <div className="port-danger-work-record__cell">
                      {item.nextStepName}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </Spin>
          </div>
        </div>
      </div>
    </Panel>
  );
}

export default Connect([NS_BI_STATISTICS], true)(WorkRecordPanel);
