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


const Category = ({ item }: { item: any }) => {
 
  console.log('category', item)

  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} />,
      },
      {
        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;
