import { Button } from "antd";
import { PageContainer } from "@/components";
import { Sidebar } from "@/pages/Assessment/Index/components/Sidebar";
import { Container } from "./components/Container";
import style from "@/pages/Assessment/Index/index.module.scss";
import { useHashQuery } from "@/hooks";
import { ASS_INDEX_TYPE } from "@/types";
import { useState } from "react";
import { getPerNormListApi } from "@/api";

const TABS = [
  {
    value: ASS_INDEX_TYPE.FIXED,
    label: "定级评估指标",
  },
  {
    value: ASS_INDEX_TYPE.OPERATION,
    label: "运行评估指标",
  },
];

const ManagementReportPage = () => {
  const [type, setType] = useHashQuery("tab", ASS_INDEX_TYPE.FIXED);
  const [currentId, setCurrentId] = useState<number | null>(null);

  const getTreeData = (_type?: ASS_INDEX_TYPE) => {
    return getPerNormListApi(_type || type);
  };

  return (
    <PageContainer
      title="指标分析"
      headerSlot={
        <div className={style.pageTools}>
          {TABS.map((tab) => (
            <Button
              key={tab.value}
              type="primary"
              ghost={tab.value !== type}
              size="large"
              onClick={() => {
                setType(tab.value);
                getTreeData(tab.value);
              }}
            >
              {tab.label}
            </Button>
          ))}
        </div>
      }
    >
      <div className={style.page}>
        <Sidebar
          type={type}
          currentId={currentId}
          checkable
          setCurrentId={setCurrentId}
          treeApi={getTreeData}
        />

        <Container currentId={currentId} />
      </div>
    </PageContainer>
  );
};

export default ManagementReportPage;
