import React, { useState, useEffect } from "react";
import { Tabs, Tag, Flex } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import WpsEditor from "~/pages/Container/WpsEditor";
import RiskAnalysisContent from "./RiskAnalysisContent";
import ContractContent from "./ContractContent";
import TeamContent from "./TeamContent";
import SurveyContent from "./SurveyContent";

import InternalReviewContent from "./InternalReviewContent";
import TechnicalReviewContent from "./TechnicalReviewContent";
import ControlContent from "./ControlContent";
import "./index.less";

const PROCESS_TABS = [
  {
    key: "risk",
    index: "1",
    label: "风险分析",
    state: "已完成",
    stateType: "success",
    role: "市场部经办人 / 市场部经理",
  },
  {
    key: "contract",
    index: "2",
    label: "业务合同",
    state: "已完成",
    stateType: "success",
    role: "机构管理员 / 项目负责人",
  },
  {
    key: "team",
    index: "3",
    label: "项目组",
    state: "已完成",
    stateType: "success",
    role: "评价部经理 / 机构主账号",
  },
  {
    key: "survey",
    index: "4",
    label: "现场踏勘",
    state: "已完成",
    stateType: "success",
    role: "项目组成员",
  },
  {
    key: "report",
    index: "5",
    label: "报告编制",
    state: "编制中",
    stateType: "processing",
    role: "报告编制人",
  },
  {
    key: "internal",
    index: "6",
    label: "内部审核",
    state: "待办理",
    stateType: "default",
    role: "内部审核人",
  },
  {
    key: "technical",
    index: "7",
    label: "技术审核",
    state: "待办理",
    stateType: "default",
    role: "技术负责人",
  },
  {
    key: "control",
    index: "8",
    label: "过程控制",
    state: "前置未完成",
    stateType: "warning",
    role: "过程控制负责人",
    locked: true,
  },
];

const ProjectFlow = (props) => {
  const [activeKey, setActiveKey] = useState("risk");
  const [visible, setVisible] = useState(false);
  const { wpsDoc } = props.safetyEvalBusiness || {};

  const handleTabChange = (key) => {
    if (key === "report") {
      openReportEditor();
      return;
    }
    setActiveKey(key);
  };

  const openReportEditor = async () => {
    setVisible(true);
  };

  useEffect(() => {
    props.queryMyOrCreateDoc({
        docxUrl: ''
      });
  }, []);

  const tabItems = PROCESS_TABS.map((item) => {
    let children = null;
    switch (item.key) {
      case "risk":
        children = <RiskAnalysisContent />;
        break;
      case "contract":
        children = <ContractContent />;
        break;
      case "team":
        children = <TeamContent />;
        break;
      case "survey":
        children = <SurveyContent />;
        break;

      case "internal":
        children = <InternalReviewContent />;
        break;
      case "technical":
        children = <TechnicalReviewContent />;
        break;
      case "control":
        children = <ControlContent />;
        break;
      default:
        children = null;
    }

    return {
      key: item.key,
      disabled: item.locked,
      label: (
        <Flex align="center" gap={6}>
          {item.index} {item.label}
          <Tag color={item.stateType} className="pf-tag">
            {item.state}
          </Tag>
        </Flex>
      ),
      children,
    };
  });

  return (
    <PageLayout
      history={props.history}
      previous
      title={
        <div>
          <span>项目法定流程工作台</span>
          <div className="pageLayout-extra">
            华安化工园区安全预评价 | XP-2026-001
          </div>
        </div>
      }
    >
      <Tabs activeKey={activeKey} onChange={handleTabChange} items={tabItems} />
      {visible && (
        <WpsEditor onCancel={() => setVisible(false)} fileId={wpsDoc?.fileId} />
      )}
    </PageLayout>
  );
};

export default Connect(
  [NS_SAFETY_EVAL_BUSINESS],
  true,
)(AntdTableFuncControl(ProjectFlow));