import TabsContent from '@/components/TabsContent';
import { ChemCost } from '@/pages/Home/ChemCostComparison';
import { EnergyCost } from '@/pages/Home/EnergyCostComparison';
import { EnergyDetail } from '@/pages/Home/EnergyCostDetail';
import { WaterQuality } from '@/pages/Home/QualityMng';
import { WaterAmt } from '@/pages/Home/WaterAmtMng';
import { useState } from 'react';
import CostAnalysis from './CostAnalysis/CostAnalysis';

const OperationManage = () => {
  const [showEnergyDetail, setShowEnergyDetail] = useState(false);

  const items = [
    {
      label: '成本分析',
      key: '1',
      children: <CostAnalysis />,
    },
    {
      label: '水质分析',
      key: '2',
      children: <WaterQuality />,
    },
    {
      label: '水量分析',
      key: '3',
      children: <WaterAmt />,
    },
    {
      label: '药耗分析',
      key: '4',
      children: <ChemCost open />,
    },
    {
      label: '能耗分析',
      key: '5',
      children: showEnergyDetail ? (
        <div
          onClick={() => {
            setShowEnergyDetail(!showEnergyDetail);
          }}
        >
          <EnergyDetail />
        </div>
      ) : (
        <EnergyCost
          open
          detailClick={() => {
            setShowEnergyDetail(!showEnergyDetail);
          }}
        />
      ),
    },
  ];

  const onTabsChange = () => {};

  return (
    <TabsContent
      small
      bold={false}
      spacing={2.5}
      center={false}
      defaultActiveKey="1"
      items={items}
      onChange={onTabsChange}
    />
  );
};

export default OperationManage;