// import DepartmentSankey from '@/components/DepartmentSankey';
// import TreeCharts from '@/components/TreeCharts';
import services from '@/services';
import { Flex, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import SafetyProblem from './SafetyProblem';
import SignLeft from './SignLeft';
import SignTop from './SignTop';
import TraceSourceOfLostPoints from './TraceSourceOfLostPoints';
import styles from './index.less';

const Category = ({ item }: { item: any }) => {
  const [indexSystemData, setIndexSystemData] = useState<any>({});

  useEffect(() => {
    const params = {
      objectId: item?.objectId,
      indexId: item.id,
    };
    services.Physicalsign.getIndexSystem(params).then((res) => {
      if (res.code === 200) {
        console.log(res.data);
        setIndexSystemData(res.data || []);
      }
    });
  }, [item]);

  const tabItems = useMemo(() => {
    return [
      {
        label: `影响体征TOP5`,
        key: '1',
        children: <SignTop items={item} />,
      },
      {
        label: `失分溯源`,
        key: '2',
        children: (
          <TraceSourceOfLostPoints showLostPoints data={indexSystemData} objectId={item?.objectId} />
        ),
      },
      {
        label: `${item.name}问题`,
        key: '3',
        children: <SafetyProblem indexsItems={item} />,
      },
      {
        label: `指标体系`,
        key: '4',
        children: <TraceSourceOfLostPoints data={indexSystemData} />,
      },
    ];
  }, [item, indexSystemData]);

  return (
    <Flex className={styles.container} gap={30}>
      <SignLeft data={item} indexTotal={indexSystemData?.indexTotal} />
      <div className={styles.right}>
        <Tabs size="large" defaultActiveKey="1" centered items={tabItems} />
      </div>
    </Flex>
  );
};

export default Category;
